🐛角头单元格垂直边线透明度或者宽度设置为0时不生效

[songlitao]

🏷 Version

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

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

交叉表配置角头单元格边线透明度为0，或者边线宽度为0，或者边线颜色为透明transparent，水平边线样式主题生效，垂直边线样式主题不生效。

⌨️ Code Snapshots

import { PivotSheet, S2DataConfig, S2Options, S2Theme } from '@antv/s2';

fetch(
'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
)
.then((res) => res.json())
.then(async (data) => {
const container = document.getElementById('container');
const s2DataConfig: S2DataConfig = {
fields: {
rows: ['province', 'city'],
columns: ['type'],
values: ['price', 'cost'],
},
meta: [
{ field: 'province', name: '省份', },
{ field: 'city', name: '城市', },
{ field: 'type', name: '商品类别', },
{ field: 'price', name: '价格', },
{ field: 'cost', name: '成本', },
],
data,
};

const s2Options: S2Options = {
  width: 600,
  height: 480,
};

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.setThemeCfg({
  name: 'colorful',
});

// 设置角头边线隐藏
const s2Theme: S2Theme = {
  cornerCell: {
    cell: {
      verticalBorderColorOpacity: 0,
      horizontalBorderColorOpacity: 0,
      verticalBorderWidth: 0,
      horizontalBorderWidth: 0,
      verticalBorderColor: 'transparent',
      horizontalBorderColor: 'transparent'
    },
  },
};
s2.setTheme(s2Theme);

await s2.render();

});

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[github-actions]

你好 @songlitao，很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @songlitao, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

[xingxiang1227]

我开发过程中也遇到了这个问题，想实现自定义斜线角头，会显示一条竖线导致效果很难看，希望大佬们能尽快解决

[github-actions]

你好 @songlitao，这个属于底层渲染引擎 AntV/G 的问题, 需要等待底层支持或修复后, 上层才能适配, 请耐心等待, 感谢你的理解。

Hello, @songlitao, This belongs to the underlying rendering engine AntV/G (https://g.antv.antgroup.com/), needs to wait for the underlying support or after repair, the upper can adapter, please wait patiently, thank you for your understanding.

[lijinke666]

看了下, 主题配置是生效了的, 红框的是表格的背景色, 出于这个问题的原因是子像素导致的:

比如单元格计算出的宽度是 199.5px, 传递给底层的渲染引擎绘制时, 引擎做了取整操作, 变成了 200px, 这样会导致相差了 1px 左右, 所以多了一条缝隙, 而不是边框设置未生效

const s2Options = {
  style: {
    rowCell: {
      width: 200,
    },
  },
}

最小复现代码 (背景色设为红色):

const s2Options = {
  style: {
    rowCell: {
      width: 200.5,
    },
  },
}

s2.setTheme({
  background: {
    color: 'red'
  }
})

[lijinke666]

🎉 This issue has been resolved in version @antv/s2-v2.1.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀