FabricJS canvas drawImage不显示图像 [英] FabricJS canvas drawImage not displaying image

查看:155
本文介绍了FabricJS canvas drawImage不显示图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Attempting to create a custom class that will display an image on the top left corner of a Fabric rectangle.

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

Extending the fabric class and calling ctx.drawImage isn't displaying anything.

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 可以正常工作并正确显示标签.

fillText is working fine and displaying the label properly.

尝试了几种不同的方法,认为未加载图像.它作为SVG导入.我已经将其显示为其他方式,但更喜欢让自定义类来处理此事件,而不是事件处理程序.

Tried a few different things thinking the image isn't loaded. It's imported as an SVG. I've gotten it to display in other ways but prefer to have a custom class handle this instead of event handlers.

推荐答案

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

You need to set image after load. You can use image.onload event callback, or use 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>

这篇关于FabricJS canvas drawImage不显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆