search

leaferjs / leafer-ui

一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑，前端开发必备~
https://www.leaferjs.com
MIT License
2.38k stars 82 forks source link

新增自由橡皮擦需求 #119

Closed Steve245270533 closed 3 months ago

Steve245270533 commented 6 months ago

目前的橡皮擦功能更像是在对指定编组内的图形做一个求差运算，并没有适用于全屏幕元素实时擦除效果的工具，例如这种效果： eraser

最理想的情况是指定的范围都被真实擦除，而不是拿画板颜色去填充，如果有背景图的情况下，建议针对UI类加入一个lock: true锁定属性，在锁定属性下，擦除的时候对该对象没有效果。

此需求源于之前做的一个白板项目，当时是借助fabric.js做的 我不确定这个需求是否好实现，希望官方能够出这个功能，这样做一个完整的白板应用就很nice了~

leaferjs commented 6 months ago

目前的橡皮擦可以做到你演示的功能，你再研究下看看～

leaferjs commented 6 months ago

这个需求我先记录下：建议针对UI类加入一个lock: true锁定属性，在锁定属性下，擦除的时候对该对象没有效果

Steve245270533 commented 5 months ago

目前的橡皮擦可以做到你演示的功能，你再研究下看看～

还是没有研究出来，始终感觉目前的擦除方法只是对组内的图形做了个基于当前位置的差集，如果挪动了要擦除的图形位置会有问题，请问有更详细的代码案例演示（给个stackblitz演示地址之类的）吗？

leaferjs commented 3 months ago

你的这个需求应该是位图的实时擦除，可以直接创建一个位图的Canvas元素，橡皮擦用原生的一种混合模式擦除就可以，我们也会考虑提供一个场景示例放到文档中