布局線框圖
最近對之前的可視化布局頁面進行了優(yōu)化：
1.對畫布編輯條件下硬毕，增加邊欄，方便用戶對拖出畫布部分的內(nèi)容進行查看礼仗。
2.優(yōu)化了標尺的計算邏輯吐咳。
需求：給畫布元素增加整體邊欄
- 布局效果：
畫布層+視窗層兩層結(jié)構(gòu)。
當畫布層的寬高超過視窗層會出現(xiàn)滾動條元践。
滾動條滾動時標尺位置更新韭脊。
方案一：給畫布模塊增加margin。
問題：margin-right 在子元素能放進父元素的情況下會不生效
解決：
- 方法一：
- 需要將子元素div更新為
absolute才生效卢厂。position: absolute; - 但是
div會有一定概率脫離文檔流乾蓬，同時scale的時候有問題。
- 方法二：
- 使用
white-space： nowrap; display: inline-block; - 保證
margin\paddingright顯示慎恒。
方案二：增加中間層任内，形成畫布層+中間層+視窗層三層結(jié)構(gòu)，使用flex融柬，使真實畫布居中死嗦。（采用方法二）
基礎(chǔ)效果——全量填充
需求——加個邊欄
- 標尺實現(xiàn)：
使用cssbackground漸變，實現(xiàn)標尺效果
水平方向：
<ul
className={styles.horizontal}
style={{paddingLeft: ruler_offset_left}}
>
{x_offset.map((x) => {
return (
<li key={x}>
<span className={styles.ruler_value}>
{value}
</span>
</li>
);
})}
</ul>
.horizontal {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 0px 0px 0px 15px;
height: 15px;
cursor: col-resize;
background-size: 5px 3px !important;
background: linear-gradient(to right, #2c2c32 1px, transparent 1px) repeat-x;
user-select: none;
}
.horizontal > li {
padding: 0px;
list-style-type: none;
width: 51px;
height: 5px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 51px;
margin: 2px 49px 0 0px;
border-left: 1px solid #2c2c32;
}
.horizontal > li::before {
width: 1px;
height: 4px;
top: 0;
left: 0;
content: '';
box-sizing: border-box;
float: right;
background: #2c2c32;
}
.horizontal .ruler_value {
font-size: 12px;
float: left;
transform: translate(3px, -2px) scale(0.8);
}
垂直方向：
<ul
className={styles.vertical}
style={{paddingTop: ruler_offset_top}}
>
{y_offset.map((y) => {
return (
<li key={y}>
<span className={styles.ruler_value}>
{value}
</span>
</li>
);
})}
</ul>
.vertical {
margin: 0;
padding: 0;
cursor: row-resize;
width: 15px;
background-size: 3px 5px !important;
background: linear-gradient(to bottom, #2c2c32 1px, transparent 1px)
repeat-y;
user-select: none;
}
.vertical > li {
list-style-type: none;
padding-left: 6px;
width: 6px;
height: 51px;
list-style-type: none;
margin-bottom: 49px;
border-top: 1px solid #2c2c32;
border-bottom: 1px solid #2c2c32;
}
.vertical .ruler_value {
font-size: 12px;
transform: rotate(90deg) translate(-3px, -2px) scale(0.8);
display: block;
}
舊版
新版
