paperjsのスプレーのようなツールの性能

Question

私は図面を書き出し可能でなければならないので、paperjsにスプレーのようなツールをコーディングしようとしています。

コードは機能していますが、パフォーマンスが非常に悪くなります。 paperjsや別のライブラリのパフォーマンスが向上したSVGエクスポート可能なスプレーのようなツールを模倣する方法はありますか？

<script type="text/paperscript" canvas="canvas"> 

var path; 
var gradient = { 
    stops: [ 
     ['rgba(0,0,0,1)', 0], 
     ['rgba(0,0,0,0.5)', 0.5], 
     ['rgba(0,0,0,0)', 1] 
    ], 
    radial: true 
}; 

tool.minDistance = 5; 
tool.maxDistance = 5; 

function onMouseDown(event) { 
} 

function onMouseDrag(event) { 

    path = new Path.Circle({ 
     center: event.point, 
     radius: 10 
    }); 

    path.fillColor = { 
     gradient: gradient, 
     origin: path.position, 
     destination: path.bounds.rightCenter 
    }; 

} 

function onMouseUp(event) { 
} 

document.getElementById('button').addEventListener('click', function() { 

    var svg = project.exportSVG({ asString: true }); 

    console.log('data:image/svg+xml;base64,' + btoa(svg)); 

}); 

</script> 

update1：​​提案のため、固定のグラデーションの範囲ですが、問題は解決しません。

update2：ツールの適切な使用。 SVGのため

Answer 1

私はあなたがasStringを無効にし、パフォーマンスをチェックすることができpaper.jsを使用して、輸出SVGのためhttp://snapsvg.io/
好む、原因は、文字列は、この遅れ

Answer 2

すべてのアイテムがあるのでを生み出す非常に大きなDOMに追加することができます同じ形状の場合は、Paper.jsにSymbolsを使用してください。これにより、内部的にすべての表示アイテムに同じパスが使用されるため、オーバーヘッドが大幅に削減されます。

Here is a Sketch to try

そしてここでは、シンボルを使用してコードです：

<script type="text/paperscript" canvas="canvas"> 

var gradient = { 
    stops: [ 
     ['rgba(0,0,0,1)', 0], 
     ['rgba(0,0,0,0.5)', 0.5], 
     ['rgba(0,0,0,0)', 1] 
    ], 
    radial: true 
}; 

tool.minDistance = 5; 
tool.maxDistance = 5; 

var blurredCircle = new Path.Circle({ 
    center: [0, 0], 
    radius: 10, 
    insert: false 
}); 

blurredCircle.fillColor = { 
    gradient: gradient, 
    origin: blurredCircle.position, 
    destination: blurredCircle.bounds.rightCenter 
}; 

var blurredCircleDef = new SymbolDefinition(blurredCircle); 


function onMouseDown(event) { 
} 

function onMouseDrag(event) { 
    new SymbolItem(blurredCircleDef, event.point); 
} 

function onMouseUp(event) { 
} 

document.getElementById('button').addEventListener('click', function() { 

    var svg = project.exportSVG({ asString: true }); 

    console.log('data:image/svg+xml;base64,' + btoa(svg)); 

}); 

</script> 

ループの外で作成された（傾きが変化しないため）とすべてのパスを作る一つの勾配はその単一の参照