想知道当初第一波干前端的人是怎么入局前端的呢，以前的前端是从后端分出来的吧

感觉前端彻底没了，上半年还有前端的活，现在直接figma出原型给后端，后端拿着原型就开干了，直接绕过前端了，我都闲了三四个月了，天天到工位烧壶茶，开始划水，感觉职业生涯岌岌可危，想问一下大佬们，转全栈有什么最优路线没，不转不行了。

折腾 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