【17.1.7】我希望给整个画布绘制一些分割线如何实现

Wilson.Zhang

我希望给整个画布绘制一些分割线如何实现 1731319383610.png703435058.png

Wilson.Zhang · Wilson.Zhang

祁画发表于 2024-11-12 14:31
但是如果使用style设置分割线，我再去设置边框，分割线就消失了，而且导出的时候我希望边框样式可以导出。

那就不使用单元格边框为分割线了，使用浮动元素或形状线条设置边框线吧，这些元素不会取代单元格的Style，在导出前取消分割线，导入后需要时再设置。

Wilson.Zhang · Wilson.Zhang

您好！可以尝试通过Style设置，对某一列单元格的有边框或某一行单元格的上边框设置明显颜色的线条以标识。

祁画 · 祁画

比如我要给第一行单元格设置这个分割线，是给第一行每个单元格都遍历过去，通过setStyle设置嘛

祁画 · 祁画

我可以这样拿到canvas直接绘制吗
const canvas = activeWorkbook.getHost().querySelector('[gcuielement="gcWorksheetCanvas"]');
const ctx = canvas.getContext('2d');

祁画 · 祁画

但是这样绘制好像我需要知道初始化渲染结束跟重绘结束的钩子，在这里面拿到canvas重新画线条。

祁画 · 祁画

我们业务上不太适用使用style去绘制，因为这个分割线只存在于设计器里面，我们预览的时候是不能有这个分割线的，如果通过style去设置的话，toJson导出数据，再预览的时候通过fromjson去导入，style里面就会带着这个分割线的样式。

Wilson.Zhang · Wilson.Zhang

本帖最后由 Wilson.Zhang 于 2024-11-14 09:01 编辑

建议您通过setStyle的方式设置，遍历单元格设置样式是一种方式，SperadJS提供了另一种更便捷的批量设置方式，对单元格区域整体设置边框，可参考如下代码：

sheet.getRange(2, 0, 1, 10).borderBottom(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));

复制代码

上述代码执行效果如下图所示：
单元格区域边框线.png

可以参考官网API文档了解详情：
https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.CellRange#borderbottom

边框设置API文档.png842532958.png

另外，可以在导出时不携带样式，但是这样的话也无法携带其他样式。应对这种情况，可以在导出时取消分割线，导出的文件中即可不携带分割线，同时又保持了其他样式。您可以自行评估下看是否可行。

祁画 · 祁画

但是如果使用style设置分割线，我再去设置边框，分割线就消失了，而且导出的时候我希望边框样式可以导出。

祁画 · 祁画

浮动元素可以禁止拖拽嘛

		自动登录	找回密码
密码			立即注册

[已处理] 【17.1.7】我希望给整个画布绘制一些分割线如何实现