几何绘图这件事很多人的第一反应是打开某个体积上百兆的桌面软件等它启动的那二三十秒顺便刷一下手机。而真正的需求往往只是——画个三角形、标个角度、加两条辅助线、导出一张干净的图放进讲义里。这种“小活大做”的别扭感正是我动手做一个轻量网页工具的起点。它不需要安装浏览器打开就能画核心几何绘图能力齐全辅助线、吸附、标注、导出一样不少新手五分钟内基本能上手。这篇文章我会把整个从零到可用的过程拆开讲功能怎么砍、坐标系怎么设计、命中检测和吸附怎么写、导出怎么保证清晰、哪些坑必须提前避开。适合正在做教学演示、文档配图、几何题讲解或者单纯想搞明白一个网页绘图工具内部是怎么运转的人看无论你是刚接触前端的新手还是想找一个可二次开发的小项目练手都能直接拿里面的思路和代码去用。1. 先把“轻量”和“5分钟上手”翻译成功能清单“轻量”这两个字在需求文档里是最容易被写烂的词。它到底是说安装包小还是说打开快还是说功能少我的定义很明确单页打开、无需登录、无需联网加载大资源、首屏可交互时间控制在一秒以内。这个定义直接决定了后面的所有取舍因为任何一条不满足用户就会觉得“这玩意儿挺重的”。1.1 三个必须先砍掉的东西做这类工具第一版最大的敌人不是技术难点是功能膨胀。我列了三个坚决不做的东西事后证明这个决定救了整个项目。第一个是图层系统。图层在专业绘图软件里是刚需但在几何绘图场景里它带来的心智负担远大于收益。画一条辅助线还要想“我在哪个图层”这是典型的专业软件思维不是轻量工具思维。我改用“图元属性”代替图层每条线、每个点自己带一个可见性和样式属性辅助线用虚线加浅色区分用户不需要管理层级关系。第二个是账号与云端同步。只要涉及到账号就必然要处理登录态、数据迁移、隐私说明一下子就从“五分钟上手”变成“五分钟注册”。我改成纯本地存储画完直接导文件浏览器关掉前自动存一份到 localStorage下次打开自动恢复用户完全无感知。第三个是复杂的约束求解器。真正的几何作图软件有“过一点作已知直线的平行线”这种动态约束背后是一套约束求解工程量极大。我把这类需求降级为“吸附 手动微调”用户先吸附到大致正确的几何关系再改数值。九成场景够用剩下那一成用户其实也更愿意自己输个精确数字。我个人的判断标准是一个功能如果不能在三十秒内向用户证明它的价值那它在轻量工具里就是负资产。1.2 技术选型Canvas、SVG 还是混合这一块我前后换了两次方案值得单独说说。几何绘图的核心图形无非点、线、圆、弧、多边形、文本数量级通常在几十到几百偶尔上千。这个规模其实很尴尬量不大Canvas 的性能优势用不上但图形需要频繁重绘交互反馈SVG 的 DOM 开销又会拖慢拖拽手感。方案优点短板适用判断纯 SVG矢量清晰、元素可选中、导出方便、调试直观图元上千后拖拽掉帧动态样式切换成本高图元长期在 500 以内且交互简单纯 Canvas 2D拖拽流畅、统一绘制、可控性极强命中检测要自己算、文本排版麻烦、导出需额外处理交互频繁、需要精细控制渲染Canvas 主渲染 Canvas 命中渲染与交互解耦视觉反馈可自由控制全部逻辑需自写轻量几何工具的最优解最后我选了第三种。理由很实在几何绘图里拖拽是最核心的操作一次拖动期间可能要重绘上百帧DOM 方案在这个环节的手感差距是肉眼可见的。而 SVG 的两个主要优势——矢量导出和元素可选中——前者我可以用单独一条导出路径解决后者用命中检测完全可以替代。换句话说,Canvas 的短板有替代方案SVG 的短板没有。具体搭起来就是两个画布层叠底层是静态图层放已经确认的图元顶层是交互图层放正在拖拽的对象、吸附提示、辅助高亮。拖动时只重绘顶层底层保持不动。这个结构后面在性能优化那一节还会展开。1.3 一份最小可用的功能表功能清单我是按“新手第一次打开会不会立刻用上”来排序的而不是按实现难度。最后落地的核心功能有这些点、线段、直线、圆、圆弧、多边形的绘制点与线段的拖动整体图形框选移动数值精确输入选中图元后直接在侧栏改坐标和半径吸附端点吸附、中点吸附、交点吸附、水平垂直吸附角度标注与长度标注自动跟随线段变化撤销重做、画布缩放平移、网格开关导出 PNG可指定倍率与 SVG判断一个功能要不要进第一版的土办法是拿它去做一道初中几何题如果整个过程中你不止一次想找某个功能那它就该有如果只是偶尔冒出来的念头那就先记下等第二版。2. 坐标系与数据模型整个工具的骨架界面上看起来只是“鼠标点哪里就画哪里”但背后至少有三层坐标在互相转换。这一层如果设计得不干净后面所有功能都会跟着别扭比如拖动时位置漂移、缩放后吸附失灵、导出图片比例不对根源基本都在这里。2.1 屏幕坐标、世界坐标与一次换算三层坐标分别是设备像素坐标事件对象里的坐标、CSS 像素坐标视口内位置、世界坐标图形自身的数学坐标。其中第三层最关键因为几何图形必须存在一个与设备无关的空间里否则换个屏幕、缩放下画布所有数据就全乱了。我定义的世界坐标系很朴素原点在画布中心Y 轴向上为正单位是“逻辑像素”缩放为 1 时与 CSS 像素一一对应。换算只有两个函数但要处理 Y 轴翻转和高清屏倍率// view: { scale, tx, ty, dpr } function screenToWorld(clientX, clientY, rect, view) { const cssX clientX - rect.left; const cssY clientY - rect.top; return { x: (cssX - view.tx) / view.scale, y: -(cssY - view.ty) / view.scale // Y 轴翻转 }; } function worldToScreen(wx, wy, view) { return { x: wx * view.scale view.tx, y: -wy * view.scale view.ty }; }这里有个细节值得强调rect必须用getBoundingClientRect()实时取不能缓存。页面一旦有滚动、布局变化、软键盘弹出缓存的 rect 立刻过期表现出来就是“点击位置整体偏移了一段”。我在开发早期就吃过这个亏排查了半天以为是 DPR 算错结果是 rect 缓存问题。2.2 图形对象怎么存数据模型的目标只有一个任何一个图元都能被完整序列化成 JSON也能被完整还原。这让撤销、存储、导出三件事共用一套结构。// 统一的图元结构示例 { id: seg_12, type: segment, // point | segment | line | circle | arc | polygon points: [{x:0,y:0},{x:120,y:0}], // 世界坐标 style: { stroke:#1f6feb, width:2, dash:null }, visible: true, locked: false, meta: { label:AB } }圆和圆弧不存圆心半径以外的冗余信息圆弧额外存起止角和方向。多边形存顶点数组闭合标志单独一个字段。这样设计的好处是遍历绘制的时候不需要 switch 到很深的层级也不用为每种类型单独写序列化。所有图元的坐标一律存世界坐标绝不存屏幕坐标。这条规矩在项目里我写成了硬约束因为只要有一个地方偷偷存了屏幕坐标缩放后它就一定画错位置而且极难定位。2.3 高清屏与线条模糊的关系刚做完的时候我导出图片一看所有线都是灰蒙蒙的像隔了层雾。原因很直接CSS 尺寸 800×600 的画布在 2 倍屏上被拉伸到 1600×1200 物理像素浏览器做了插值线条自然糊。正确做法是把画布的canvas.width/height按 DPR 放大再用ctx.scale(dpr, dpr)把绘制上下文拉回 CSS 尺寸function resizeCanvas(canvas, ctx, cssW, cssH) { const dpr window.devicePixelRatio || 1; canvas.width Math.round(cssW * dpr); canvas.height Math.round(cssH * dpr); canvas.style.width cssW px; canvas.style.height cssH px; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }还有一层更隐蔽的问题奇数宽度的线。在 1 像素线宽、未做半像素偏移的情况下线会骑在两个物理像素之间结果是被渲染成两条半透明的浅线看起来就是“发虚”。解决办法是把坐标对齐到0.5的偏移上或者干脆用偶数线宽。我最后的策略是线宽统一取偶数2px、4px并且在缩放变化时把变换矩阵的平移分量取整视觉上最稳。3. 交互层让“画得准”变成默认体验新手觉得一个绘图工具好用还是难用八成取决于“我是不是一不小心就画歪了”。专业用户可以靠精确输入但新手只有鼠标。所以交互层的核心任务不是提供更多操作而是让错误操作变得难以发生。3.1 命中检测的三个层次点选是最高频的操作命中判定写不好用户会觉得“怎么点都点不中”。我分了三个层次按优先级依次尝试第一层是控制点命中。所有图元的端点和中点都对外暴露成一个隐形的圆半径是屏幕上的 8 像素换算到世界坐标就是8 / scale。这一层优先级最高因为它直接对应“我想拖动这个端点”。第二层是图形本体命中。线段用点到线段的距离公式圆用|dist(center, p) - r|多边形对每条边分别算。阈值同样是屏幕像素换算过来的取 6 像素。第三层是包围盒命中只用于框选和快速判断不用于精确点选。function distToSegment(p, a, b) { const dx b.x - a.x, dy b.y - a.y; const lenSq dx*dx dy*dy; if (lenSq 0) return Math.hypot(p.x-a.x, p.y-a.y); let t ((p.x-a.x)*dx (p.y-a.y)*dy) / lenSq; t Math.max(0, Math.min(1, t)); return Math.hypot(p.x - (a.x t*dx), p.y - (a.y t*dy)); }关键所有阈值都必须写成像素 / scale绝不能在世界坐标里写死一个数字。否则用户放大到 8 倍时判定范围会大到相邻图形全部重叠。3.2 吸附与约束的阈值设计吸附是我认为最值钱的一个功能。有了它新手画出来的图“看起来就是对的”甚至不需要理解什么是垂直。我做了四类吸附全部在拖动过程中实时计算吸附类型触发条件视觉反馈端点吸附距最近端点 12px端点处显示实心小方块中点吸附距最近中点 10px显示空心小方块水平/垂直与起点夹角 4 度显示水平或垂直虚线提示网格吸附开启网格时距最近格点 8px格点高亮实现上就是先把鼠标世界坐标附近的候选点全收集起来按“距离 / 优先级权重”排序取最优的一个替换掉原始坐标。优先级我设成端点 中点 交点 网格 水平垂直。理由是前两类是“确定存在的几何对象”用户主观上更希望贴上去。这里有个容易忽略的体验细节吸附要有“逃逸”能力。如果用户已经把点拖到某个吸附点上但想再往外挪一点此时如果继续强行吸附就会产生“粘住”的感觉。我的处理是判断鼠标移动速度或者位移方向一旦离开吸附点超过阈值的 1.5 倍立刻释放。这个 1.5 倍系数是试出来的1.2 太黏2.0 又太松。3.3 撤销重做用快照而不是命令命令模式在理论上更优雅每一步记录一个反向操作。但几何绘图的编辑操作类型多、参数杂写反向操作的成本高还容易漏。我直接用了全量快照每次操作结束注意是操作结束不是每帧把整个图元数组structuredClone一份压进历史栈。代价是内存。一百个图元的结构大概几十 KB限制历史 50 步最多几 MB现代浏览器完全无压力。而拖拽这种连续操作,只在pointerup时记录一次所以不会出现“拖一次产生两百条历史”的问题。const history { stack: [], index: -1, limit: 50 }; function commit(elements) { history.stack history.stack.slice(0, history.index 1); history.stack.push(structuredClone(elements)); if (history.stack.length history.limit) history.stack.shift(); history.index history.stack.length - 1; }一个小提醒别用JSON.parse(JSON.stringify())做深拷贝。图元对象里如果有undefined、Infinity或者函数会直接丢失或报错虽然当前结构里没有但后续加功能很容易踩上。structuredClone是原生支持省事又安全。3.4 鼠标、触屏、手写笔一套事件这是移动端适配里最容易偷懒的地方。很多人写mousedown/mousemove然后在平板上发现完全不能画。正确姿势是统一用 Pointer Events它把鼠标、触摸、手写笔都归一化成一套接口。canvas.addEventListener(pointerdown, onDown); canvas.addEventListener(pointermove, onMove); canvas.addEventListener(pointerup, onUp); canvas.addEventListener(pointercancel, onUp);三个必须注意的点一是pointerdown里要调setPointerCapture这样手指滑出画布也能继续接收到事件否则拖到边缘就断了二是要判断event.pointerType触摸和手写笔的判定阈值应该比鼠标大一倍手指的精度天然低于鼠标三是 CSS 里必须加touch-action: none不然浏览器会把拖拽识别成页面滚动画到一半页面跑了。4. 渲染、导出与性能实测渲染这一块我一开始写得特别朴素任何变化就clearRect然后全量重绘。在几十个图元的时候毫无问题图元上百之后拖拽开始有轻微滞后。优化的过程其实也是理解 Canvas 渲染特性的过程。4.1 单帧重绘与分层策略前文提到我用了两层画布。具体分工是底层画布所有已确认图元、网格、背景。只在图元增删改、视口变换时重绘。顶层画布拖拽中的图元、吸附提示、框选框、鼠标位置辅助线。每帧都可以重绘。这样拖动一个点时底层完全不动顶层只画几个元素帧率立刻稳定。实测在一台普通笔记本上三百个图元的静态场景加拖拽帧时间从 14ms 降到 3ms 左右。如果不想搞两层还有个更简单的替代方案脏标记。给每个图元记一个dirty标志重绘时只清空并重绘脏图元所在的包围盒区域。缺点是包围盒重叠时要合并逻辑容易复杂我最后没选这条路。另外requestAnimationFrame里重绘前一定要做个合并多个事件在一帧内触发多次重绘请求时只执行最后一次。let rafId null; function requestRender() { if (rafId) return; rafId requestAnimationFrame(() { rafId null; drawInteractionLayer(); }); }4.2 导出高清位图与矢量文件导出 PNG 是刚需而且用户经常要贴到文档里放大看所以必须支持倍率。实现方式是用一个离屏 Canvas 按目标倍率重新绘制一遍注意这里要重新设置变换不能直接复用屏幕的变换矩阵。function exportPNG(elements, w, h, ratio 2) { const cv document.createElement(canvas); cv.width w * ratio; cv.height h * ratio; const ctx cv.getContext(2d); ctx.scale(ratio, ratio); // 背景填充为白色避免透明背景贴进文档后变黑 ctx.fillStyle #ffffff; ctx.fillRect(0, 0, w, h); renderAll(ctx, elements, /* view */ { scale:1, tx:w/2, ty:h/2 }); return cv.toDataURL(image/png); }有个坑必须说导出前一定要铺白底。Canvas 默认透明用户导出后贴到深色背景的文档或者 PPT 里线条看着还行但深色的填充区域全变成黑块非常难看。这一个 fillRect 解决掉的问题比任何优化都值钱。SVG 导出是另一条路径思路很简单遍历图元拼字符串。点变circle线段变line圆变circle多边形变polygon文本变text。要注意的是 SVG 的 Y 轴方向是向下的和我的世界坐标相反所以拼接时统一取负。4.3 几百个图元下的性能表现我做了一轮粗略测试环境是一台四年前的轻薄本Chrome画布 1200×8002 倍屏。场景是随机分布的点、线段和圆带网格。图元数量全量重绘帧时间分层后拖拽帧时间主观感受502.1ms1.2ms完全流畅2006.8ms1.6ms完全流畅50015.4ms2.3ms全量重绘开始有感知分层无感100033ms3.1ms全量重绘明显卡顿分层仍然稳结论很清楚几何绘图这种场景瓶颈永远在静态重绘不在单次绘制。所以与其去优化单条线的绘制函数不如想办法减少重绘次数。这个判断在很多图形类项目里都成立别一上来就琢磨 WebGL。5. 常见问题排查实录这部分是我调试期间真实记录的问题清单基本覆盖了同类工具开发时八成会遇到的坑。5.1 点击位置总是偏一点这是最高频的问题症状是画出的点永远在鼠标右下角或者其他固定方向偏一段。我总结了三个最常见的成因按出现频率排第一个Canvas 的 CSS 尺寸与实际尺寸不一致。canvas.width设成了1600CSS 宽度却是800px你按 CSS 坐标去画实际落点是缩小了一半后又放大的结果。判断方法很简单把canvas.width / clientWidth打出来正常应该等于 DPR。第二个事件坐标用了offsetX/offsetY又叠加了一次 rect。offsetX已经是相对目标元素的坐标了再减去rect.left就多减了一次。二选一别混用。第三个变换矩阵被重复应用。比如ctx.scale(dpr, dpr)在 resize 里调了好几次每次都是相对上一次的缩放累积起来就飞了。所以 resize 里必须用setTransform而不是scale前者是覆盖。5.2 线条发虚、锯齿与半像素前面提过 DPR 的解决思路这里补两个具体场景。场景一矢量线在斜向上出现明显阶梯。这是抗锯齿关闭导致的。Canvas 2D 默认开启抗锯齿但如果手动设置了ctx.imageSmoothingEnabled false会同时影响线条。检查一下有没有全局关掉平滑。场景二水平线和垂直线比斜线明显更淡。这就是半像素问题。对于 1px 线宽理想落点应该在像素中心也就是.5的位置对于 2px 线宽应该落在整数像素上。我干脆统一用 2px 起步的线宽省去所有对齐处理的麻烦视觉上反而更清晰。5.3 高频问题速查表现象大概率原因处理方式拖拽到画布外就断开未设置 pointer capturepointerdown里调setPointerCapture平板上拖拽变页面滚动缺touch-action: noneCSS 加上注意要在画布元素上缩放后吸附范围变大阈值写死在世界坐标改为像素 / scale撤销后视图跳回初始态快照里包含了视口参数视图状态与世界状态分开存导出的图上下颠倒SVG 坐标系 Y 轴向下拼接时取负值连续点击误触发双击缩放移动端默认行为未禁touch-action 手动判断间隔文本标注位置抖动文本基线计算依赖字体加载用document.fonts.ready后重绘内存持续上涨历史栈无上限或闭包持有引用限制步数 及时置空6. 一些不想写进文档的心得6.1 快捷键越少越好用我一开始设计了十几个快捷键结果自己都记不住还得在界面上挂个帮助面板。后来砍到六个撤销、重做、删除、复制、切换网格、切换吸附。砍完之后新手教学从“给你发一张快捷键表”变成“你记住这四个就行”。规律是快捷键的价值是减少鼠标移动次数而不是覆盖所有功能。超过八个用户的学习成本就会超过收益。6.2 默认值决定第一印象新手打开工具的前十秒会经历一次“这工具到底能不能用”的判断。这个判断几乎完全由默认状态决定。我做了几个细节调整默认开启网格和吸附让第一笔画出来就是整齐的默认线宽 2px、颜色用足够深的蓝在白色背景上和投影仪上都看得清默认视图缩放到“画布能放下一个 400×300 的作图区域”不让人一打开就面对空白侧栏默认收起选中图元才展开数值编辑这几条改完之后我让几个完全没用过的朋友试画一个带标注的三角形平均用时从四分钟降到一分半。没有任何功能上的改进纯粹是默认值的变化。6.3 后续还能怎么扩展这套结构目前是够用的但我留了几个扩展点。一是图元类型可以继续加只要实现draw和hitTest两个方法就能接进去二是吸附规则是独立模块加“平行吸附”或者“等长吸附”不用动主逻辑三是导出部分可以再接一个 PDF 路径做法是把 SVG 字符串塞进一个打印样式页面,调起浏览器打印另存。需要注意的是每加一个功能都要回头问自己一遍它会不会让“五分钟上手”变成“十五分钟上手”如果会那它就该藏在二级菜单里或者干脆不做。关于这个工具我自己用得最多的场景其实是临时讲解一道几何题的时候。旁边有人问“这个角是不是直角”我打开浏览器画两条线开一下垂直吸附和角度标注一眼就清楚了全程不到三十秒。这种“随手就能用”的顺手感是当初折腾坐标系和吸附阈值折腾到半夜换来的也是最值得的地方。
