自定组件绘制图片渲染问题

收藏

本帖最后由 llaysz 于 2019-6-10 14:38 编辑

自定义部分如下，我使用的版本是11.1.4，问题描述，当把这个定义设置给单元格以后保存模板重新加载的时候需要鼠标移动的列头触发鼠标事件或者改变窗口大小后才能绘制出图片来，请帮我看看是我的实现哪有问题吗，就如截图的效果var spreadNS = GC.Spread.Sheets; var customCellTypes = customCellTypes || {}

function paitImage(imgUrl, myctx, x, y, w, h){
function drawBeauty(beauty){
   myctx.drawImage(beauty, x, y, w, h);
}
var beauty = new Image();
beauty.src = imgUrl;
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
      drawBeauty(beauty);
   };
   beauty.onerror = function(){
   };
}
}
customCellTypes.FileCellType = function() {
this.typeName = "customCellTypes.FileCellType";
}
customCellTypes.FileCellType.prototype = new spreadNS.CellTypes.Base();
customCellTypes.FileCellType.prototype.isImeAware = function (context) {
return false;
}
customCellTypes.FileCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
var url = "http://localhost:8090/portal/userfiles/dd6c3314-46bd-4427-9fdd-02049be9e32b.jpg";
paitImage( url, ctx, x, y, w, h);
};

KevinChen · KevinChen

您好，您在图片加载完毕后，再调用一下spread.repaint()即可。

llaysz · llaysz

本帖最后由 llaysz 于 2019-6-10 14:40 编辑

KevinChen 发表于 2019-2-27 11:43
您好，您在图片加载完毕后，再调用一下spread.repaint()即可。

KevinChen 谢谢你的回答，但是这个问题为什么会存在呢，现在代码看来本来就是在图片加载以后才绘制到单元格的啊，我现在的做法是，直接把本次绘制的图片url和请求的image对象直接缓存在这个cellType里面，第二次来检查他的url是否发生了变化，如果未发生变法再调用一下代码重新绘制,问题解决了，但是还是不太清楚里面的机制ctx.save();ctx.rect(x, y, w, h);
ctx.clip();
ctx.drawImage(_self.img, x, y, w, h);
ctx.restore();

KevinChen · KevinChen

您好，您代码中的逻辑是，保存了ctx引用，并且在回调函数中绘制了图片。

但是直接引用ctx绘制不能触发spread的重绘事件，因此需要手动调用一下重绘方法。

llaysz · llaysz

KevinChen 发表于 2019-2-27 17:46
您好，您代码中的逻辑是，保存了ctx引用，并且在回调函数中绘制了图片。

但是直接引用ctx绘制不能触发sp ...

谢谢了解了

KevinChen · KevinChen

不客气，很高兴与您交流，本帖结贴了，有新的问题欢迎发新贴~

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

[已处理] 自定组件绘制图片渲染问题

5 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章