FabricJS: Большой холст вызывает отображение объектов на нижнем холсте, но на экране браузера не отображаются объекты - PullRequest
Новая
       7

FabricJS: Большой холст вызывает отображение объектов на нижнем холсте, но на экране браузера не отображаются объекты

0 голосов
/ 29 мая 2018

Я создал огромный холст и рендерил много объектов на холсте, используя FabricJS.Вроде нормально работает на хроме.Однако, когда я делаю то же самое в Mozilla FireFox, на экране не появляется никаких объектов.После осмотра элементов с помощью инструментов dev я вижу, что объекты были визуализированы на нижнем холсте, но на экране нет объектов.

JS Fiddle - <a href="https://jsfiddle.net/abhroy/pf1LxyaL/" rel="nofollow noreferrer">https://jsfiddle.net/abhroy/pf1LxyaL/</a>

Попробуйте использовать скрипку в Chrome и FireFox и измените размер холста на 6000 на 6000, используя JS, объекты отображаются в Chrome, но не в Firefox.Я хотел знать причину этого и каково решение для рендеринга объектов на FF, учитывая большой размер холста.Было бы лучше, если вы попробуете приведенный выше код на новых вкладках браузера вместо jsfiddle и осмотрите элементы.Я знаю, что использование больших полотен не является предпочтительным, но я пробовал конкретный случай.

1 Ответ

0 голосов
/ 29 мая 2018

При инициализации холста задайте ширину и высоту.Вот jsfiddle

DEMO 

function init() {
  var count = 0;
  canvas = new fabric.Canvas('c', {
    width: 1300,
    height: 1000
  });
  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 100,
    height: 100,
  });
  canvas.add(rect);
}
init();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.js"></script>
<body>
<div class="canvas-div">
	<canvas id="c" style="border:1px solid black"></canvas>
</div>
...