@cs-open/react-fabric/dist/cjs/plugins/Mask.cjs.map

React Fabric

{"version":3,"file":"Mask.cjs","sources":["../../../src/plugins/Mask.tsx"],"sourcesContent":["import { Rect } from 'fabric'\nimport { useEffect, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nexport type PluginMaskProps = {\n    defaultFill?: boolean // 是否默认没有选择对象时，蒙层遮住整个图片\n    fullness?: boolean // 是否完全遮住\n}\n\n/** 聚焦对象时蒙层；边界是背景图片 */\nconst PluginMask = (props: PluginMaskProps) => {\n    const { defaultFill = false, fullness = false } = props\n    const store = useStoreApi()\n    const { canvas } = store.getState()\n    const maskRectRef = useRef<Rect | null>(null)\n\n    const initMaskRect = () => {\n        return new Rect({\n            left: 0,\n            top: 0,\n            fill: 'rgba(0,0,0,0.2)' /** 半透明灰色 */,\n            selectable: false,\n            evented: false,\n            excludeFromExport: true /** toJSON 不存在，getObjects 存在 */,\n            isMask: true,\n        })\n    }\n\n    const renderDefaultMask = () => {\n        if (!canvas?.backgroundImage) return\n\n        if (maskRectRef.current) {\n            maskRectRef.current.set({\n                clipPath: null,\n            })\n            canvas.requestRenderAll()\n        } else {\n            maskRectRef.current = initMaskRect()\n            maskRectRef.current.set({\n                width: canvas.backgroundImage?.width,\n                height: canvas.backgroundImage?.height,\n            })\n            canvas.add(maskRectRef.current)\n            canvas.moveObjectTo(maskRectRef.current, -999)\n        }\n    }\n\n    useEffect(() => {\n        if (fullness) renderDefaultMask()\n    }, [fullness])\n\n    useEffect(() => {\n        if (!canvas) return\n        if (defaultFill) renderDefaultMask()\n\n        const renderMask = (e: any) => {\n            const { selected } = e\n            const target = selected[0]\n            if (!canvas || !target) return\n            if (!target.get('showMark')) return\n\n            /** 必须加上以下参数，才能裁切成功 */\n            target.inverted = true\n            target.absolutePositioned = true\n            /** 从未触发过时，初始化蒙层 */\n            if (!maskRectRef.current) {\n                maskRectRef.current = initMaskRect()\n                setTimeout(() => {\n                    if (!maskRectRef.current) return\n                    maskRectRef.current.set({\n                        width: canvas.backgroundImage?.width,\n                        height: canvas.backgroundImage?.height,\n                        clipPath: target,\n                    })\n                    canvas.add(maskRectRef.current)\n                    canvas.moveObjectTo(maskRectRef.current, -999)\n                }, 100)\n            } else {\n                maskRectRef.current.set({\n                    width: canvas.backgroundImage?.width || maskRectRef.current.width,\n                    height: canvas.backgroundImage?.height || maskRectRef.current.height,\n                    clipPath: target,\n                })\n                canvas.requestRenderAll()\n            }\n        }\n\n        /** 第一次是点击触发 created，切换另一个框是触发 updated */\n        canvas.on('selection:created', renderMask)\n        canvas.on('selection:updated', renderMask)\n\n        return () => {\n            if (maskRectRef.current) {\n                canvas.remove(maskRectRef.current)\n                maskRectRef.current = null\n            }\n            canvas.off('selection:created', renderMask)\n            canvas.off('selection:updated', renderMask)\n            canvas.requestRenderAll()\n        }\n    }, [canvas])\n\n    return <></>\n}\n\nexport default PluginMask\n"],"names":["PluginMask","props","defaultFill","fullness","store","useStoreApi","canvas","maskRectRef","useRef","initMaskRect","Rect","renderDefaultMask","useEffect","renderMask","e","selected","target","jsx","Fragment"],"mappings":"iLAUA,MAAMA,EAAcC,GAA2B,CAC3C,KAAM,CAAE,YAAAC,EAAc,GAAO,SAAAC,EAAW,EAAM,EAAIF,EAC5CG,EAAQC,cAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SACnBG,EAAAA,EAAcC,EAAAA,OAAoB,IAAI,EAEtCC,EAAe,IACV,IAAIC,EAAAA,KAAK,CACZ,KAAM,EACN,IAAK,EACL,KAAM,kBACN,WAAY,GACZ,QAAS,GACT,kBAAmB,GACnB,OAAQ,EACZ,CAAC,EAGCC,EAAoB,IAAM,CACvBL,GAAQ,kBAETC,EAAY,SACZA,EAAY,QAAQ,IAAI,CACpB,SAAU,IACd,CAAC,EACDD,EAAO,iBAAiB,IAExBC,EAAY,QAAUE,EAAa,EACnCF,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,MAC/B,OAAQA,EAAO,iBAAiB,MACpC,CAAC,EACDA,EAAO,IAAIC,EAAY,OAAO,EAC9BD,EAAO,aAAaC,EAAY,QAAS,IAAI,GAErD,EAEA,OAAAK,EAAAA,UAAU,IAAM,CACRT,GAAUQ,EAAAA,CAClB,EAAG,CAACR,CAAQ,CAAC,EAEbS,YAAU,IAAM,CACZ,GAAI,CAACN,EAAQ,OACTJ,GAAaS,IAEjB,MAAME,EAAcC,GAAW,CAC3B,KAAM,CAAE,SAAAC,CAAS,EAAID,EACfE,EAASD,EAAS,CAAC,EACrB,CAACT,GAAU,CAACU,GACXA,EAAO,IAAI,UAAU,IAG1BA,EAAO,SAAW,GAClBA,EAAO,mBAAqB,GAEvBT,EAAY,SAabA,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,OAASC,EAAY,QAAQ,MAC5D,OAAQD,EAAO,iBAAiB,QAAUC,EAAY,QAAQ,OAC9D,SAAUS,CACd,CAAC,EACDV,EAAO,iBAAiB,IAjBxBC,EAAY,QAAUE,EAAa,EACnC,WAAW,IAAM,CACRF,EAAY,UACjBA,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,MAC/B,OAAQA,EAAO,iBAAiB,OAChC,SAAUU,CACd,CAAC,EACDV,EAAO,IAAIC,EAAY,OAAO,EAC9BD,EAAO,aAAaC,EAAY,QAAS,IAAI,EACjD,EAAG,GAAG,GASd,EAGA,OAAAD,EAAO,GAAG,oBAAqBO,CAAU,EACzCP,EAAO,GAAG,oBAAqBO,CAAU,EAElC,IAAM,CACLN,EAAY,UACZD,EAAO,OAAOC,EAAY,OAAO,EACjCA,EAAY,QAAU,MAE1BD,EAAO,IAAI,oBAAqBO,CAAU,EAC1CP,EAAO,IAAI,oBAAqBO,CAAU,EAC1CP,EAAO,iBAAA,CACX,CACJ,EAAG,CAACA,CAAM,CAAC,EAEJW,EAAAA,IAAAC,EAAAA,SAAA,CAAA,CAAE,CACb"}