fix: 优化指示器位置更新逻辑,支持原生事件坐标转换
This commit is contained in:
@@ -97,7 +97,8 @@ export class BrushIndicator {
|
|||||||
if (!this.staticCanvas || !this.canvas) return;
|
if (!this.staticCanvas || !this.canvas) return;
|
||||||
|
|
||||||
// 检查是否为笔刷或橡皮擦模式,非相关模式直接返回
|
// 检查是否为笔刷或橡皮擦模式,非相关模式直接返回
|
||||||
const isBrushMode = this.canvas.isDrawingMode && this.canvas.freeDrawingBrush;
|
const isBrushMode =
|
||||||
|
this.canvas.isDrawingMode && this.canvas.freeDrawingBrush;
|
||||||
const isEraserMode =
|
const isEraserMode =
|
||||||
this.canvas.isDrawingMode &&
|
this.canvas.isDrawingMode &&
|
||||||
this.canvas.freeDrawingBrush &&
|
this.canvas.freeDrawingBrush &&
|
||||||
@@ -135,7 +136,10 @@ export class BrushIndicator {
|
|||||||
const currentVpt = this.canvas.viewportTransform;
|
const currentVpt = this.canvas.viewportTransform;
|
||||||
if (
|
if (
|
||||||
currentVpt &&
|
currentVpt &&
|
||||||
!this._areViewportTransformsEqual(currentVpt, this._lastCanvasState.viewportTransform)
|
!this._areViewportTransformsEqual(
|
||||||
|
currentVpt,
|
||||||
|
this._lastCanvasState.viewportTransform
|
||||||
|
)
|
||||||
) {
|
) {
|
||||||
this.staticCanvas.setViewportTransform([...currentVpt]);
|
this.staticCanvas.setViewportTransform([...currentVpt]);
|
||||||
this._lastCanvasState.viewportTransform = [...currentVpt];
|
this._lastCanvasState.viewportTransform = [...currentVpt];
|
||||||
@@ -313,8 +317,26 @@ export class BrushIndicator {
|
|||||||
updatePosition(pointer) {
|
updatePosition(pointer) {
|
||||||
if (!this.isVisible || !this.indicatorCircle) return;
|
if (!this.isVisible || !this.indicatorCircle) return;
|
||||||
|
|
||||||
// 使用主画布的坐标转换
|
let canvasPointer;
|
||||||
const canvasPointer = this.canvas.getPointer(pointer);
|
// 如果是原生事件(如 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 = {
|
this.currentPosition = {
|
||||||
@@ -328,8 +350,6 @@ export class BrushIndicator {
|
|||||||
top: canvasPointer.y,
|
top: canvasPointer.y,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 重新渲染静态画布
|
|
||||||
// this.staticCanvas.renderAll();
|
|
||||||
// 优化渲染
|
// 优化渲染
|
||||||
this.staticCanvas.requestRenderAll();
|
this.staticCanvas.requestRenderAll();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user