Question

这里我试图动态缩放画布背景图像。点击.set_bg_images我动态设置画布背景图像，它的工作正常，我已经添加按钮change_scale点击此按钮我正在尝试更改画布背景图像的比例，设置背景图像后，单击更改比例按钮时，整个画布背景图像将变为diapered。给我一些想法。

 **//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();

  });
   });

Answer 1

最后得到的答案是代码

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,

       });
        }
      });

     });

使用fabric.js动态缩放画布背景图像

1 个答案: