[英]How to add image to fabric canvas?
我想在我的織物畫布上添加圖像/圖標。 Fabric 演示中給出的代碼不起作用。
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
這只會讓我的整個畫布空白。 我想添加圖標作為響應事件的可點擊元素。
我已經完成了一個 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/
希望有幫助,祝你好運。
此代碼工作正常,但您需要使用 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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.