更新画布蒙版

src/configs/canvas.ts

@@ -28,7 +28,7 @@ export const LocalStorageDiscardedKey = 'YFT_DISCARD_DB'
 export const WorkSpaceEditColor = 'rgba(255,255,255,1)'
 
 // 画布蒙版颜色
-export const WorkSpaceMaskColor = 'rgba(255,255,255,0)'
+export const WorkSpaceMaskColor = '#f3f3f3'
 
 // 画布背景颜色
 export const CanvasBackground = 'rgba(255,255,255,0)'

src/mocks/templates.ts

@@ -15,7 +15,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,
@@ -570,7 +570,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,
@@ -29497,7 +29497,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,

src/views/Canvas/useCanvas.ts

@@ -1,7 +1,8 @@
+import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Canvas, Object as FabricObject, Textbox, Group, Point } from 'fabric'
+import { WorkSpaceThumbType } from "@/configs/canvas"
 import { useFabricStore } from '@/store/modules/fabric'
-import { watch } from 'vue'
 import { useElementBounding } from '@vueuse/core'
 import { FabricTool } from '@/app/fabricTool'
 import { GuideLines } from '@/app/guideLines'
@@ -72,7 +73,7 @@ const setCanvasTransform = () => {
   const { zoom, wrapperRef, scalePercentage } = storeToRefs(fabricStore)
   const { width, height } = useElementBounding(wrapperRef.value)
   canvas.setDimensions({width: width.value, height: height.value})
-  const objects = canvas.getObjects()
+  const objects = canvas.getObjects().filter(ele => !WorkSpaceThumbType.includes(ele.id))
   const boundingBox = Group.prototype.getObjectsBoundingBox(objects)
   if (!boundingBox) return
   zoom.value = Math.min(canvas.getWidth() / boundingBox.width, canvas.getHeight() / boundingBox.height,) * scalePercentage.value / 100

src/views/Canvas/useCenter.ts

@@ -1,18 +1,14 @@
 import useCanvas from "./useCanvas"
-import { WorkSpaceDrawType } from "@/configs/canvas"
+import { WorkSpaceDrawType, WorkSpaceThumbType } from "@/configs/canvas"
 import { CanvasElement } from "@/types/canvas"
 import { Group, Point } from "fabric"
 
 export default () => {
   const [ canvas ] = useCanvas()
   const workSpaceDraw = canvas.getObjects().filter(item => (item as CanvasElement).id === WorkSpaceDrawType)[0] as CanvasElement
-  const objects = canvas.getObjects()
-  // const centerPoint = workSpaceDraw.getCenterPoint()
-  // const originPoint = workSpaceDraw.getPointByOrigin('left', 'top')
+  const objects = canvas.getObjects().filter(ele => !WorkSpaceThumbType.includes(ele.id))
   const boundingBox = Group.prototype.getObjectsBoundingBox(objects)
-  // if (boundingBox) {
-  //   console.log(boundingBox.centerX, boundingBox.centerY, centerPoint)
-  // }
+
   let left = 0, top = 0
   let centerPoint = canvas.getCenterPoint()
   let width = canvas.getWidth(), height = canvas.getHeight()

src/views/Canvas/useCommon.ts

@@ -125,9 +125,11 @@ export default () => {
       visible: showClip.value,
       ...WorkSpaceCommonOption
     })
+
     canvas.add(workSpaceClip)
     canvas.add(workSpaceSafe)
     canvas.add(workLineGroup)
+    canvas.add(workSpaceMask)
     canvas.renderAll()
   }
 

src/views/Editor/CanvasRight/WorkStylePanel/index.vue

@@ -292,7 +292,7 @@ watch(gridColorRecent, () => {
 
 const changeMaskOpacity = () => {
   const [ canvas ] = useCanvas()
-  const workMask = canvas.getObjects(WorkSpaceMaskType)[0]
+  const workMask = canvas.getObjects().filter(ele => ele.id === WorkSpaceMaskType)[0]
   if (!workMask) return
   workMask.set('opacity', opacity.value)
   canvas.renderAll()