🤔想自定义列头加入 writing-mode: vertical-lr; 竖着显示有什么好方法吗

mtrucc commented 2 weeks ago

🏷 Version

Package	Version
@antv/s2
@antv/s2-react
@antv/s2-vue	2.0.0

Sheet Type

[ ] PivotSheet
[x] TableSheet
[ ] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

我期望能自定义列头，这样显示

🔗 Reproduce Link

😊 Expected Behavior

😅 Current Behavior

lijinke666 commented 2 weeks ago

writing-mode: vertical-lr 是 CSS 的能力, 你要在 Canvas 中实现意味着你要模拟浏览器的排版实现, 很麻烦, 一切都要自己计算, 建议不要折磨自己, 提供几个可能的思路:

首先预设一个合适的列头宽高, 在自定义 ColCell 的基础上

分词

const textList = "我是文本".split('')

textList.forEach((text) => {
  // 测量或写死每一个字的高度
  // 调用 G 的 API 绘制文本
})

旋转绘制

ctx.save();
ctx.translate(this.meta.width / 2,this.meta.height / 2);
ctx.rotate(Math.PI / 2);
ctx.fillText('我是文本', 0, 0);
ctx.restore();

以上情况, 如果文本长度是动态的, 那还需要动态调整列头宽高, 实现自动撑高的效果

利用 S2 自带的多行文本能力, 无需考虑文本分词和坐标计算, 单元格自动撑开等逻辑, 设置一个足够大的 maxLines, 然后设置一个只能放下一个字的列宽

const cellTextWordWrapStyle = {
  maxLines: 10,
  wordWrap: true,
  textOverflow: ''
};

以上方式如果都不行或者效果不佳, 直接用 DOM 表格吧...

github-actions[bot] commented 2 weeks ago

你好 @mtrucc, Issue 板块是用于 bug 反馈与需求讨论的地方。你可以试着在 antv s2 discussions 新开一个 discussion, 选择 🙏Q&A 类别进行提问, 我们会及时进行解答, 感谢你的理解。

Hello, @mtrucc. The Issue section is used for bug feedback and requirement discussion. You could open a new discussion in antv s2 discussions, choose the 🙏Q&A category to ask questions. We will answer in time. Thanks so much for your understanding.

antvis / S2