Quiero agregar imágenes/iconos para mi tela de lona. El código dado en la Tela demo no está funcionando.

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

Esto sólo hace que toda mi lienzo en blanco.
Quiero añadir iconos seleccionables elementos que responden a eventos.

2 Comentarios

  1. 12

    He hecho un jsfiddle que carga una imagen jpg en el lienzo, mediante el uso de la
    tela.Imagen.fromURL() función y el ‘ratón:abajo‘ evento. Dentro de la ratón:abajo puedo comprobar si el usuario hace clic en un objeto o en el lienzo.

    aquí es un fragmento de 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);
      }
    
    })

    pero mi ejemplo también funciona ok ,si yo no uso la variable adicional:

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

    si necesita más tela de eventos puedes echar un vistazo aquí : http://fabricjs.com/events/

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

    Esperanza de ayuda , buena suerte.

    • Cualquier respuesta que incorpora un pug, tiene mi voto
  2. 1

    este código funciona correctamente, pero usted necesita fabric.js archivo .
    también puede usar fabric.js archivo de la CDN en su encabezado

    Fabric.js CDN->

    JS:

    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);   

    CSS:

    #my-image{display:none;}

    HTML:

    <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">

    • Necesita código de formato

Dejar respuesta

Please enter your comment!
Please enter your name here