画布响应媒体屏幕最小宽度 - FabricJS

时间：2016-01-21 22:43:16

标签： javascript css html5-canvas media-queries fabricjs

我尝试为每个分辨率调整画布，所以我首先使用css并为每个分辨率放置媒体屏幕。

@media screen and (min-width: 320px) {
  #c {   -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }

https://jsfiddle.net/qj3oyzs8/

它适用于我，但所有对象都没有正确拖动，调整大小或旋转。 一种解决方案是应用zoomOut和zoomIn，例如：

http://jsfiddle.net/Q3TMA/662/

现在我需要帮助知道如何在浏览器中正确打开画布比例的捕获分辨率

修改 

function screencan() {
   var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width;

/*

In if has to have the same scale the css
@media screen and (min-width: 320px) {
  #c {   -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }
}


*/
    if(widthscrencan <= 360 ) {
           // Zoom Out


 function zoomOut() {
        // TODO limit max cavas zoom out

        canvasScale = canvasScale / SCALE_FACTOR;

        canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
        canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * (1 / SCALE_FACTOR);
            var tempScaleY = scaleY * (1 / SCALE_FACTOR);
            var tempLeft = left * (1 / SCALE_FACTOR);
            var tempTop = top * (1 / SCALE_FACTOR);

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }

        canvas.renderAll();        
    }

    }               
 }
 window.onload = screencan;

不起作用

感谢您的帮助

2 个答案:

答案 0 :(得分：1)

快乐!!!我明白了：D

唯一的问题是，对于新的大小调整浏览器移动。有必要刷新页面，因为window.onload = zoomIn;

解决方案！我删除了css的查询屏幕，并且：

widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width; // capture width screen onload
canvasScale = 1; //global  

   if (widthscrencan <=360){ 

      function zoomIn() {
          var SCALE_FACTOR = .37;
          canvasScale = canvasScale * SCALE_FACTOR;

      canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
      canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

      var objects = canvas.getObjects();
      for (var i in objects) {
          var scaleX = objects[i].scaleX;
          var scaleY = objects[i].scaleY;
          var left = objects[i].left;
          var top = objects[i].top;

          var tempScaleX = scaleX * SCALE_FACTOR;
          var tempScaleY = scaleY * SCALE_FACTOR;
          var tempLeft = left * SCALE_FACTOR;
          var tempTop = top * SCALE_FACTOR;

          objects[i].scaleX = tempScaleX;
          objects[i].scaleY = tempScaleY;
          objects[i].left = tempLeft;
          objects[i].top = tempTop;

          objects[i].setCoords();
      }


      canvas.renderAll();
      alert(widthscrencan+' function 360'); 

  }

   window.onload = zoomIn;
 }






   if ((widthscrencan >=361) || (widthscrencan ==768)){ 

            function zoomIn768() {
          var SCALE_FACTOR = .45;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert(widthscrencan+' function 768'); 


        }
          window.onload = zoomIn768;
    }

   if ((widthscrencan >=769) || (widthscrencan ==992)){ 

            function zoomIn992() {
          var SCALE_FACTOR = .5;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert(widthscrencan+' function 992'); 


        }
          window.onload = zoomIn992;
    }

      if ((widthscrencan >=993) || (widthscrencan ==1200)){ 

            function zoomIn1200() {
          var SCALE_FACTOR = .9;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert(widthscrencan+' function 1200'); 


        }
          window.onload = zoomIn1200;
    }


      if (widthscrencan >=1300){ 

            function zoomIn1300() {
          var SCALE_FACTOR = 1.01;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert(widthscrencan+' function 1300'); 


        }
          window.onload = zoomIn1300;
    }

答案 1 :(得分：1)

我使用了AND运算，而不是使用OR运算，对我来说很完美
这是您的修改后的代码

谢谢。 ：）

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#Ffaafa";

var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width; // capture width screen onload
var canvasScale = 1; //global  
var SCALE_FACTOR = 1.2;


window.onload = function () {
    
    var text = new fabric.Text('Text Here', { 
    left: 100, 
    top: 50 
    });
    canvas.add(text);
    
    if (widthscrencan <=360){ 
       zoomIn();
     }
    else if ((widthscrencan >=361) && (widthscrencan <= 768)){ 
          zoomIn768();
    }
    else if ((widthscrencan >=769) && (widthscrencan <= 992)){ 
          zoomIn992();
    }
    else if ((widthscrencan >=993) && (widthscrencan <= 1200)){ 
          zoomIn1200();
    }
    else  if (widthscrencan >=1300){ 
         zoomIn1300();
    }

};



function zoomIn() {
          var SCALE_FACTOR = .37;
          canvasScale = canvasScale * SCALE_FACTOR;

      canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
      canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

      var objects = canvas.getObjects();
      for (var i in objects) {
          var scaleX = objects[i].scaleX;
          var scaleY = objects[i].scaleY;
          var left = objects[i].left;
          var top = objects[i].top;

          var tempScaleX = scaleX * SCALE_FACTOR;
          var tempScaleY = scaleY * SCALE_FACTOR;
          var tempLeft = left * SCALE_FACTOR;
          var tempTop = top * SCALE_FACTOR;

          objects[i].scaleX = tempScaleX;
          objects[i].scaleY = tempScaleY;
          objects[i].left = tempLeft;
          objects[i].top = tempTop;

          objects[i].setCoords();
      }


      canvas.renderAll();
    alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn'); 
  }
  
  
  function zoomIn768() {
          var SCALE_FACTOR = .45;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
        alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn768'); 

        }
        
        
        function zoomIn992() {
          var SCALE_FACTOR = .5;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn992'); 

        }
        
        
        function zoomIn1200() {
          var SCALE_FACTOR = .9;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn1200'); 


        }
        
        
        function zoomIn1300() {
          var SCALE_FACTOR = 1.01;
          canvasScale = canvasScale * SCALE_FACTOR;

          canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
          canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;

              var tempScaleX = scaleX * SCALE_FACTOR;
              var tempScaleY = scaleY * SCALE_FACTOR;
              var tempLeft = left * SCALE_FACTOR;
              var tempTop = top * SCALE_FACTOR;

              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;

              objects[i].setCoords();
          }


          canvas.renderAll();
          alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn1300'); 

  
        }
<canvas id="c" width="800" height="550"></canvas>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"></script>

相关问题
最新问题