且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-04-13 01:33:21

最后得到的答案如下:

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,

       });
        }
      });

     });