如何在FabricJS中创建“空”图像元素？

Question

我想知道是否有一个选项，首先是将一个图像元素添加到画布（初始化它的种类），然后将其更改为SRC和/或选项？

Answer 1

使用new fabric.Image('');初始化图像对象。

var canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({left:20,top:20,width:50,height:50});
var image = new fabric.Image('');
var rect2 = new fabric.Rect({left:80,top:50,width:150,height:150,fill:'red'});
canvas.add(rect1,image,rect2);
console.log(canvas.getObjects())

function setSource(){
 image.setSrc('//fabricjs.com/assets/pug.jpg',function(img){
 img.set({  left:50,top:50, scaleX:300/img.width,scaleY:300/img.height});
 img.setCoords();
 canvas.renderAll();
 })
}

canvas{
 border: 2px solid #000;
}

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