13.1.3版本自定义单元格渲染图片会受其他css内容影响图片的渲染

收藏

本帖最后由 rex_chujie 于 2020-7-9 15:39 编辑

如demo中所示，demo存量合同租赁负债重估损益明细表这个sheet页里的B4,D3单元格渲染不出图片，13.0.0版本是好的，13.1.3版本渲染不出来，
GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(
this,
ctx,
'',
startX,
startY,
300,
20,
backgroundImgStyle,
options
)
这里图片的宽度需要设置成300，才正常显示，这是为啥，两个版本对渲染图片的宽度有区别？

Fiooona · Fiooona

(4931) 这个问题已经提交给研发同事处理，感谢您的反馈，这边有进展会第一时间与您联系

Fiooona · Fiooona

layout.css 中，使用了全局flex布局，这将影响body中的所有元素。

在自定义的celltype中，它会加载一张图片，当渲染图片时，我们会得到原始图像的大小，这个大小受到flex布局的影响很大。

下面这样一个简单的例子，可以在没有SpreadJS的情况下重现这些问题

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
flex: 1;
}
</style>
</head>
<body>
<img src="increaseIndicator.png" />
</body>
</html>

复制代码

添加以下这个设置在body中可以解决这个问题：
align-items: baseline;

rex_chujie · rex_chujie

如果在全局添加这个属性，则不是代表这个属性不管在什么地方永远都必须是这个值么，这个能不能设置成只作用到spread,不然设置到body里面会影响其他元素

Fiooona · Fiooona

按照您提供的Demo 给出这个分析及建议，具体实际情况还要看您的实际的项目。

rex_chujie · rex_chujie

那我实际项目中不可以在全局设置align-items: baseline;这个属性怎么办，我能设置只在spread上生效么

Fiooona · Fiooona

您可以试一下将其设置到Spread 的样式里，如果有问题再提供新的能复现问题的Demo。

rex_chujie · rex_chujie

还是有问题,上面的demo中针对spreadJS元素设置样式还是不生效

Fiooona · Fiooona

本帖最后由 Fiooona 于 2020-9-4 17:31 编辑

这个问题需要花一些时间调研，看是否有其的解决方案，暂时改为保留处理（4931）

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

[调研中] 13.1.3版本自定义单元格渲染图片会受其他css内容影响图片的渲染

8 个回复

微信认证勋章