[有偿] Canvas 在底图之上画蒙版，支持相应式缩放和移动

[sunmonster]

需求：

跟现在的 AI 画图蒙版一样，就是加载上传一张底图，通过 canvas 涂抹，得到一张黑底白色涂抹区域的图片， canvas 涂抹比较好做，这个我自己都能实现，但是支持响应式和放大移动，蒙版的涂抹位置就飘了，不知道该如何计算正确定位

各位大神有什么好的方案吗，如果能够提供代码实现，最好是 react 组件，愿意支付现金 680 元，为啥是 680 元，因为我微信的零钱是 680 元🤣

可能文字描述有点抽象，可以直接参考这个： https://clipdrop.co/cleanup

[youthkun]

那我必须自推一下

我开源了一个基于 Konva.js 的绘图编辑器框架——Pictode ，支持自定义图形工具和功能插件，可以快速搭建 Konva.js 的白板、图片编辑器、图像标注、涂鸦等应用，支持选择器插件、历史记录插件、对齐插件等等

掘金： https://juejin.cn/post/7286307632193142843?searchId=20231027095741D588E68165C92B84F836

GitHub: https://github.com/JessYan0913/pictode

pictode 支持 Konva.js 的图形，并且我最近正在做 Pictode 的 React 组件。

[youthkun]

pictode 体验地址： https://pictode.com/#/

支持 UI 框架及原生集成，轻松实现放大、平移、选中、历史记录等功能

[codeself]

那可惜了,为啥你微信零钱不是 100,0000

[sunmonster]

@codeself 我也想啊，真有那么多钱，分你一半，😎

[sunmonster]

@youthkun 这个不支持下载蒙版吧

[youthkun]

@sunmonster 你的需求不就是在图像上绘制一个区域，然后下载图像，绘制区域反转为白色，其他区域为黑色嘛

[cheese]

绘图可以用 canvas 库，fabricjs 我没有详细测试，但是理论上，它的 zoom 功能是会将画布中的物体按照等比例放大移动的
http://fabricjs.com/freedrawing
http://fabricjs.com/fabric-intro-part-5

[horizon]

你发一个 codesandbox ？

[sunmonster]

@youthkun 是跟这种一样的： https://clipdrop.co/cleanup

[youthkun]

@sunmonster 基于 pictode 可以实现，目前 pictode 我只实现了画板这个工具，像 https://clipdrop.co/cleanup 的工具也在规划中。你可以先了解一下 Pictode ，有什么问题可以随时找我

[sunmonster]

@youthkun 我看 cleanup 是将底图放在 canvas 下面，而不是 canvas 当中，添加到 canvas 中就不能单独下载蒙版了，但是底图放在下面，需要实现放大缩小和移动，就没法保证涂抹的路径跟底图对应起来，因为笔触的位置是相对定位，放大缩小移动，相对位置都变化了

[yozoh1163]

fabricjs 可以满足 zoomToPoint 鼠标位置缩放、setZoom 画布缩放、selectable 默认就支持拖动

[hamburgerdog]

介绍一种 Canvas 的简单实现：一个 root 对象两个 Canvas 图层，一个画 Image 一个画 Brush 。

要算以下过程 (以 画布为 200\*100 ，图形 100\*200 为例) ：


1. 原图尺寸下，移动到图片和画布的中心原点对齐的坐标上去，这个坐标为( 25, -25 )
2. 中心点移动到画布中心原点（ 25, 100 ）
3. 缩放
4. 再把画布坐标偏移到图片左上角（-25, -100 ）

每次改变缩放重复执行以上的步骤。

```JS
ctx.save();

// 重设坐标系
context.translate(origin.X, origin.Y);
context.translate(contentSize.width / 2, contentSize.height / 2); // 图片大小
context.scale(scale, scale);
context.rotate((Math.PI / 180) * rotate);
context.translate(-contentSize.width / 2, -contentSize.height / 2);

root.draw();

ctx.restore();
```

响应式和缩放都统一触发 imageCanvas.draw() / brushCanvas.draw() ，需移动图形则修改 root.origin 即可。

[cian]

d2ViM3d1bWluZw== 我来试试

[94qihang]

fabricjs 应该能做

[kissmenow]

ZG9raXNzbWVub3c=
上个月刚做这个需求，好家伙 一毛一样

[youthkun]

@sunmonster 这些问题在 Pictode 中都已经解决了

[wyhooo]

fabricjs +1