diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js index a3c85684..15e2f797 100644 --- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js +++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js @@ -85,7 +85,7 @@ export class LiquifyRealTimeUpdater { if (isDrawing && this.config.useDirectUpdate) { // 拖拽过程中使用快速更新(降低质量以提高性能) - this._fastUpdate(imageData); + await this._fastUpdate(imageData); } else { // 拖拽结束后使用完整更新(最高质量) await this._fullUpdate(imageData); @@ -124,7 +124,7 @@ export class LiquifyRealTimeUpdater { * @param {ImageData} imageData 图像数据 * @private */ - _fastUpdate(imageData) { + async _fastUpdate(imageData) { if (!this.targetObject || !this.targetObject._element) { return; } @@ -138,12 +138,14 @@ export class LiquifyRealTimeUpdater { // 直接更新fabric对象的图像源(使用PNG格式保持质量) const targetElement = this.targetObject._element; - // 方案1: 直接设置src属性(最高性能) const dataURL = this.tempCanvas.toDataURL("image/png", quality); - if (targetElement.src !== dataURL) { - targetElement.src = dataURL; + // targetElement.src = dataURL; + const image = new Image(); + image.src = dataURL; + await image.decode(); + this.targetObject.setElement(image); // 关键优化:直接设置fabric对象为脏状态,但不立即渲染 // this.targetObject.dirty = false; // 标记为不需要立即渲染 diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index 513e2778..49aadbb3 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -447,6 +447,7 @@ +