Javascript 初始化后，Fabric.js 将我的画布大小更改为 300x150
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10581460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fabric.js changes my canvas size to 300x150 after initialization
提问by user469652
HTML:
HTML：
<div class="canvas-wrapper">
<canvas id="myCanvas"></canvas>
</div>
CSS
CSS
.canvas-wrapper {
width: 900px;
min-height: 600px;
}
#myCanvas{
border:1px solid red;
position: absolute;
top:22px;
left:0px;
height: 100%;
width: 99%;
}
JS
JS
var myCanvas = new fabric.Canvas('myCanvas');
My canvas get resized to 300x150 after it's been initialized, why?
我的画布在初始化后被调整为 300x150，为什么？
回答by Smit
in the latest version, you will have to do something like:
在最新版本中，您必须执行以下操作：
var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);
.... Your code ....
.... 你的代码....
canvas.renderAll();
Works fine for me..
对我来说很好用..
回答by kangax
When initializing canvas, Fabric reads width/height attributes on canvas element or takes width/height passed in options.
初始化画布时，Fabric 读取画布元素上的宽度/高度属性或获取选项中传递的宽度/高度。
var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 });
or:
或者：
<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');
回答by Asher
A real answer to this question—not involving a new static size but actually permitting CSS to be effective—is one of the following options:
这个问题的真正答案——不涉及新的静态大小，但实际上允许 CSS 有效——是以下选项之一：
- In CSS, you can override individual properties and following them with !important; the downside to this is that any further definitions must also use !important or they will be ignored:
- 在 CSS 中，您可以覆盖单个属性并使用 !important; 跟随它们。这样做的缺点是任何进一步的定义也必须使用 !important 否则它们将被忽略：
[width], [height], [style]
{
width: 100vw!important;
min-height: 100vh!important;
}
- Using JQuery you can set the inline property values to an empty string. You can presumably achieve this without JQuery, but I will leave that as an exercise to you.
- 使用 JQuery，您可以将内联属性值设置为空字符串。您大概可以在没有 JQuery 的情况下实现这一点，但我将把它留给您作为练习。
Javascript (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:
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;
}
After that, CSS will be applied as expected.
之后，CSS 将按预期应用。
It is apparently also necessary to tell Fabric about the change:
显然也有必要将变化告诉 Fabric：
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();
This will configure Fabric to the viewport size and keep it sized accordingly if it resizes.
这会将 Fabric 配置为视口大小，并在调整大小时相应地保持其大小。
It's worth noting that this problem arises for two reasons:
值得注意的是，出现这个问题的原因有两个：
Someone thought it was a good idea to use inline styles and should be severely castigated, as there is no situation where this is ever an appropriate practice.
Fabric changes the DOM arrangement and nests the original canvas in a new div with a second nested canvas, which may result in surprises.
有人认为使用内联样式是个好主意，应该受到严厉谴责，因为在任何情况下这都是合适的做法。
Fabric 更改了 DOM 排列并将原始画布嵌套在具有第二个嵌套画布的新 div 中，这可能会导致意外。
