спрей как инструмент производительности в paperjs

Question

Я пытаюсь закодировать спрей, как инструмент в paperjs, потому что рисунок должен быть SVG экспортируемым.

Код работает, но производительность ухудшается очень быстро. Есть ли способ имитировать экспортируемый спрей svg как инструмент с улучшенными характеристиками в paperjs или другой библиотеке?

<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: fixed gradient var scope, из-за предложения, но проблема сохраняется.

обновление2: правильное использование инструмента.

Answer 1

для SVG я предпочитаю http://snapsvg.io/
на экспорт SVG с помощью paper.js могли бы вы отключить AsString и проверить производительность, причиной может быть строка добавляется в DOM очень большой, которые производят это отставание

Answer 2

Поскольку все товары имеют в той же форме, вы должны использовать Symbols в Paper.js. Это значительно сокращает накладные расходы, потому что внутри этого же пути будут использоваться все отображаемые элементы.

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>