帆布響應媒體屏幕最小寬度 - 布料js

Question

我試圖調整每個分辨率的畫布，所以我首先使用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; 

它不工作

感謝您的幫助

Answer 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; 
    }