spreadJs V14.2.3 自定义单元格画上去的内容不能跟表单一起放大缩小

收藏

在自定义单元格中，除了单元格本来的value，我们还画了其他的内容，调用的方法如下：
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, paintText, startx, y, w, h, style, context)
在调用之前，我们设置了固定的字体和字体大小，后续在页面改变sheet.zoom()，单元格的value会跟着变大变小，但新加的这个没有变化，看看有什么解决办法。

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2025-5-6 17:20 编辑

您好，
“我们还画了其他的内容”这部分是canvas绘制的吗？
如果是，可以在paint内部获取 sheet.zoom() 缩放系数，canvas绘制内容大小时乘以该缩放系数，这样在缩放时自定义单元格会根据系数随之重绘。
以学习指南demo为例：
image.png261125487.png

如果非canvas绘制，请提供一个具体demo以便进一步调研问题原因和方案。

Dtttax · Dtttax

Lynn.Dou 发表于 2025-5-6 17:13
您好，
“我们还画了其他的内容”这部分是canvas绘制的吗？
如果是，可以在paint内部获取 sheet.zoom() ...

这么画的其他内容，只留下了画的代码，其他的省略了：
class myCellType extends GC.Spread.Sheets.CellTypes.Text{
...
paintContent(ctx, value, x, y, w, h, style, context){
let oldFont = style.font
      style.font = 'normal 8pt verdana'
      GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, 'ABC', x, y, 10, h, style, context)
      style.font =  oldFont
      GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, value, x+20, y, w-20, h, style, context)

}
...
}

Lynn.Dou · Lynn.Dou

模拟复现了，不过比较好奇为什么要画两次呢？如果想在value前加上固定的字符串，可以修改代码如下，测试来看是可以一起缩放的：
image.png493942260.png

您看下这种方案是否可以满足需求。

Dtttax · Dtttax

Lynn.Dou 发表于 2025-5-7 15:24
模拟复现了，不过比较好奇为什么要画两次呢？如果想在value前加上固定的字符串，可以修改代码如下，测试来 ...

根据需求，我们每种类型画一次，这里说两种只是简化的，极端情况有6种，而且每种类型要对齐，这种方案不行。

Lynn.Dou · Lynn.Dou

了解，基于本地模拟出来的demo，我们会进一步调研具体原因，待有进展会贴中通知您。

Lynn.Dou · Lynn.Dou

缩放时自定义单元格内部的syle font信息会自动更新，而在您的代码中，font大小是固定的，所以在缩放时未随之变化。

style.font = 'normal 8pt verdana';

复制代码

关于解决方案，可以将font字体大小去掉，只修改字体本身。

style.font = 'verdana';

复制代码

另外，在缩放过程中，"ABC"与value之间的空白距离，也会随字体变大而视觉上越来越近。如果对这一点有要求，可以根据业务需求结合zoom系数动态调整xy值。
image.png923804321.png

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

[处理中] spreadJs V14.2.3 自定义单元格画上去的内容不能跟表单一起放大缩小

6 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人