Javascript FabricJS canvas drawImage未显示图像

正在尝试创建将在结构矩形的左上角显示图像的自定义类

扩展fabric类并调用

ctx.drawImage

不会显示任何内容

var CustomRect=fabric.util.createClass（fabric.Rect{
类型：“labeledRect”，
初始化：函数（选项）{
选项| |（选项={}）；
常量图像=新图像（）；
image.src=signBtn；
this.callSuper（'initialize'，options）；
此.set（'label'，options.label | |'）；
此.set（'image'，image）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）{
label:this.get（'label'）
});
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
ctx.font='20px Helvetica'；
ctx.fillStyle='#333'；
ctx.fillText（this.label，-this.width/2，-this.height/2+20）；
ctx.drawImage（this.image，this.left+10，this.top-5,15,15）；
}
});

fillText

工作正常，标签显示正常

---

尝试了一些不同的操作，认为图像未加载。它作为SVG导入。我已经让它以其他方式显示，但更喜欢使用自定义类来处理它，而不是事件处理程序。

您需要在加载后设置图像。您可以使用image.onload事件回调，也可以使用

演示

fabric.CustomRect=fabric.util.createClass（fabric.Rect{
键入：“customRect”，
初始化：函数（选项）{
选项| |（选项={}）；
var=这个；
this.imageLoaded=false；
fabric.util.loadImage（options.signBtn，function（img）{
设置（'image'，img）；
that.imageLoaded=true；
那是真的；
//如果画布是全局的
canvas.renderAll（）；
},{
交叉原点：“annonymous”
});
this.callSuper（'initialize'，options）；
此.set（'label'，options.label | |'）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）{
标签：this.label，
图片：这个
});
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
ctx.font='20px Helvetica'；
ctx.fillStyle='#333'；
ctx.fillText（this.label，-this.width/2，-this.height/2+20）；
this.imageLoaded&&ctx.drawImage（this.image，10，-5,15,15）；
}
});
fabric.CustomRect.fromObject=函数（对象，回调）{
返回fabric.Object.\u fromObject（'CustomRect'，Object，callback）；
};
var url='1〕https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg';
var canvas=newfabric.canvas（'canvas'）；
var rect=new fabric.CustomRect({
signBtn:url，
左:10,，
前10名，
宽度：200，
身高：200，
填充：“绿色”，
标签：“测试”
});
canvas.add（rect）；
函数loadfromjson（）{
var json=canvas.toJSON（）；
canvas.clear（）；
setTimeout（函数（）{
loadFromJSON（json，canvas.renderal.bind（canvas））；
}, 1000)
}

画布{
边框：2倍实心#000；
}

loadfromjson

我相信有一些缺少的值，比如

this.width

和

this.height

除此之外，您还必须等待图像加载后才能绘制它。您可以这样做：

var CustomRect = fabric.util.createClass(fabric.Rect, {

  type: 'labeledRect',

  initialize: function(options) {
    options || (options = { });
    const image = new Image(); 
    image.src = 'https://i.stack.imgur.com/CYp8Y.jpg'; 

    this.callSuper('initialize', options);

    image.onload = (function() {
        this.width = image.width;
        this.height = image.height;
        this.image_loaded = true;
      }).bind(this);


    this.set('label', options.label || '');
    this.set('image', image);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      label: this.get('label')
    });
  },

  _render: function(ctx) {

    if (this.image_loaded) {
        this.callSuper('_render', ctx);
        console.log(-this.width / 2, -this.height / 2);
        ctx.font = '20px Helvetica';
        ctx.fillStyle = '#333';
        ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
        ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
      }
  }
});

请注意以下两个变化：

image.onload = (function() {
        this.width = image.width;
        this.height = image.height;
        this.image_loaded = true;
      }).bind(this);

加载图像后，我在

initialize

方法中将

image\u loaded

设置为true。然后在

\u render

方法中，我检查图像是否已加载，然后绘制它

if(this.loaded){
     //............
     ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
 }

这是一把小提琴：

您可能需要单击画布以触发

render

事件。否则，您将无法在输出框中看到矩形。（我没有添加） 希望有帮助：）