FabricJS canvas drawImage不显示图像

Question

尝试创建一个自定义类，该类将在Fabric矩形的左上角显示图像。

扩展结构类并调用ctx.drawImage不会显示任何内容。

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

  type: 'labeledRect',

  initialize: function(options) {
    options || (options = { });
    const image = new Image(); 
    image.src = signBtn; 

    this.callSuper('initialize', options);
    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) {
    this.callSuper('_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导入。 我已经以其他方式显示了它，但是更喜欢让一个自定义类来处理它而不是事件处理程序。

Answer 1

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

DEMO

 fabric.CustomRect = fabric.util.createClass(fabric.Rect, { type: 'customRect', initialize: function(options) { options || (options = { }); var that = this; this.imageLoaded = false; fabric.util.loadImage(options.signBtn,function(img){ that.set('image', img); that.imageLoaded = true; that.dirty = true; //if canvas is global canvas.renderAll(); },{ crossOrigin : 'annonymous' }); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { label: this.label, image : this.image }); }, _render: function(ctx) { this.callSuper('_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 = function(object, callback) { return fabric.Object._fromObject('CustomRect', object, callback); }; var url = 'https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg'; var canvas = new fabric.Canvas('canvas'); var rect = new fabric.CustomRect({ signBtn: url, left : 10, top : 10, width : 200, height: 200, fill: 'green', label : 'test' }); canvas.add(rect); function loadfromjson() { var json = canvas.toJSON(); canvas.clear(); setTimeout(function() { canvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); }, 1000) } 

 canvas{ border:2px solid #000; } 

 <script src='https://rawgit.com/kangax/fabric.js/master/dist/fabric.js'></script> <canvas id="canvas" width="300" height="300"></canvas> <button onclick="loadfromjson()">loadfromjson </button> 

Answer 2

我相信有些像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_loaded设置为true。 然后在_render方法中，我检查图像是否已加载，然后绘制图像。

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

这是一个小提琴： https : //jsfiddle.net/nimeshka/enL61g0w/55/

您可能需要单击画布以触发render事件。 否则，您将不会在输出框中看到该矩形。 （我没有添加它）希望对您有所帮助：）