如何使织物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设置为响应，并将它们设置为画布宽度和高度。

而你必须申请所有在画布中绘制的项目的数学。 （将画布宽度或高度与屏幕宽度或高度的比率，并使用此比率来调整视图端口更改时的所有元素的大小）。

希望它能帮助你。