Fabricjs，组中的行变得模糊 [英] Fabricjs, Lines in group become blurry

问题描述

当在一组中渲染线时，我越模糊的线结果就变得越模糊.例如，在下面的代码段中，我渲染了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> 

解决方案

要点是，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> 

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>

解决方案

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>

这篇关于Fabricjs，组中的行变得模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！