折腾 Canvas 画板的自动吸附，踩了个挺无语的坑。 - xiangc579 - 沸点 - 掘金

软件架构师 / 独立开发 @Tumio / FocusFlow

折腾 Canvas 画板的自动吸附，踩了个挺无语的坑。

想用 3x3 Sobel 算子做纯前端卡片轮廓吸附：点击卡片任意位置，直接抓 ImageData 算 Gx/Gy 梯度，再把强度投影到 X/Y 轴找能量峰值。

想法挺美好，真实场景直接抓瞎：
1. 卡片里只要有段黑体字或小图标，高频文字梯度比 1px 浅色 border 强太多，能量峰值经常直接把“第一行标题”当成了卡片外边缘……
2. 碰到 box-shadow 弥散阴影，外边框梯度几乎被吃平。

想请教下做过白板、设计工具或标注系统的大佬：客户端纯像素级吸附卡片轮廓，大家一般怎么过滤内部高频文字噪点？前置叠高斯滤波感觉会钝化弱边框，还是说换成从点击点向外打射线（Raycast）测颜色跳变更合适？

```javascript
// 核心 Sobel 3x3 卷积与一维投影
for (let y = 1; y < H - 1; y++) {
for (let x = 1; x < W - 1; x++) {
const gx = (g[idx(x+1,y-1)] + 2*g[idx(x+1,y)] + g[idx(x+1,y+1)]) -
(g[idx(x-1,y-1)] + 2*g[idx(x-1,y)] + g[idx(x-1,y+1)]);
const gy = (g[idx(x-1,y+1)] + 2*g[idx(x,y+1)] + g[idx(x+1,y+1)]) -
(g[idx(x-1,y-1)] + 2*g[idx(x,y-1)] + g[idx(x+1,y-1)]);
profileX[x] += Math.abs(gx);
profileY[y] += Math.abs(gy);
}
}
```
#前端 #JavaScript #Canvas

展开

前端开发圈

赞过