帆布响应 - Fabricjs

我试图让所有设备的响应画布响应画布。

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

继上述两个主题后，我尝试在javascript中设置最大画布大小的宽度和高度。并在CSS为每个设备具有不同的尺寸，以画布视图，甚至改变以JavaScript定义的CSS显示尺寸实际大小必须保持

使用I'm fabric.js

SOLUTION

注：堆栈溢出观点考虑，因为在后预览的宽度为360像素

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 { \t -webkit-transform : scale(0.4); 
 
-webkit-transform-origin : 0 0; } 
 
}  
 

 
@media screen and (min-width: 768px) { 
 
    #c { \t -webkit-transform : scale(0.45); 
 
-webkit-transform-origin : 0 0; } 
 
} 
 
    
 
@media screen and (min-width: 992px) { 
 
    #c { \t -webkit-transform : scale(0.5); 
 
-webkit-transform-origin : 0 0;} 
 
} 
 
    
 
@media screen and (min-width: 1200px) { 
 
    #c { \t -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>

来源

2016-01-20 Gislef

解决方法在我的问题。在topic1我发现：

X4V1回答6月16日在'15 20:24

我已经找到了窍门要做到这一点，而无需复制的画布。此解决方案非常接近css缩放属性，但事件正确处理为。

这是一个例子，以显示在画布一半大小：

-webkit变换：比例（0.5）; -webkit-transform-origin：0 0;

来源

2016-01-21 02:30:53 Gislef

帆布响应 - Fabricjs

回答

相关问题