web-dev-qa-db-fra.com

Comment ajouter une image à une toile de tissu?

Je veux ajouter des images/icônes à ma toile de tissu. Le code donné sur la démo Fabric ne fonctionne pas.

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

Cela rend juste toute ma toile vierge. Je veux ajouter des icônes en tant qu'éléments cliquables qui répondent aux événements.

javascripthtmlcanvasfabricjs
10
Ankur Lathwal

J'ai fait un jsfiddle qui charge une image jpg sur la toile, en utilisant la fonction fabric.Image.fromURL () et la fonction ' mouse: down' un événement. À l'intérieur de la souris: bas je vérifie si l'utilisateur clique sur un objet ou simplement sur la toile.

voici un extrait du 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);
  }

})

mais mon exemple fonctionne aussi bien, si je n'utilise pas la variable supplémentaire:

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

si vous avez besoin de plus d'événements de tissu, vous pouvez jeter un œil ici: http://fabricjs.com/events/

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

L'espoir aide, bonne chance.

17
Theo Itzaris

Ce code fonctionne correctement mais vous devez utiliser le fichier fabric.js. Vous devez également utiliser le fichier CDN fabric.js dans votre en-tête.

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">
1
manoj chauhan