Maßstab Leinwand Hintergrundbild dynamisch, mit fabric.js

Hier bin ich versucht zu skalieren Leinwand Hintergrundbild dynamisch.Klicken Sie auf .set_bg_images ich bin einrichten die Leinwand Hintergrundbild dynamisch seine Arbeit gut, und ich habe Hinzugefügt-Taste change_scale auf klicken Sie auf diese Schaltfläche, bin ich versucht zu ändern, das skalieren von canvas-hintergrund Bild,nach dem einstellen der hintergrund-Bild, und wenn Sie klicken Sie auf die Schaltfläche skalieren die gesamte Leinwand hintergrund Bild werde diapered.Geben Sie mir einige Idee, dies zu tun.

 **//Here i am setting canvas background image**
 $(".set_bg_images").click(function(){
         var svg_src=$(this).attr('src');
     canvas.remove(background);

     fabric.loadSVGFromURL(svg_src, 
        function (objects, options) { 
            background = fabric.util.groupSVGElements(objects, options);
            background.set({
               //left: canvas.width/2,
               //top: canvas.height/2,
               scaleY: canvas.height /background.width,
                scaleX: canvas.width /background.width,
                selectable: false
            });

          // setBackgroundColor(back_colour);

            canvas.add(background);
            canvas.renderAll();
            parent.$("#element_to_pop_up").bPopup().close();
        });
     **//Here i am trying to change scale of background image onclick event**
         document.getElementById('change_scale').addEventListener('click', function (e) {
      alert("sdfsdfds");
         canvas.remove(background);
            background.set({
               //left: canvas.width/2,
               //top: canvas.height/2,
               scaleY: canvas.height  /background.width -150 ,
                scaleX: canvas.width  /background.width - 150 ,
                selectable: false
            });

          // setBackgroundColor(back_colour);

            canvas.add(background);
            canvas.renderAll();

  });
   });
InformationsquelleAutor Sanjay Nakate | 2014-04-05
  1. 2

    Habe endlich die Antwort Balg-code 

    document.getElementById('sdhafsdfjsd').addEventListener('change', function (e) {
              var clickedID = this.value;

              //alert(clickedID);
              canvas.backgroundImage = '';
              canvas.renderAll();

  fabric.loadSVGFromURL(svg_src,   
      function (objects, options) { 
            background = fabric.util.groupSVGElements(objects, options);
           //alert(background.width);
           if(clickedID==8)
            {

      canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {

    scaleY: canvas.height /background.width,
    scaleX: canvas.width /background.width,

       });
        }
           if(clickedID==6)
            {
              var rval=1;
            background.width=background.width+(100*rval);
            background.height=background.height+(70*rval);

            //alert(background.width);
      canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
      left: 65,
       top: 30,  
    scaleY: canvas.height /background.width,
    scaleX: canvas.width /background.width,

       });
        }
        if(clickedID==0)
            {
              var rval=6;
            background.width=background.width+(100*rval);
            background.height=background.height+(70*rval);

            //alert(background.width);
      canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
      left: 210,
       top: 110,   
    scaleY: canvas.height /background.width,
    scaleX: canvas.width /background.width,

       });
        }
            if(clickedID==2)
            {
                 var rval=4;
            background.width=background.width+(100*rval);
            background.height=background.height+(70*rval);

          // alert(background.width);
      canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
      left: 175,
       top: 100,  
    scaleY: canvas.height /background.width,
    scaleX: canvas.width /background.width,

       });
        }

            if(clickedID==4)
            {
              var rval=2;
            background.width=background.width+(100*rval);
            background.height=background.height+(70*rval);

            //alert(background.width);
      canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
      left: 110,
       top: 60,  
    scaleY: canvas.height /background.width,
    scaleX: canvas.width /background.width,

       });
        }
      });

     });
    InformationsquelleAutor Sanjay Nakate
Schreibe einen Kommentar