Fabric.js меняет размер холста до 300x150 после инициализации

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

Мой холст может быть изменен до 300x150 после его инициализации, почему?

Ответы

Ответ 1

в последней версии вам нужно будет сделать что-то вроде:

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

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

canvas.renderAll();

Прекрасно работает для меня.

Ответ 2

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

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

или

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

Ответ 3

Реальный ответ на этот вопрос, не связанный с новым статическим размером, но фактически позволяющий CSS быть эффективным, - это один из следующих вариантов:

  • В CSS вы можете переопределить отдельные свойства и следовать им с помощью! important; недостатком этого является то, что любые другие определения также должны использовать! важно или они будут проигнорированы:
[width], [height], [style]
{
  width:      100vw!important;
  min-height: 100vh!important;
}
  1. Используя JQuery, вы можете установить значения свойств inline в пустую строку. Вы можете предположить это без 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 будет применяться, как ожидалось.

Очевидно, также необходимо сообщить 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 на размер области просмотра и сохранить его соответствующим образом, если он изменит размер.

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

  • Кто-то подумал, что было бы неплохо использовать встроенные стили, и их следует строго критиковать, так как нет ситуации, когда это когда-либо будет подходящей практикой.

  • Ткань меняет расположение DOM и вставляет новый холст в новый div со вторым вложенным холстом, что может привести к неожиданностям.