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对像素的最大尺寸有限制，以避免太慢。

你有两次机会：

1）禁用缓存并获得慢速重绘（每帧500次绘图操作） 2）启用更大的缓存，并希望浏览器支持它。

参考：http://fabricjs.com/fabric-object-caching

示例1禁用缓存：

＆＃13;

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

＆＃13;

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

＆＃13;

示例2 LARGER CACHE：

＆＃13;

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

＆＃13;

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

＆＃13;

Fabricjs，组中的线条变得模糊

1 个答案: