fix: 优化指示器位置更新逻辑,支持原生事件坐标转换
This commit is contained in:
@@ -97,7 +97,8 @@ export class BrushIndicator {
|
||||
if (!this.staticCanvas || !this.canvas) return;
|
||||
|
||||
// 检查是否为笔刷或橡皮擦模式,非相关模式直接返回
|
||||
const isBrushMode = this.canvas.isDrawingMode && this.canvas.freeDrawingBrush;
|
||||
const isBrushMode =
|
||||
this.canvas.isDrawingMode && this.canvas.freeDrawingBrush;
|
||||
const isEraserMode =
|
||||
this.canvas.isDrawingMode &&
|
||||
this.canvas.freeDrawingBrush &&
|
||||
@@ -135,7 +136,10 @@ export class BrushIndicator {
|
||||
const currentVpt = this.canvas.viewportTransform;
|
||||
if (
|
||||
currentVpt &&
|
||||
!this._areViewportTransformsEqual(currentVpt, this._lastCanvasState.viewportTransform)
|
||||
!this._areViewportTransformsEqual(
|
||||
currentVpt,
|
||||
this._lastCanvasState.viewportTransform
|
||||
)
|
||||
) {
|
||||
this.staticCanvas.setViewportTransform([...currentVpt]);
|
||||
this._lastCanvasState.viewportTransform = [...currentVpt];
|
||||
@@ -313,8 +317,26 @@ export class BrushIndicator {
|
||||
updatePosition(pointer) {
|
||||
if (!this.isVisible || !this.indicatorCircle) return;
|
||||
|
||||
// 使用主画布的坐标转换
|
||||
const canvasPointer = this.canvas.getPointer(pointer);
|
||||
let canvasPointer;
|
||||
// 如果是原生事件(如 e.e),优先用 clientX/clientY 转换
|
||||
if (
|
||||
pointer &&
|
||||
pointer.clientX !== undefined &&
|
||||
pointer.clientY !== undefined
|
||||
) {
|
||||
// 获取主画布的包裹元素位置
|
||||
const rect = this.canvas.upperCanvasEl.getBoundingClientRect();
|
||||
const x = pointer.clientX - rect.left;
|
||||
const y = pointer.clientY - rect.top;
|
||||
// 逆变换到画布坐标
|
||||
canvasPointer = fabric.util.transformPoint(
|
||||
new fabric.Point(x, y),
|
||||
fabric.util.invertTransform(this.canvas.viewportTransform)
|
||||
);
|
||||
} else {
|
||||
// 兼容 fabric 的 getPointer
|
||||
canvasPointer = this.canvas.getPointer(pointer);
|
||||
}
|
||||
|
||||
// 更新当前位置
|
||||
this.currentPosition = {
|
||||
@@ -328,8 +350,6 @@ export class BrushIndicator {
|
||||
top: canvasPointer.y,
|
||||
});
|
||||
|
||||
// 重新渲染静态画布
|
||||
// this.staticCanvas.renderAll();
|
||||
// 优化渲染
|
||||
this.staticCanvas.requestRenderAll();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user