布キャンバスに画像を追加するにはどうすればいいですか? 質問する

布キャンバスに画像を追加するにはどうすればいいですか? 質問する

ファブリック キャンバスに画像やアイコンを追加したいのですが、Fabric デモで提供されているコードが機能しません。

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

これではキャンバス全体が空白になってしまいます。イベントに反応するクリック可能な要素としてアイコンを追加したいのです。

ベストアンサー1

私はキャンバスにjpg画像を読み込むjsfiddleを作成しました。fabric.Image.fromURL()機能と「マウス:ダウン'イベント。マウス:ダウンユーザーがオブジェクトをクリックしたか、キャンバスだけをクリックしたかを確認します。

以下は 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); 
});

もっとファブリックイベントが必要な場合は、こちらをご覧ください:イベント

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

助けになれば幸いです。幸運を祈ります。

おすすめ記事