帆布響應 - 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

回答

相關問題