可视化拖拽画布布局、标尺(1)

布局线框图

最近对之前的可视化布局页面进行了优化：
1.对画布编辑条件下，增加边栏，方便用户对拖出画布部分的内容进行查看。
2.优化了标尺的计算逻辑。

需求：给画布元素增加整体边栏

1. 布局效果：
   画布层+视窗层两层结构。
   当画布层的宽高超过视窗层会出现滚动条。
   滚动条滚动时标尺位置更新。

方案一：给画布模块增加margin。
问题：margin-right 在子元素能放进父元素的情况下会不生效
解决：

1. 方法一：

• 需要将子元素div更新为absolute才生效。position: absolute;
• 但是div会有一定概率脱离文档流，同时scale的时候有问题。

2. 方法二：

• 使用white-space： nowrap; display: inline-block;
• 保证margin\ padding right显示。

方案二：增加中间层，形成画布层+中间层+视窗层三层结构，使用flex，使真实画布居中。（采用方法二）

基础效果——全量填充
需求——加个边栏

2. 标尺实现：
   使用css background渐变，实现标尺效果

水平方向：

           <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;
}

旧版 新版