S2 icon indicating copy to clipboard operation
S2 copied to clipboard

🤔 是否应该将 Canvas 绘制的内容用一个带边框的 rect 包裹起来呢?

Open zeyongTsai opened this issue 2 years ago • 2 comments

🖋 Description

由于S2 基于 canvas 绘制,那在 DOM 层面上就不能实现流体布局,带来的问题就是:当内容不够多的情况下,canvas画布底下会空白一部分,如果跟随着分页组件的话,两者在视觉上的关系非常薄弱,因此想知道是否应该绘制一个 几乎充满 canvas 的带边框的 rect 把内容装起来呢?

目前我在实际应用中是监听 s2 afterRender 事件,调用 addShape 读取 theme.splitLine 相关色值、粗细来绘制的

另一个方案是开发人员去渲染数据之前先根据得到的数据量调整 DOM 尺寸

😊 Expected Behavior

与画布下发内容形成视觉上的联系

😅 Current Behavior

内容较少时,画布下方空出一片

zeyongTsai avatar Jun 16 '22 10:06 zeyongTsai

带边框感觉太丑了, 且不合理, 如果真的需要边框, 也应该用户自己在 canvas 外部包一个 div, 写一点 css 样式, 成本更小, 而不是用 canvas 去绘制一个边框

建议方案: 当实际渲染高度小于配置高度时, 更新配置为实际高度, 且开放一个配置项, 默认 false

lijinke666 avatar Jun 17 '22 02:06 lijinke666

  1. 如果用外部 div 来画的话,主要是觉得里面的 S2 本身就有边框,然后又画一条,样式不好看(线条不重叠)
  2. 画边框还需要去读取给到 S2 的 theme 配置结果,两边需要同步样式
  3. 先渲染了内容少的,获取实际渲染的高度,更改DOM容器高度;然后再次渲染的时候内容变多了,这个时候就得先把DOM 容器高度重置为最大高度,然后绘制完毕探测实际高度再改变DOM高度,对使用者并不是特别方便呢

zeyongTsai avatar Jun 17 '22 05:06 zeyongTsai

你好 @zeyongTsai,经过我们的反复讨论, 你的需求过于定制化,不适合直接添加到 S2 中, S2 作为开源框架,只会进行通用能力的增强和自定义接口的开放。你可以通过 S2 提供的自定义能力自行实现,感谢你的理解。

Hello, @zeyongTsai, After our repeated discussions, your needs are too customized and not suitable for implementing directly to S2. As an open source framework, S2 will only enhance general capabilities and open custom interfaces. You can implement it yourself through the customization capabilities provided by S2, thank you for your understanding.

github-actions[bot] avatar Mar 14 '23 06:03 github-actions[bot]