fix: 优化指示器位置更新逻辑,支持原生事件坐标转换

This commit is contained in:
bighuixiang
2025-08-04 23:10:45 +08:00
parent 24a98d215e
commit 141821a843

View File

@@ -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();
}