Canvas 响应式 - Fabricjs

Question

我试着让响应式 canvas 跟随此 and topic2

我正在尝试让所有设备响应 canvas。

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

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

我正在使用 fabric.js

解决方案

注： stack Overflow view considering width 360px because of the preview in the post

  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>

Answer 1

解决我的问题。在我找到了它：

X4V1 answered Jun 16 '15 at 20:24

I have found a trick to do that without having to copy the canvas. This solution is really close to css zoom property but events are handle correctly.

This is an example to display the canvas half its size:

-webkit-transform : scale(0.5); -webkit-transform-origin : 0 0;

Canvas 响应式 - Fabricjs

Canvas Responsive - Fabricjs

javascript

css

html5-canvas

responsive-design

fabricjs