单元格自定义canvas绘制

收藏

使用自定义单元格时，想要在Hit某个区域时修改绘制的内容，是否可实现呢？目前只能在paint方法拿到ctx

Lynn.Dou · Lynn.Dou

您好，
您参考下学习指南示例demo，将列头的自定义单元格修改为单元格区域即可，自定义单元格的逻辑是一样的。
https://demo.grapecity.com.cn/sp ... ustom-header/purejs
image.png395600890.png

miSpreadjs · miSpreadjs

Lynn.Dou 发表于 2023-4-17 18:18
您好，
您参考下学习指南示例demo，将列头的自定义单元格修改为单元格区域即可，自定义单元格的逻辑是一样 ...

这个Demo在Hit的时候是渲染dom，但我想修改paint绘制的canvas的内容

Lynn.Dou · Lynn.Dou

您注意下列头点击的”圆点“，点击后会修改圆点的颜色。
这是通过修改tag值，动态改变paint中的填充样式，您需要参考的是此示例。
（悬浮提示的dom实现您可以忽略）
image.png933804626.png

miSpreadjs · miSpreadjs

Lynn.Dou 发表于 2023-4-18 11:47
您注意下列头点击的”圆点“，点击后会修改圆点的颜色。
这是通过修改tag值，动态改变paint中的填充样式， ...

这个Demo里面真正起作用的似乎是设置addCellValueRule ，如果去掉这个，鼠标点击事件并不会触发paint去更新，结果就是点了不会变色。
我看画五角星那个Demo里面是修改状态后去调用一下 spread.commandManager().execute({ cmd: 'editCell'}) 触发paint更新，如果使用这个方式批量更新，是否有其他影响，

miSpreadjs · miSpreadjs

Lynn.Dou 发表于 2023-4-18 11:47
您注意下列头点击的”圆点“，点击后会修改圆点的颜色。
这是通过修改tag值，动态改变paint中的填充样式， ...

这个Demo里面真正起作用的似乎是设置addCellValueRule ，如果去掉这个，鼠标点击事件并不会触发paint去更新，结果就是点了不会变色。
image.png325568541.png

我看画五角星那个Demo里面是修改状态后去调用一下 spread.commandManager().execute({ cmd: 'editCell'}) 触发paint更新，如果使用这个方式批量更新，是否有其他影响

Lynn.Dou · Lynn.Dou

您调试看看代码就明白了，列头单元格的圆点改变颜色，是由tag中存储的 color 值决定的。
image.png948155517.png

这个demo只是提供一个思路，如果想动态改变paint返回的显示文本，可以将数据存储在tag中，在hit时动态切换。

miSpreadjs · miSpreadjs

Lynn.Dou 发表于 2023-4-18 17:45
您调试看看代码就明白了，列头单元格的圆点改变颜色，是由tag中存储的 color 值决定的。

这个demo只是提 ...

我知道关键这个paint点击的时候不调用啊。。

Richard.Ma · Richard.Ma

paint只要在单元格需要重绘的时候，都会自动触发。
在发你的在线示例中，也是可以在鼠标点击这个圆形图标位置时触发的，这是因为他这边是做了判断，你如果是要点击整个单元格都能触发的话，不加判断就行

image.png11450194.png

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

[已处理] 单元格自定义canvas绘制

8 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人