search

ikuaitu / vue-fabric-editor

快图设计-基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
https://ikuaitu.github.io/doc/#/
MIT License
4.87k stars 911 forks source link

新增的蒙版功能导致项目多个功能异常 #479

Closed wuchenguang1998 closed 2 months ago

wuchenguang1998 commented 2 months ago

1.初始进入页面(蒙版处于关闭状态)，此时添加元素，发现画布裁切clipPath功能失效，导致添加的元素超出画布还能显示

https://github.com/user-attachments/assets/38d7cd16-62c5-4b81-b9ff-aae9c9da3bca

2.初始进入页面(蒙版处于关闭状态)，此时添加模板，并拖拽画布resize控制条，发现以下问题： 往外拖拽时，画布没有延展； 往里拖拽时，画布裁切clipPath功能失效

https://github.com/user-attachments/assets/92654974-ba76-4ad6-b971-cac38e6790f9

3.初始进入页面(蒙版处于关闭状态)，此时添加模板，随后开启右侧蒙版，并拖拽画布resize控制条，发现以下问题： 往外拖拽时，画布延展，但蒙版没有跟着延展；且蒙版长宽没有跟着更新； 往里拖拽时，画布裁切clipPath功能失效，且蒙版范围没有跟着控制条收缩；

https://github.com/user-attachments/assets/6b4bfc34-3bdf-46d4-9df6-044469f7b61d

这3个问题均由蒙版功能引发，本想自己解决，但看了下代码，蒙版功能的改动分布在workspace、resize、mask这几个插件，暂时还没时间捋清楚逻辑。 期待有缘人解决🤝

Qiu-Jun commented 2 months ago

大概原理时，复制了一层workspace来处理，主要代码在maskPlugin的initMask和setCoverMask。问题太多的话，先把使用蒙版，开开启关闭注释了先，这个功能实用场景不大，老秦那边本来不想合并进来的

nihaojob commented 2 months ago

感谢两位大佬， 从一个图片编辑产品的定位来看，并不太实用，从开发角度看增加了理解成本，功能很不错，功能可能有其他的场景，咱们先注释掉吧，后期有时间了再优化。