Fabricjs，组中的线条变得模糊

Question

在组中渲染线条时，线条越多，结果就越模糊。例如，在下面的代码片段中，我渲染了 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>

Answer 1

关键是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>