最近對(duì)之前的可視化布局頁面進(jìn)行了優(yōu)化：
1.對(duì)畫布編輯條件下空猜，增加邊欄，方便用戶對(duì)拖出畫布部分的內(nèi)容進(jìn)行查看。
2.優(yōu)化了標(biāo)尺的計(jì)算邏輯辈毯。
需求：標(biāo)尺計(jì)算邏輯
舊版本標(biāo)尺開發(fā)時(shí)，定位為：position: absolute;搜贤，標(biāo)尺是全量實(shí)際長度谆沃。
是使用transform: translate(var(--rRulerOffsetLeft)); 通過css移動(dòng)標(biāo)尺實(shí)現(xiàn)關(guān)聯(lián)移動(dòng)。
更新后標(biāo)尺使用flex布局仪芒。標(biāo)尺長度為可視區(qū)域長度唁影。
解決：
-
方法一：
對(duì)flex標(biāo)尺使用div包一層，flex對(duì)div整體生效
對(duì)包裹層position: relative, 標(biāo)尺增加position: absolute;(對(duì)absolute的元素掂名，父元素一定要為relative才生效)
image.png -
方法二：
flex布局后位置不變据沈，對(duì)使用padding-top，padding-left對(duì)顯示數(shù)字和坐標(biāo)進(jìn)行位移饺蔑。
image.png
計(jì)算邏輯：
計(jì)算水平锌介、豎直0點(diǎn)坐標(biāo)偏移量：
水平偏移量 = （中間層畫布寬度 - 實(shí)際畫布寬度 * 縮放比例）/ 2 - 水平滾動(dòng)條數(shù)值
垂直偏移量 = （中間層畫布高度 - 實(shí)際畫布高度 * 縮放比例）/ 2 - 垂直滾動(dòng)條數(shù)值
尺子0點(diǎn)比例計(jì)算：
前側(cè)長度 = 0點(diǎn)坐標(biāo)偏移量 / 100 + 非整數(shù)倍粒度偏移
后側(cè)長度 = 中間層畫布長度 / 100
非整數(shù)倍粒度偏移 = padding位移值
問題：因?yàn)闃?biāo)尺的0點(diǎn)和畫布的0點(diǎn)為不同坐標(biāo)，在計(jì)算完成后會(huì)出現(xiàn)標(biāo)尺和畫布0點(diǎn)坐標(biāo)偏差的情況猾警。
尺子非整數(shù)粒度計(jì)算（需要為5刻度的倍數(shù)）
通過margin更新整個(gè)尺子的位置孔祸，抵消掉為了映射刻度5，多帶來的padding偏移量发皿。
