fabric.jsのパフォーマンスを最適化する

Question

私は興味深い背景テクスチャを作るための小さなプログラムを書いています。それは私がそれを1つのことを除いて望む方法で動作します、それはコンピュータ上で非常に遅く/不安定であり、モバイル上ではアニメーションを表示しません。私がしようとしていることを達成するためのより良い方法があるのだろうかと思っています。

円のサイズが小さい場合や画面が大きい場合（オブジェクトが多数作成されている場合）は、チョップが特に悪くなります。ここで

はフィドルです：https://jsfiddle.net/cv6cgdja/12/ここ

var canvas = new fabric.StaticCanvas('c') 
var height = window.innerHeight 
var width = window.innerWidth 
var size = 35 
var strokeWidth = 2 
var strokeColor = '#c9db8e' 
var fill = 'transparent' 
var x = 0 
var y = 0 
var groups = [] 

canvas.setHeight(height) 
canvas.setWidth(width) 

while(y <= (height + (size*2))){ 
    while(x <= (width + (size*2))){ 
    var rotation = 0 
    switch(Math.floor(Math.random()*4)){ 
     case 1: rotation = 90; break; 
    } 

    var first = new fabric.Circle({ 
     left: 0, 
     top: 0, 
     radius: size, 
     startAngle: 0, 
     endAngle: Math.PI/2, 
     fill: fill, 
     strokeWidth: strokeWidth, 
     stroke: strokeColor 
    });  
    var second = new fabric.Circle({ 
     left: size *2 , 
     top: size*2, 
     radius: size, 
     startAngle: Math.PI, 
     endAngle: -Math.PI/2, 
     fill: fill, 
     strokeWidth: strokeWidth, 
     stroke: strokeColor 
    }); 

    var group = new fabric.Group([ first, second ], { 
     left: x - size, 
     top: y - size, 
     originX: 'center', 
     originY: 'center', 
     angle : rotation 
    }); 

    groups.push(group) 
    x += size * 2 
    } 
    x = 0 
    y += size * 2 
} 

function draw(){ 
    groups.forEach(function(g){ 
    canvas.add(g) 
    }) 
} 

draw() 

setInterval(function(){ 
    groups.forEach(function(g){ 
    var rotation = g.get('angle') 
    switch(Math.floor(Math.random()*32)){ 
     case 1: rotation = '+=90'; break; 
     case 1: rotation = '-=90'; break; 
    } 
    g.animate('angle', rotation, { 
     onChange: canvas.renderAll.bind(canvas), 
     duration: 250, 
     easing: fabric.util.ease.easeOut 
    }); 
    }) 
}, 800) 

Answer 1

あなたが行きます！ まず、startAngle、endAngleのすてきな使い方。

第2に、主な問題は各アニメーションに対してrenderAllをトリガーしていたことです。あなたが100グループを持っているなら、キャンバス/ jsは短時間フレーム（16ms）で100アニメーションを許容することができません。

この場合の解決方法は、アニメーションを動作させる（角度を変更する）ようにすることです。また、onChange関数では何も行いません。

次に、onChange関数のrenderAllで行う同じ期間で、1つのアニメーションを開始します。

あなたが別のレンダリングがalredy要求されましたが、私はいつも何が起こっているかのconsciuousアプローチを取ることを示唆している場合は任意の操作を実行していないrequestRenderAllを使用していたならば、この問題は、最新のベータリリースで解決オートただろう必要に応じてrenderAllを発砲してください。

var canvas = new fabric.StaticCanvas('c') 
 
var height = window.innerHeight 
 
var width = window.innerWidth 
 
var size = 50 
 
var strokeWidth = 2 
 
var strokeColor = '#c9db8e' 
 
var fill = 'transparent' 
 
var x = 0 
 
var y = 0 
 
var groups = [] 
 

 
canvas.setHeight(height) 
 
canvas.setWidth(width) 
 
while(y <= (height + (size*2))){ 
 
\t while(x <= (width + (size*2))){ 
 
    \t var rotation = 0 
 
    switch(Math.floor(Math.random()*4)){ 
 
    \t case 1: rotation = 90; break; 
 
    } 
 
    
 
    \t var first = new fabric.Circle({ 
 
     left: 0, 
 
     top: 0, 
 
     radius: size, 
 
     startAngle: 0, 
 
     endAngle: Math.PI/2, 
 
     fill: fill, 
 
     strokeWidth: strokeWidth, 
 
     stroke: strokeColor 
 
    });  
 
    var second = new fabric.Circle({ 
 
    \t \t left: size *2 , 
 
     top: size*2, 
 
     radius: size, 
 
     startAngle: Math.PI, 
 
     endAngle: -Math.PI/2, 
 
     fill: fill, 
 
     strokeWidth: strokeWidth, 
 
     stroke: strokeColor 
 
    }); 
 
    
 
    var group = new fabric.Group([ first, second ], { 
 
     left: x - size, 
 
     top: y - size, 
 
     originX: 'center', 
 
     originY: 'center', 
 
     angle : rotation 
 
    }); 
 
\t \t 
 
    groups.push(group) 
 
    \t x += size * 2 
 
    } 
 
    x = 0 
 
\t y += size * 2 
 
} 
 

 
function draw(){ 
 
    canvas.renderOnAddRemove = false; 
 
\t groups.forEach(function(g){ 
 
    \t canvas.add(g) 
 
    }) 
 
    canvas.renderOnAddRemove = true; 
 
    canvas.renderAll(); 
 
} 
 

 
draw(); 
 

 
setInterval(function(){ 
 
    groups.forEach(function(g){ 
 
    var rotation = g.get('angle') 
 
    switch(Math.floor(Math.random()*32)){ 
 
     case 1: rotation = '+=90'; break; 
 
     case 0: rotation = '-=90'; break; 
 
    } 
 
    g.animate('angle', rotation, { 
 
     onChange:() => {}, 
 
     duration: 250, 
 
     easing: fabric.util.ease.easeOut 
 
    }); 
 
    }) 
 
    groups[0].animate('nothing', 1000, { 
 
    duration: 250, 
 
    onChange: canvas.renderAll.bind(canvas) 
 
    }); 
 
}, 500)

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.js"></script> 
 
<canvas id='c'></canvas> 
 
<div> 
 
Hi there 
 
</div>