Вопрос по javascript, canvas – Fabric.js меняет размер холста на 300x150 после инициализации

35

HTML:

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

CSS

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

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

JS

<code>var myCanvas = new fabric.Canvas('myCanvas');
</code>

Размер моего холста после инициализации изменился до 300x150, почему?

Я добавил провал тест здесьjsfiddle.net/QcZ54 user469652

Ваш Ответ

3   ответа
23

Fabric считывает атрибуты ширины / высоты в элементе canvas или принимает ширину / высоту, переданные в параметрах.

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

или же:

<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');
@kangax, у меня есть несколько элементов canvas на моей странице, и все они расположены во время выполнения с некоторым подсчетом js. Пользователь также может добавить больше элементов холста. Создание fabric.canvas (& quot; canvas1 & quot;) заставляет их терять свою позицию. Я попробовал, как вы предложили: $ jArtB = $ (& quot; # & quot; + artB); c = новая fabric.Canvas ("+" artB, {width: $ jArtB.width (), высота: $ jArtB.height (), слева: parseInt ($ jArtB.css ("left")), вверху : parseInt ($ jArtB.css (& quot; top & quot;))}); `. Но это тоже не работает.
Есть ли эффективный способ изменить размер холста в соответствии с размерами изображения, загружаемого с использованием fabric.Image.fromURL? Спасибо
Похоже, мы должны это сделать. user469652
-1

ром, но фактически разрешающий использование 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:
[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.

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 будет применен, как и ожидалось.

По-видимому, также необходимо сообщить 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();

Это настроит Fabric на размер области просмотра и сохранит его соответствующим образом, если он изменит размер.

Стоит отметить, что эта проблема возникает по двум причинам:

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.

53

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

.... Ваш код ....

canvas.renderAll();

Работает нормально для меня ..

Вы должны добавить это в конце, чтобы пересчитать все позиции объектов: canvas.calcOffset ();
Как я могу установить холст на 100% ширину и высоту родительского компонента? Я не понимаю, почему это намного сложнее, чем любой другой компонент, который учитывает атрибуты 100% css, и каждый ответ просто показывает, как установить фиксированную ширину / высоту.
Это, безусловно, самый простой способ, который я нашел для этого.

Похожие вопросы