可视化拖拽画布布局、标尺(2)
2021-03-26 本文已影响0人
大乔是个美少女
最近对之前的可视化布局页面进行了优化：
1.对画布编辑条件下，增加边栏，方便用户对拖出画布部分的内容进行查看。
2.优化了标尺的计算逻辑。
需求：标尺计算逻辑
旧版本标尺开发时，定位为：position: absolute;，标尺是全量实际长度。
是使用transform: translate(var(--rRulerOffsetLeft)); 通过css移动标尺实现关联移动。
image.png
更新后标尺使用flex布局。标尺长度为可视区域长度。
image.png
解决：
-
方法一：
对flex标尺使用div包一层，flex对div整体生效
对包裹层position: relative, 标尺增加position: absolute;(对absolute的元素，父元素一定要为relative才生效)
image.png
-
方法二：
flex布局后位置不变，对使用padding-top，padding-left对显示数字和坐标进行位移。
image.png
计算逻辑：
标尺逻辑
计算水平、竖直0点坐标偏移量：
水平偏移量 = （中间层画布宽度 - 实际画布宽度 * 缩放比例）/ 2 - 水平滚动条数值
垂直偏移量 = （中间层画布高度 - 实际画布高度 * 缩放比例）/ 2 - 垂直滚动条数值
尺子0点比例计算：
前侧长度 = 0点坐标偏移量 / 100 + 非整数倍粒度偏移
后侧长度 = 中间层画布长度 / 100
非整数倍粒度偏移 = padding位移值
问题：因为标尺的0点和画布的0点为不同坐标，在计算完成后会出现标尺和画布0点坐标偏差的情况。
尺子非整数粒度计算（需要为5刻度的倍数）
通过margin更新整个尺子的位置，抵消掉为了映射刻度5，多带来的padding偏移量。
基准0点坐标校准
