,大家好，我是前端西瓜哥。今天我们来实现图形编辑器的标尺功能。,标尺指的是画布上边和左边的两个有刻度的尺子，作用让用户知道他正在编辑的视口所在位置范围。,我们的需求是：间隔特定的长度，绘制一个刻度，并显示这个刻度在 X 轴或 Y 轴上的位置。,先看最终实现效果：,
,标尺功能演示,可以看到，视口移动后，标尺上的刻度能正确地改变。此外缩放画布，标尺的步长会发生改变，保持一个比较适合的密度。,总体实现思路：,步长会根据 zoom 进行设置，目的是让视口中的标尺能绘制适宜密度的刻度。,假设我们的步长固定为 50，不跟随 zoom 改变，在 100% 看起来效果不错：,
,但当你缩小时，会变成下面这样：,,密度过大，导致数字重叠。同样，放大时则过于稀疏，刻度很难才见到一个，没能发挥标尺的效用。,步长怎么计算呢？,理论上步长可以是 50，那么 51 好像也行，3 也行。但更建议使用 5 的倍数、2 的倍数、25 的倍数这些作为步长。,因为没有什么理论参考，所以我还是选择参考市面上的设计工具的步长变化设计。,比如 figma，zoom 落在 [100%, 200%) 的步长为 50，[200%, 500%) 则是 10 等等。,我的实现为：,这里我讲解水平（x 轴）方向的情况。垂直方向同理，就不赘叙了。,首先计算出视口最左侧和最右侧的 x 坐标值。,然后找离它们最近的落在刻度上的值。,对此，我实现了一个 getClosestVal 方法。,得到起点和终点，我们可以开始循环了，从 startXInScene 开始，每次循环加一个 step，直至达到末尾为止。,垂直方向的标尺同理，只是稍微特殊的是刻度值文字需要多做一个 -90 度的旋转。,绘制顺序需要注意一下，先后顺序为：,标尺实现大致如此，并不复杂。
文章版权声明
1 原创文章作者：cmcc，如若转载，请注明出处： https://www.52hwl.com/19513.html
2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈
3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)
4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别
微信扫一扫 
支付宝扫一扫 