Canvas Responsive - Fabricjs

Canvas Responsive - Fabricjs

本文关键字：Fabricjs Responsive Canvas      更新时间：2023-09-26

我尝试让响应式画布遵循此主题 1 和主题 2

我正在尝试让所有设备的响应式画布。

我知道这是可能的，但我很难找到解决方案。

按照上面的两个主题，我尝试在javascript中设置最大画布大小的宽度和高度。并且在每个设备的css中具有不同的画布视图大小，即使更改CSS显示大小，JavaScript中定义的实际大小也必须保留

我正在使用织物.js

溶液

注意：由于帖子中的预览，考虑宽度 360px 的堆栈溢出视图

  var canvas = this.__canvas = new fabric.StaticCanvas ('c');
  canvas.setHeight(600);
canvas.setWidth(800);
  canvas.setBackgroundImage('http://lorempixel.com/500/500/animals', canvas.renderAll.bind(canvas), { width: 800,height: 600 });
  
  var text = new fabric.Text('Hello', { left: 100, top: 100, fill: 'blue', });
canvas.add(text);
 #c{
     border:1px solid red;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }
 @media screen and (min-width: 360px) {
  #c { 	 -webkit-transform : scale(0.4);
-webkit-transform-origin : 0 0; }
}    
@media screen and (min-width: 768px) {
  #c { 	 -webkit-transform : scale(0.45);
-webkit-transform-origin : 0 0; }
}
 
@media screen and (min-width: 992px) {
  #c { 	 -webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;}
}
 
@media screen and (min-width: 1200px) {
  #c { 	 -webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c"></canvas>

我的问题中的解决方案。在主题 1 中，我找到了它：

X4V1 在 20：24 回答 Jun 16 '15

我找到了一个技巧来做到这一点，而不必复制画布。 这个解决方案非常接近css zoom属性，但事件是 正确处理。

下面是显示画布一半大小的示例：

-

webkit-transform： scale（0.5）; -webkit-transform-origin ： 0 0;

相关文章：