feat: image blurry with clipPath (sleepy-zone#31)

crazysnowboy · Apr 2, 2024 · d42271e · d42271e
1 parent d363dc5
commit d42271e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -9,7 +9,7 @@ export const HOVER_OBJECT_CONTROL = true;
 // Image ClipPath bug?
 // https://github.com/fabricjs/fabric.js/issues/5639
 // but will cause low performance
-export const IMAGE_CLIPPATH_QUALITY = false;
+export const IMAGE_CLIPPATH_QUALITY = true;
 
 export const MAX_HISTORY_LENGTH = 100;
 

diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -69,7 +69,8 @@ export default class Editor {
       width: workspaceEl.offsetWidth,
       height: workspaceEl.offsetHeight,
       backgroundColor: '#ddd',
-      preserveObjectStacking: true
+      preserveObjectStacking: true,
+      imageSmoothingEnabled: false
     });
   }
 

diff --git a/src/editor/objects/init.ts b/src/editor/objects/init.ts
@@ -4,7 +4,9 @@ import { IMAGE_CLIPPATH_QUALITY } from '@/config';
 
 export const initObjectPrototype = () => {
   if (IMAGE_CLIPPATH_QUALITY) {
-    fabric.Object.prototype.needsItsOwnCache = () => false
+    fabric.Object.prototype.needsItsOwnCache = () => false;
+    // @ts-ignore
+    fabric.perfLimitSizeTotal = 16777216; // allows for up to 4096x4096 cache
   }
 
   // Text global config