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

问题描述

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

Here i am trying to scale canvas background image dynamically.On click .set_bg_images i am setting up the canvas background image dynamically its working good and i have added button change_scale on click this button i am trying to change the scale of canvas background image,after setting up the background image and when click the change scale button the entire canvas background image going to diapered.Give me some idea to do this.

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

  });
   });

推荐答案

最后得到的答案如下：

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动态缩放画布背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！