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

Question

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

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

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

Answer 1

我已经完成了一个 jsfiddle，通过使用fabric.Image.fromURL()函数和“ mouse:down ”事件在画布上加载了一个 jpg 图像。 在鼠标内部：向下我检查用户是否点击了一个对象或只是在画布上。

这是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/

希望有帮助，祝你好运。

Answer 2

此代码工作正常，但您需要使用 fabric.js 文件。 您还需要在标头中使用 fabric.js CDN 文件。

Fabric.js CDN->

 var canvas = new fabric.Canvas('drawarea'); var imgElement = document.getElementById('my-image'); var imgInstance = new fabric.Image(imgElement, { left: 100, top: 100, angle: 0, opacity: 0.75, width:300, height:300 }); canvas.add(imgInstance);

 #my-image{display:none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script> <canvas width="800" height="800" id="drawarea" style="border: 1px solid red;float: right"> </canvas> <img src="https://via.placeholder.com/300.png" id="my-image" width="500px" height="500px">