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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 390 天前的主题，其中的信息可能已经有所发展或是发生改变。

需求：

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

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

第 1 条附言 · 2023-10-30 17:25:52 +08:00

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

canvas

涂抹

蒙版

元🤣

18 条回复 • 2023-10-31 10:12:39 +08:00

youthkun

2023-10-30 16:57:27 +08:00

那我必须自推一下

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

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

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

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

youthkun

2023-10-30 17:00:17 +08:00

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

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

codeself

2023-10-30 17:01:14 +08:00

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

sunmonster

2023-10-30 17:06:11 +08:00

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

sunmonster

2023-10-30 17:08:04 +08:00

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

youthkun

2023-10-30 17:10:05 +08:00

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

cheese

2023-10-30 17:10:08 +08:00

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

horizon

2023-10-30 17:14:57 +08:00

你发一个 codesandbox ？

sunmonster

2023-10-30 17:22:33 +08:00

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

youthkun

2023-10-30 17:25:40 +08:00

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

sunmonster

2023-10-30 17:38:31 +08:00

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

yozoh1163

2023-10-30 17:39:27 +08:00

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

hamburgerdog

2023-10-30 17:48:32 +08:00

介绍一种 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 即可。