Fabricjs, линии в группе становятся размытыми

Question

Fabricjs, линии в группе становятся размытыми

1

При рендеринге строк в группе, чем больше строк, тем яснее будет размытие результата. Например, в фрагменте ниже я рисую 500 строк, и, как вы можете видеть, это не ширина 1px, которую я ожидал бы.

Почему это? моя группа большая или я делаю еще одну ошибку?

var canvas = new fabric.Canvas('c');
var lines = [];

for (var i = 0; i < 500; i++)
  lines.push(new fabric.Line([i * 20, 0, i * 20, 5000]));


var group = new fabric.Group(lines, {
  selectable: false,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  lockScalingX: true,
  lockScalingY: true,
  lockUniScaling: true,
  hoverCursor: 'auto',
  evented: false,
  stroke: 'red',
  strokeWidth: 1
});
canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c" width="5000" height="5000"></canvas>

Rutger 27 нояб. 2017, в 15:57

Источник

Теги:

javascript

fabricjs

1 ответ

Ещё вопросы

AndreaBogazzi · Accepted Answer · 2017-11-30T08-41-00.000Z

Дело в том, что у fabricjs есть предел для максимального размера объекта в пикселях, чтобы избежать слишком медленного.

У вас есть 2 возможности:

1) отключить кеш и получить медленное перерисовку (500 операций рисования на кадр) 2) включить большой кеш и надеяться, что браузер его поддерживает.

ссылка: http://fabricjs.com/fabric-object-caching

ПРИМЕР 1 ОТКЛЮЧАЮЩИЙСЯ КАЧЕСТВО:

// 500x20 gives us 10.000pix canvas.
//f

var canvas = new fabric.Canvas('c');
var lines = [];

for (var i = 0; i < 500; i++)
  lines.push(new fabric.Line([i * 20, 0, i * 20, 5000], { objectCaching: false}));


var group = new fabric.Group(lines, {
  selectable: false,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  lockScalingX: true,
  lockScalingY: true,
  lockUniScaling: true,
  hoverCursor: 'auto',
  evented: false,
  stroke: 'red',
  strokeWidth: 1,
  objectCaching: false,
});
canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c" width="5000" height="5000"></canvas>

ПРИМЕР 2 КРУГЛЫЙ КАТЕГ:

fabric.perfLimitSizeTotal = 225000000;
fabric.maxCacheSideLimit = 11000;

var canvas = new fabric.Canvas('c');
var lines = [];

for (var i = 0; i < 500; i++)
  lines.push(new fabric.Line([i * 20, 0, i * 20, 5000], { objectCaching: false}));


var group = new fabric.Group(lines, {
  selectable: false,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  lockScalingX: true,
  lockScalingY: true,
  lockUniScaling: true,
  hoverCursor: 'auto',
  evented: false,
  stroke: 'red',
  strokeWidth: 1,
  objectCaching: false,
});
canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c" width="5000" height="5000"></canvas>