ファブリックキャンバスに画像/アイコンを追加したい。 Fabricデモで提供されているコードが機能していません。
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
これでキャンバス全体が空白になります。イベントに応答するクリック可能な要素としてアイコンを追加したい。
fabric.Image.fromURL()関数と 'mouse:down 'イベント。 mouse: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/
幸運を祈ります。
このコードは正しく機能していますが、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">