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初始化

回答

相关问题