Fabricjs, Lines in group become blurry

问题

When rendering lines in a group, the more lines i have the blurrier the result becomes. For example in the snippet below i render 500 lines, and as you can see its not the 1px width i would expect.

Why is this? is my group to big or am i making another mistake?

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>

回答1:

The point is that fabricjs has a limit for maximum object size in pixels to avoid going too slow.

You have 2 chances:

1) disable cache and get a slow redraw ( 500 drawing operation per frame ) 2) enable a larger cache and hope the browser supports it.

reference: http://fabricjs.com/fabric-object-caching

EXAMPLE 1 DISABLE CACHE:

// 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>

EXAMPLE 2 LARGER CACHE:

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>

来源：https://stackoverflow.com/questions/47513180/fabricjs-lines-in-group-become-blurry

标签

javascript

fabricjs