Canvas需自行实现网格辅助线与吸附功能：一、用原生API绘制半透明网格线；二、Fabric.js开启aligning_guidelines并动态适配缩放；三、裁剪时通过坐标归一化+四舍五入吸附到网格点；四、进阶支持比例锁定引导线与尺寸吸附。
Canvas 本身不内置网格辅助线或自动对齐功能，但你可以结合 Fabric.js 或纯 Canvas API 自行实现。重点在于“视觉提示”+“逻辑约束”——既要画出参考线，也要在拖拽/缩放/裁剪时让对象吸附到网格点上。
一、用 Canvas 原生 API 绘制网格线
在裁剪区域的 canvas 上叠加一层半透明网格，作为视觉辅助：
- 用
ctx.beginPath()+ctx.moveTo()+ctx.lineTo()画横竖线 - 设置
ctx.strokeStyle = 'rgba(0,0,0,0.1)'和ctx.lineWidth = 1 - 按固定间距（如 20px）循环绘制，覆盖整个 canvas 尺寸
- 每次重绘前调用
ctx.clearRect()清除旧网格，再重画新位置（尤其在缩放或平移后）
二、Fabric.js 中启用并定制对齐辅助线
Fabric.js 的 aligning_guidelines 扩展已封装好对齐逻辑，只需开启并微调：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 设置
canvas.options.alwaysShowControls = true确保控制点常显 - 启用对齐：
canvas.controlsAboveOverlay = true+canvas.aligningLineOffset = 5（吸附灵敏度） - 自定义网格间距：修改
canvas.getZoom() * gridStep动态适配缩放后的真实像素距离 - 若需裁剪框也响应对齐，把裁剪区域包装为
fabric.Rect并加入 canvas，它会自动参与 aligning 检测
三、裁剪过程中强制吸附到网格点
不是只画线，还要让裁剪框的四个角“卡住”网格交点：
- 监听裁剪对象的
moving或scaling事件 - 获取当前坐标（如
obj.left,obj.top），用Math.round(val / gridSize) * gridSize四舍五入到最近网格点 - 注意：要基于 canvas 的
getZoom()和getZoomOrigin()做坐标归一化，否则缩放后吸附失效 - 示例：若网格步长是 20px，当前 zoom=2，则实际吸附单位是
20 / 2 = 10px屏幕像素
四、进阶：带比例锁定的网格裁剪（如 4:3、1:1）
固定宽高比裁剪时，网格不只是等距线，还应包含关键比例引导线：
- 除常规网格外，额外绘制黄金分割线、三分线、中心十字线
- 用
ctx.setLineDash([4, 4])区分主辅线条 - 在裁剪交互中，当用户拖动某一边时，同步调整对边位置，保持比例，并将新尺寸吸附到最近的“比例友好值”（如 4:3 → 宽取 400/600/800，高对应 300/450/600）
