如何添加图像到织物画布？

Question

我想添加图像/图标到我的织物画布。 Fabric演示中给出的代码不起作用。

fabric.Image.fromURL('my_image.png', function(oImg) { 
canvas.add(oImg); 
}); 

这只是让我的整个画布空白。 我想添加图标作为响应事件的可点击元素。

Answer 1

我这样做，是在画布上加载jpg图片，通过使用 fabric.Image.fromURL（）功能和一的jsfiddle“鼠标：下”事件。在鼠标内部：down我检查用户是否点击一个对象或仅在画布上。

这里是一段JavaScript代码：

var canvas = new fabric.Canvas('c'); 
canvas.backgroundColor = 'yellow'; 

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) { 
//i create an extra var for to change some image properties 
var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150}); 
canvas.add(img1); 
}); 

canvas.on('mouse:down',function(event){ 
    if(canvas.getActiveObject()){ 
    alert(event.target); 
    } 

}) 

但我的例子也工作正常，如果我不使用额外的变量：

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) { 
canvas.add(myImg); 
}); 

，如果你需要更多的面料事件，你可以采取一看这里：http://fabricjs.com/events/

的jsfiddle：https://jsfiddle.net/tornado1979/5nrmwtxu/

希望有所帮助，祝你好运。