스프레이와 같은 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> 

루프 외부에서 만든 (기울기가 변경되지 않기 때문에) 모든 경로를 만드는 하나의 기울기가 하나의 참조