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 @@
+