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 DISABLEキャッシュ：

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