刚做完一个 HarmonyOS 上的 Canvas 量角器组件从数学推导到交互打磨踩了不少坑也积累了不少可复用的经验。这个需求看起来简单——不就是画个半圆再标上刻度吗真做起来才发现里面涉及坐标系换算、极坐标定位、触摸事件映射、高频重绘优化等一系列问题。这篇文章把我从零到一实现量角器的完整思路拆开来讲包括数学原理、Canvas 绘制方案、交互设计取舍、性能优化和实测中遇到的坑希望对正在做类似绘图工具或自定义组件的同学有帮助。1. 项目拆解量角器不是画半圆那么简单1.1 需求背后隐藏的核心能力量角器这个工具表面上是画一个半圆标上 0 到 180 度的刻度但往深了想它其实是一个可交互的测量控件。用户在屏幕上的任何位置触摸系统都要判断这个点对应的是多少度并且通过指针和刻度反馈出来。这意味着两件事第一绘制要精确刻度必须均匀分布指针必须准确指向触摸点的角度第二交互要直觉用户手指滑动指针要跟着走不能有延迟和跳动。从开发角度拆解这个项目涉及的知识点包括Canvas 的坐标系、变换矩阵和绘制 API弧度与角度的数学转换及三角函数应用触摸事件的坐标获取与相对坐标转换脏矩形重绘策略与帧率优化自定义组件的生命周期管理和属性通知我是在 HarmonyOS 的 ArkUI 框架下用 Canvas 组件实现的但底层数学逻辑和绘制思路在任何平台的 Canvas 实现上都是通用的所以即便你不是 HarmonyOS 开发这篇文章的实现思路也完全可以借鉴。1.2 最终效果定义开始写代码前我把量角器的行为标准定义成三条画布中心下方有一个半圆弧弧上分布 0 到 180 度的刻度线主刻度10 度一格比次刻度2 度或 1 度一格更长更粗用户触摸或拖动时从圆心指向触摸点的射线实时绘制在画布上与弧线交点的角度值清晰显示角度的精度按实际需求动态调整比如教学场景需要精确到 1 度工程绘图需要能吸附到 5 度的整数倍这三条定义好了后续的代码结构、数学计算和交互优化都是围绕它们展开的。2. 数学根基弧度和角度互转以及刻度点的定位公式2.1 弧度制Canvas API 的默认语言Canvas 的 arc 方法、三角函数等 API 全部采用弧度制这跟日常使用的角度制0 到 360不同。量角器场景里用户看到的是角度计算时用的是弧度所以第一步要建立一个可靠的双向转换机制。// 角度转弧度 function degreesToRadians(degrees: number): number { return degrees * Math.PI / 180; } // 弧度转角度 function radiansToDegrees(radians: number): number { return radians * 180 / Math.PI; }这个转换本身不复杂但有个坑要注意角度的边界值。量角器是半圆结构角度范围是 0 到 180 度但触摸点可能落在任意位置包括第四象限。如果直接把反正切的结果拿来用会出现负角度或超过 180 度的值这类边界情况一定要提前规划好规范化逻辑。2.2 极坐标到直角坐标刻度点的核心公式量角器的刻度线均匀分布在半圆弧上。已知圆心坐标、半径和角度如何计算弧上某个点比如 30 度处的坐标这就用到极坐标转换公式x cx r * cos(angle) y cy r * sin(angle)注意这里的 angle 是弧度。以屏幕坐标系为例y 轴向下为正角度 0 度时 cos(0) 1sin(0) 0所以点落在圆心正右方。角度增大时点沿顺时针方向移动正好符合屏幕上量角器的视觉习惯。2.3 量角器的角度反向设计但量角器的标准画法不是从水平方向开始往右转而是半圆居中左侧是 0 度右侧是 180 度——跟我们平时用的塑料量角器一样左边起始、右边终止。这跟数学里的坐标系方向是相反的所以我把角度定义做了一次映射// 量角器展示角度 → 计算用弧度 function displayAngleToRadians(displayAngle: number): number { // 显示角度从左边 0 度开始转为数学角度从右边 0 度开始 // 数学角度 180 - 显示角度 return degreesToRadians(180 - displayAngle); } // 计算用弧度 → 量角器展示角度 function radiansToDisplayAngle(radians: number): number { let degrees radiansToDegrees(radians); degrees (degrees 360) % 360; // 归一到 0-360 return 180 - degrees; }这里有个小细节我是反复调试才确定的用atan2求触摸点的角度时返回值在 -π 到 π 之间直接换算成显示角度会出现负数。必须先把角度归一化到 0~360再做量角器映射否则 170 度到 180 度之间会出现严重的跳变。3. Canvas 绘制实现刻度盘、指针与高亮弧线3.1 画布初始化与坐标系准备在 ArkUI 中Canvas 组件需要在 onReady 回调里获取绘图上下文同时拿到实际的画布宽高。这里有个大多数人不注意的点Canvas 的宽高单位和像素密度不是一回事。默认情况下绘制坐标用的是 vp虚拟像素如果直接用this.canvasWidth / 2作为圆心 x 坐标在不同屏幕上显示会有偏差。建议通过context.width和context.height获取实际像素尺寸按比例处理。我实现量角器时的初始化代码如下伪代码但核心逻辑一致Entry Component struct ProtractorPage { private settings: RenderingContextSettings new RenderingContextSettings(true); private context: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); private canvasWidth: number 720; private canvasHeight: number 720; private centerX: number 360; private centerY: number 400; private radius: number 280; private currentAngle: number 90; // 默认显示 90 度 build() { Column() { Canvas(this.context) .width(100%) .height(720) .onReady(() { this.initCanvas(); this.drawFull(); }) .onTouch((event: TouchEvent) { this.handleTouch(event); }) } } initCanvas() { // 获取实际画布信息按比例放大半径 const width this.context.width; const height this.context.height; if (width 0 height 0) { this.centerX width / 2; this.centerY height * 0.6; this.radius Math.min(width / 2, height * 0.4) - 20; } } }3.2 半圆弧与刻度线绘制量角器的弧线是 180 度半圆使用context.arc()绘制。关键在于确定起始角和结束角让弧线朝上开口。以圆心右侧为 0 度半圆应该从 π 画到 0或者从 180 度到 0 度顺时针这样弧线在上方。但量角器的显示习惯是左边 0 度、右边 180 度所以弧线绘制也要配合角度映射。刻度线的绘制逻辑是逐条计算先确定每个刻度对应的显示角度再通过显示角度算出坐标点然后从外半径向内半径画一条线。主刻度和次刻度的区别体现在线长和线宽上。drawScale() { // 绘制次刻度每 2 度一条 for (let angle 0; angle 180; angle 2) { this.drawScaleLine(angle, angle % 10 0 ? 18 : 10, angle % 10 0 ? 3 : 1); } } drawScaleLine(displayAngle: number, lineLength: number, lineWidth: number) { const rad displayAngleToRadians(displayAngle); const outerX this.centerX (this.radius) * Math.cos(rad); const outerY this.centerY - (this.radius) * Math.sin(rad); const innerX this.centerX (this.radius - lineLength) * Math.cos(rad); const innerY this.centerY - (this.radius - lineLength) * Math.sin(rad); this.context.beginPath(); this.context.moveTo(innerX, innerY); this.context.lineTo(outerX, outerY); this.context.strokeStyle #333333; this.context.lineWidth lineWidth; this.context.stroke(); }这里有一个值得注意的符号问题我用了centerY - radius * sin(rad)。因为屏幕 y 轴向下为正如果直接用加法弧线会在下方与量角器习惯相反。这里负号的使用是为了让半圆朝上开口。3.3 数值文字与永久刻度标签主刻度10 的倍数需要在旁边标注数字。文字绘制的关键是位置不重叠尤其是 0 度和 180 度这两个端点稍微偏移不够就贴到屏幕边缘。我的策略是根据角度动态调整 textAlign 和 textBaseline左侧 0 度附近右对齐文字放在刻度线左侧右侧 180 度附近左对齐文字放在刻度线右侧中间 90 度附近居中对齐文字放在刻度线下方drawLabel(displayAngle: number, text: string) { const rad displayAngleToRadians(displayAngle); const labelRadius this.radius - 32; // 文字放在刻度稍内侧 const x this.centerX labelRadius * Math.cos(rad); const y this.centerY - labelRadius * Math.sin(rad) 6; // 微调文字基线 if (displayAngle 0) { this.context.textAlign right; } else if (displayAngle 180) { this.context.textAlign left; } else { this.context.textAlign center; } this.context.textBaseline middle; this.context.font 16vp sans-serif; this.context.fillStyle #666666; this.context.fillText(text, x, y); }3.4 实时指针与角度高亮指针是交互反馈的核心。用户触摸到某个位置后从圆心到触摸点画一条射线代表当前测量的角度。为了增强可视化我把触摸点所在弧段到当前角度位置的弧线高亮显示用另一种颜色描边。这部分最需要注意的是绘制顺序。如果先画高亮弧线再画刻度高亮颜色会覆盖刻度线反过来则高亮看不清。我的做法是先画圆弧背景层再画刻度层最后画指针层三层分离。4. 交互优化触摸到角度的精确映射与反馈细节4.1 触摸点坐标转换为局部坐标Canvas 组件的 onTouch 回调返回的是相对画布左上角的坐标而量角器计算需要的是相对于圆心的坐标。这个转换很简单但一定要在 Canvas 尺寸变化后同步更新否则圆心的位置坐标是旧的触摸就会产生系统性偏移。handleTouch(event: TouchEvent) { const touch event.touches[0]; if (!touch) return; // 相对圆心坐标 const deltaX touch.x - this.centerX; const deltaY touch.y - this.centerY; // 计算角度 let radians Math.atan2(deltaY, deltaX); let degrees radiansToDegrees(radians); degrees (degrees 360) % 360; // 转为量角器显示角度 let displayAngle 180 - degrees; if (displayAngle 0) displayAngle 360; if (displayAngle 180) displayAngle 180; // 半圆限制 this.currentAngle Math.round(displayAngle); this.drawFull(); }这段逻辑看起来顺理成章但我最初实现时忽略了touch.x和touch.y相对画布坐标系的问题。在 Column/Row 嵌套布局中Canvas 组件不一定从左上角开始TouchEvent 给的坐标是不是画布内坐标需要实测确认。我当时就在一个带 margin 的容器里测试结果触点位置全部偏移排查了半天才发现是容器偏移导致的。4.2 吸附机制让测量结果听话从交互体验的角度说直接精确显示角度是不够的。用户在屏幕上滑动时会发现角度数值每秒变化一个像素对应 0.5 度左右想要准确对准 60 度非常困难。所以实用的量角器都会加吸附机制当触摸点落在某个整数角度附近时直接吸附到整数。我的吸附策略分为两档吸附到 1 度当实际角度与最近整数的差距小于 0.3 度时生效吸附到 5 度当实际角度与最近 5 的倍数的差距小于 1.2 度时生效可配置snapAngle(angle: number): number { // 先吸附到 1 度 const rounded Math.round(angle); if (Math.abs(angle - rounded) 0.3) { return rounded; } // 再尝试吸附到 5 度 const nearest5 Math.round(angle / 5) * 5; if (Math.abs(angle - nearest5) 1.2) { return nearest5; } return Math.round(angle); }吸附之后指针可能会和触摸点之间有微小视觉偏差这是正常现象。实测中这种不够跟手但数字稳定的体验恰恰是量角器这类测量工具需要的。用户要的不是指针分毫不差地跟手而是能稳定读出一个规整的数字。4.3 指针越过 0 度和 180 度的边界处理量角器是半圆用户从 0 度区域滑到 180 度区域时如果直接以触摸点计算角度会出现从 0 到 179 的正常变化但一旦手指跨过水平中轴线的左端角度计算会突然从 0 跳到 180反之亦然。处理方式取决于产品需求。我的方案是允许指针显示在 0 到 180 范围内但触摸点到圆心连线跟实际显示角度一致即可不做连续性校正。因为量角器本质上是把触摸点的几何角度映射到显示角度用户手指在哪个位置就应该显示对应角度跳变是数学上的自然呈现强行做连续变化反而会让角度失真。如果要平滑过渡可以做方向判断记录前一帧的角度变化方向当角度从 170 变到 3 时判断成 173 而不是 3。这适合画角度动画的场景但量角器测量场景反而不需要因为用户需要的是准确的即时值。5. 性能优化高帧率重绘的脏矩形方案5.1 直接整幅重绘的问题最朴素的实现方式是每次 onTouch 回调都调用drawFull()把半圆、刻度、数字、指针全部重画一遍。刻度数量按每 2 度一条计算是 90 条加上 19 个数字标签和 1 条指针弧线单帧绘制指令超过 200 条。在低端设备上触摸拖动时肉眼可见的掉帧——指针移动有拖影感和迟滞感。实际测试数据显示HarmonyOS 低端机整幅重绘耗时约 18ms高端机约 8ms。看起来能跑在 60fps 边缘但触摸事件频率超出显示帧率加上系统其他绘制任务实际体验不够流畅。5.2 分层绘制把静态部分冰冻起来优化思路很直接量角器的半圆、刻度线和数字标签在每次触摸中都是不变的唯一变化的是指针和高亮弧线。既然如此就把静态部分绘制到离屏 Canvasoffscreen canvas每次触摸只重绘动态层。具体做法首次加载时创建离屏 Canvas把弧线、刻度、数字全部画上去触摸回调时先用clearRect清掉主 Canvas 的动态区域再绘制指针弧线主 Canvas 的静态部分用drawImage从离屏 Canvas 快速拷贝// 伪代码示意 private offscreenCanvas: OffscreenCanvas | null null; initOffscreen() { // 创建离屏画布 // 将静态刻度绘制到离屏画布 } drawDynamic() { // 清空主画布中动态区域 this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 绘制静态图层 this.context.drawImage(this.offscreenCanvas, 0, 0); // 绘制指针动态层 this.drawPointer(); this.drawHighlightArc(); }优化后每次触摸回调只剩 3 个绘制操作clearRect drawImage 画指针在同样设备上实测耗时降到 3ms 以内滑动体验有了质的提升。注意HarmonyOS 的 ArkUI Canvas 是否支持 OffscreenCanvas 需要根据版本确认。如果不支持可以退而求其次——把静态部分的绘制代码打成独立函数只调用一次并把结果存在一个后台的普通 Canvas 上。核心思路是一样的减少每帧的绘制指令数量。5.3 节流与合并让触摸频率适配显示帧率触摸事件的回调频率远高于显示帧率有的机型触摸上报率到 120Hz但屏幕只有 60Hz。如果每次触摸都触发绘制中间会有大量无效绘制被合并。一个简单有效的优化是节流记录上次绘制时间只有距离上次绘制超过 16ms 才执行重绘其余触摸仅更新角度值。private lastDrawTime: number 0; handleTouch(event: TouchEvent) { // 更新角度值 const angle this.calculateAngle(event.touches[0]); this.currentAngle this.snapAngle(angle); // 节流距离上次重绘不足 16ms 就跳过绘制 const now Date.now(); if (now - this.lastDrawTime 16) { return; } this.lastDrawTime now; this.drawDynamic(); }注意节流不能做在角度计算之前否则角度更新会丢失输入导致指针跳跃。正确顺序是先无条件更新角度值再按节流策略决定是否立即重绘。这样既保证了最终状态正确又减少了冗余绘制。5.4 抗锯齿与渲染质量平衡给 Canvas 开启抗锯齿最简单的方式是构造 RenderingContextSettings 时传入trueantialias 开启。但抗锯齿也意味着渲染负荷增加。在指针这类需要平滑显示的图形上抗锯齿是必须的但刻度线这种精细密集的元素抗锯齿带来的边缘平滑在屏幕上几乎看不出区别却要消耗不少 GPU 资源。我的取舍策略是全局开启抗锯齿但在绘制刻度线时用奇数线宽1px、3px、5px确保线条正好落在物理像素网格上从根源上减少模糊边缘。这个方法比单纯依赖抗锯齿更有效实测线条清晰度明显提升。6. 实测埋坑记录从像素密度到布局偏移的排查过程6.1 在高分屏下刻度线变模糊第一次在真机测试时我在一台 2K 分辨率的平板上打开量角器发现刻度线边缘发虚数字文字也有轻微锯齿。检查后确认是 vp 和 px 换算问题——Canvas 绘制 API 默认接收 vp 单位但实际渲染时会乘以屏幕密度线条落在物理像素之间时就会模糊。解决方案有两个一是绘制时统一使用px2vp()转换二是在 Canvas 尺寸设置时直接按像素值计算确保所有绘制坐标和半径都是整数。我采用第二种因为整数坐标能保证刻度线与像素网格对齐。6.2 Canvas 的 onReady 时机与尺寸竞态ArkUI 的 Canvas onReady 回调不代表布局已经完成在某些页面转场场景中context.width返回 0 或者初始默认值导致 initCanvas 里计算的圆心和半径全错。我的排查过程是在控制台打印 context.width 和 context.height发现首帧确实是 0但页面稳定后是正确值。稳妥的做法是在 onReady 里加一个延迟初始化或者在组件尺寸回调onAreaChange里二次修正。我当时两种都做了onReady 里初始化一份onAreaChange 里如果发现尺寸变化且圆心半径未同步就强制重新初始化并重绘。6.3 触摸事件中的 touches 数组空指针在快速滑动或手指离开屏幕的瞬间onTouch 回调的event.touches在某些版本上可能为空数组直接访问touches[0]会报 undefined。这个我在开发测试时踩过加了空值保护后稳定。if (!event.touches || event.touches.length 0) { return; }另一个相关问题是event.touches里的坐标在手指移动时不一定每帧都更新。实测中某些场景下需要读取event.changedTouches[0]才能拿到最新位置。我的建议是做个兼容优先读 changedTouches如果为空再读 touches。这跟 Web Canvas 的处理思路一致。6.4 圆形触摸边界与误触量角器组件放在页面里如果用户触摸画布但没点在半圆区域上指针仍会显示并指向一个角度。这在独立组件场景没问题但放在表单页面或带有其他控件的页面里可能会出现误触发。我加入了一个触摸区域判定只有触摸点距离圆心在 0.5 倍半径到 1.3 倍半径范围内才视为有效测量操作否则忽略。这个范围既能防止内部空白区误触也能让用户在半圆外围稍微外扩的区域操作不会感觉必须精准点在弧线上。7. 扩展思考从量角器组件到通用绘图控件的抽象路径7.1 把绘制交互的模式抽成骨架量角器做完后我回头看其实它就是一个典型的自定义绘图控件实现范式包含四个模块固定的静态图形层刻度、背景、边框→ 离屏渲染动态反馈层指针、高亮、数值→ 触摸时重绘数学映射层屏幕坐标 ↔ 业务数据→ 独立成工具函数交互策略层吸附、边界、节流→ 可配置规则如果后续要做类似的角度选择器、罗盘、仪表盘组件这套骨架可以直接复用。尤其是数学映射和交互策略这两层八成代码都不用改换一下绘制逻辑和图形样式就能产出新组件。7.2 几个可以继续迭代的方向量角器基础功能已经稳定但还有几个方向值得完善加一条活动指针支持先测一个角再测另一个角做角度差值计算支持多量角器同时绘制用于几何题的辅助教学结合手势缩放和旋转让量角器可以贴到屏幕任意位置测量输出角度值到剪贴板或配合语音朗读增强无障碍体验我自己最想做的是多指操作——让用户用两个手指分别确定角的顶点和两条边系统直接读出夹角。这比单指触摸测角更符合真实量角器的使用习惯不过涉及多点触摸追踪和角度差计算后续找一个完整的时间再好好推演。8. 写在最后给实际动手实现的人几点建议做这个量角器组件我最大的体会是绘图组件的难点不在绘图在数学和交互的衔接。Canvas API 就那些画圆、画线、写字的调用方式文档里写得很清楚真正让你反复调试的是坐标系转换、角度映射边界、触摸事件的各种意外情况。所以动手前先把数学公式推演清楚把角度边界场景列出来开发效率会高出一大截。从实操层面再分享几个我调完之后觉得特别值得留意的点所有角度计算用弧度只在显示层才转角度不要在计算过程里反复互转否则精度损耗和代码复杂度都会上升刻度绘制时循环步长尽量用整数避免累积浮点误差。比如每 2 度画一条就写angle 2不要每步乘一个因子指针和高亮弧线这种视觉反馈元素用更亮的颜色和更粗的线宽拉开与静态刻度的视觉层级做好角度数值的保底显示——即使没有触摸事件页面加载后也要显示一个默认角度让用户第一眼就知道这个组件能干什么这套实现方案在 HarmonyOS 平板上已经跑了一段时间日常使用中角度读数准确滑动流畅也没有遇到过内存泄漏或离屏画布复用的问题。如果你也在做 Canvas 相关的自定义组件欢迎按这个思路推广开——数学公式、分层绘制、交互节流这套组合拳几乎适用于所有刻度类绘图场景。