Fabric.js ändert meine Leinwand Größe 300x150 nach der Initialisierung

Question

HTML:

<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%; 
} 

JS

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

Meine Leinwand 300x150 Größe verändert erhalten, nachdem es gewesen ist initialisiert, Warum?

Answer 1

in der neuesten Version, werden Sie so etwas wie zu tun haben:

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

.... Ihr Code ....

canvas.renderAll(); 

Funktioniert gut für mich ..

Answer 2

Beim Initialisieren der Zeichenfläche liest Fabric Breiten-/Höhenattribute auf einem Canvas-Element oder übernimmt Breite/Höhe in Optionen.

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

oder:

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

Answer 3

Eine wirkliche Antwort auf diese Frage, nicht eine neue statische Größe beteiligt, sondern tatsächlich CSS zu sein, um wirksam-ist eine der folgenden Optionen:

1. In CSS Sie einzelne Eigenschaften und sie mit folgenden außer Kraft setzen können! wichtig; der Nachteil ist, dass alle weiteren Definitionen auch verwenden müssen, wichtig oder sie werden ignoriert:

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

1. JQuery Verwenden Sie die Inline-Eigenschaftswerte in einen leeren festlegen Zeichenfolge. Das kannst du vermutlich ohne JQuery erreichen, aber ich überlasse es dir als Übung.

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; 
} 

Danach wird CSS wie erwartet angewendet werden.

Es ist offensichtlich auch notwendig Stoff über die Änderung zu sagen:

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(); 

Dieser Stoff auf die Darstellungsgröße konfigurieren und halten sie entsprechend dimensioniert, wenn es die Größe.

Es ist erwähnenswert, dass dieses Problem aus zwei Gründen entsteht:

1. Jemand dachte, es war eine gute Idee Inline-Stile zu verwenden und strengstens bestraft werden sollte, da es keine Situation, in der dies jemals eine angemessene trainieren.

2. Fabric ändert die DOM-Anordnung und fügt die ursprüngliche Zeichenfläche in einem neuen div mit einer zweiten verschachtelten Zeichenfläche ein, was zu Überraschungen führen kann.