更新颜色叠加效果

dromara · Jan 23, 2024 · 29ceb97 · 29ceb97
1 parent 17f44bd
commit 29ceb97
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/hooks/useHandleTemplate.ts b/src/hooks/useHandleTemplate.ts
@@ -61,14 +61,14 @@ export default () => {
    * 移动页面焦点
    * @param command 移动页面焦点命令：上移、下移
    */
-  const updateTemplateIndex = (command: string) => {
+  const updateTemplateIndex = async (command: string) => {
     if (command === KEYS.UP && templateIndex.value > 0) {
       templatesStore.setTemplateIndex(templateIndex.value - 1)
     }
     else if (command === KEYS.DOWN && templateIndex.value < templates.value.length - 1) {
       templatesStore.setTemplateIndex(templateIndex.value + 1)
     }
-    templatesStore.renderTemplate()
+    await templatesStore.renderTemplate()
   }
 
   // 将当前页面数据加密后复制到剪贴板
@@ -99,10 +99,10 @@ export default () => {
     await templatesStore.renderTemplate()
   }
 
-  const addTemplate = (template: Template) => {
-    templatesStore.addTemplate(template)
+  const addTemplate = async (template: Template) => {
+    await templatesStore.addTemplate(template)
     templatesStore.setTemplateIndex(templateIndex.value)
-    templatesStore.renderTemplate()
+    await templatesStore.renderTemplate()
   }
 
   // // 根据模板创建新页面

diff --git a/src/store/modules/template.ts b/src/store/modules/template.ts
@@ -118,10 +118,10 @@ export const useTemplatesStore = defineStore('Templates', {
 
     setObjectFilter(objects: CanvasElement[]) {
       objects.forEach(ele => {
-        if (ele.type === ElementNames.IMAGE) {
+        if (ele.type.toLowerCase() === ElementNames.IMAGE) {
           this.setImageFilter(ele as ImageElement)
         }
-        if (ele.type === ElementNames.GROUP) {
+        if (ele.type.toLowerCase() === ElementNames.GROUP) {
           this.setObjectFilter(((ele as GroupElement).objects) as CanvasElement[])
         }
       })

diff --git a/src/views/Canvas/useFilter.ts b/src/views/Canvas/useFilter.ts
@@ -30,7 +30,7 @@ const findElement = (eid: string, elements: CanvasElement[] | undefined): Canvas
     if (item.id === eid) {
       return item
     }
-    if (item.type === ElementNames.GROUP) {
+    if (item.type.toLowerCase() === ElementNames.GROUP) {
       return findElement(eid, ((item as GroupElement).objects) as CanvasElement[])
     }
   }

diff --git a/src/worker/filter.ts b/src/worker/filter.ts
@@ -12,7 +12,7 @@ self.onmessage = async (e) => {
   }
   else if (type === 'filter') {
     const { src, pixiFilters, width, height, id } = e.data
-    // app?.renderer.clear()
+    app?.renderer.clear()
     app?.renderer.resize(width, height)
     const texture = await Texture.fromURL(src)
     const sprite = new Sprite(texture)
@@ -30,6 +30,7 @@ self.onmessage = async (e) => {
         handleColorGradientFilter(ele as PixiColorGradientFilter, sprite.filters)
       }
     }
+    console.log('sprite.filters:', sprite.filters)
     app?.stage.addChild(sprite)
     const res = await app?.renderer.plugins.extract.base64(sprite)
     const data = {res, id}