如何使織物js中的畫布和圖像響應

Question

我使用織物js和畫布從url添加圖像我想使畫布和包含圖像響應按分辨率。我們如何做到這一點？ 我的代碼是： -

<canvas id="panel" width="700" height="350"></canvas> 

<script> 
(function() { 
     var canvas = new fabric.Canvas('panel'); 
     var rect; 
     fabric.Image.fromURL('abc.jpg', function (img) { 
       canvas.add(img.set({ 
        width: canvas.width, 
        height:canvas.height, 
        originX :'left', 
        originY :'top', 
        selectable: false, 

       })); 
      }); 


    })(); 
</script> 

Answer 1

按我所知，沒有內置函數來實現這一目標。

但是可以通過使用原生JavaScript並使用屏幕寬度和屏幕高度來將canvas設置爲響應，並將它們設置爲畫布寬度和高度。

而你必須申請所有在畫布中繪製的項目的數學。 （將畫布寬度或高度與屏幕寬度或高度的比率，並使用此比率來調整視圖端口更改時的所有元素的大小）。

希望它能幫助你。