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

时间:2021-6-12 作者:qvyue
可视化拖拽画布布局、标尺(1)
布局线框图

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

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

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

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

  1. 方法一:
  • 需要将子元素div更新为absolute才生效。position: absolute;
  • 但是div会有一定概率脱离文档流,同时scale的时候有问题。
  1. 方法二:
  • 使用white-space: nowrap; display: inline-block;
  • 保证margin padding right显示。

方案二:增加中间层,形成画布层+中间层+视窗层三层结构,使用flex,使真实画布居中。(采用方法二)

可视化拖拽画布布局、标尺(1)
基础效果——全量填充

可视化拖拽画布布局、标尺(1)
需求——加个边栏
  1. 标尺实现:
    使用css background渐变,实现标尺效果

水平方向:

           
    {x_offset.map((x) => { return (
  • {value}
  • ); })}
.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);
}

垂直方向:

          
    {y_offset.map((y) => { return (
  • {value}
  • ); })}
.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;
}
可视化拖拽画布布局、标尺(1)
旧版
可视化拖拽画布布局、标尺(1)
新版
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。