Fabric.js改變我的畫布大小300x150初始化

HTML後：Fabric.js改變我的畫布大小300x150初始化

<div class="canvas-wrapper"> 
    <canvas id="myCanvas"></canvas> 
    </div>

CSS

.canvas-wrapper { 
    width: 900px; 
    min-height: 600px; 
} 

#myCanvas{ 
    border:1px solid red; 
    position: absolute; 
    top:22px; 
    left:0px; 
    height: 100%; 
    width: 99%; 
}

var myCanvas = new fabric.Canvas('myCanvas');

它被初始化後，我的畫布得到調整爲300x150，爲什麼？

來源

2012-05-14 user469652

我在這裏添加了失敗的測試http://jsfiddle.net/QcZ54/ – user469652

在最新版本

，你將不得不做這樣的事情：

var canvas = new fabric.Canvas('myCanvas'); 
canvas.setHeight(500); 
canvas.setWidth(800);

....你....代碼

canvas.renderAll();

適合我工作..

來源

2013-01-09 10:51:43 Smit

這是迄今爲止我發現的最簡單的方法。 –

您應該在最後添加以重新計算所有對象位置： canvas.calcOffset（）; –

如何將畫布設置爲父組件的寬度和高度的100％？我不明白爲什麼這是非常困難的，以至於其他任何尊重100％CSS屬性和每個答案的組件都只顯示如何設置爲固定的寬度/高度。 – krb686

當初始化畫布時，Fabric讀取畫布元素上的寬度/高度屬性，或者傳遞選項中傳遞的寬度/高度。

var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 });

或：

<canvas width="900" height="600"></canvas> 
... 
var myCanvas = new fabric.Canvas('myCanvas');

來源

2012-05-15 10:38:51 kangax

似乎我們必須這樣做。 – user469652

@kangax，我在我的頁面上有多個畫布元素，並且所有這些元素都在運行時用一些js計算來定位。用戶也可以添加更多的畫布元素。創建fabric.canvas（「canvas1」）使他們失去了自己的位置。我試過了，如你所建議的： $ jArtB = $（「＃」+ artB）; c = new fabric.Canvas（''+ artB，{ width：$ jArtB.width（）， height：$ jArtB.height（）， left：parseInt（$ jArtB.css（「left」））， top：parseInt（$ jArtB.css（「top」）） }）; '。但是這也不起作用。 – ScorpionKing2k5

有沒有一種有效的方法如何調整畫布大小以適應使用fabric.Image.fromURL加載的圖像尺寸？謝謝 – tomexx

一個真正的回答這個問題，不涉及一個新的靜態大小，但實際上允許CSS是有效的，是下列選項之一：

在CSS中，可以覆蓋各個屬性，並跟隨他們！重要;這樣做的缺點是，任何進一步的定義也必須使用很重要，否則將被忽略：

[width], [height], [style] 
{ 
    width:  100vw!important; 
    min-height: 100vh!important; 
}

使用jQuery，您可以設置內嵌的屬性值設置爲空串。你大概可以在沒有JQuery的情況下實現這一點，但我將把它作爲一個練習留給你。

使用Javascript（JQuery的）：

$('[style]').attr( 'style', function(index, style){ return ''; }); 
$('[height]').attr('height', function(index, height){ return ''; }); 
$('[width]').attr( 'width', function(index, height){ return ''; });

CSS：

*, *:before, *:after 
{ 
    box-sizing: border-box; 
} 

body 
{ 
    width:  100vw; 
    min-height: 100vh; 
    padding: 0; 
    margin:  0; 
} 

.canvas-container, 
canvas 
{ 
    width:  inherit; 
    min-height: inherit; 
} 

canvas.lower-canvas 
{ 
    position: absolute; 
    top:  0; 
}

後，如預期的CSS將被應用。

這顯然也是必要告訴面料有關的變化：

function sizeCanvas() 
{ 
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
    var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 
    canvas.setHeight(height) 
    canvas.setWidth(width) 
} 

window.addEventListener('resize', draw, false); 

function initDraw() 
{ 
    // setup 
} 

function draw() 
{ 
    canvas.renderAll(); 
} 

sizeCanvas(); 
initDraw();

這將配置面料視口大小，並保持相應的大小，如果它會調整。

值得一提的是，這個問題出現的原因有兩個：

有人認爲這是使用內聯樣式是一個好主意，並應從重嚴懲，因爲沒有情況下，這是以往任何時候都合適實踐。
Fabric更改DOM排列，並將原始畫布嵌套在新的div中，第二個嵌套畫布可能會導致意外。

來源

2017-10-05 19:17:13 Asher

Fabric.js改變我的畫布大小300x150初始化

回答

相關問題