使用paperJS绘制多个圆圈(Draw multiple circles using paperJS)

使用paperJS绘制多个圆圈(Draw multiple circles using paperJS)

如何使用paperjs绘制多个圆圈？ 我尝试删除path.removeOnDrag()它的工作原理和删除fillcolor ，但输出不是预期的。

<script type="text/paperscript" canvas="canvas"> function onMouseDrag(event) { // The radius is the distance between the position // where the user clicked and the current position // of the mouse. var path = new Path.Circle({ center: event.downPoint, radius: (event.downPoint - event.point).length, fillColor: null, strokeColor: 'black', strokeWidth: 10 }); // Remove this path on the next drag event: path.removeOnDrag(); }; </script>

How can I draw multiple circles using paperjs? I tried removing path.removeOnDrag() it works and after removing fillcolor, but the output is not as expected.

<script type="text/paperscript" canvas="canvas"> function onMouseDrag(event) { // The radius is the distance between the position // where the user clicked and the current position // of the mouse. var path = new Path.Circle({ center: event.downPoint, radius: (event.downPoint - event.point).length, fillColor: null, strokeColor: 'black', strokeWidth: 10 }); // Remove this path on the next drag event: path.removeOnDrag(); }; </script>

最满意答案

这是一个简单的解决方案： http ： //jsfiddle.net/vupt3/1/

因此，在mouseUp上，您只需将当前绘制的路径存储到数组中。 然后，如果需要，您可以稍后访问和操作这些环。

// path we are currently drawing var path = null; // array to store paths (so paper.js would still draw them) var circles = []; function onMouseDrag(event) { // The radius is the distance between the position // where the user clicked and the current position // of the mouse. path = new Path.Circle({ center: event.downPoint, radius: (event.downPoint - event.point).length, fillColor: null, strokeColor: 'black', strokeWidth: 10 }); // Remove this path on the next drag event: path.removeOnDrag(); }; function onMouseUp(event) { // if mouseUp event fires, save current path into the array circles.push(path); };

Here an easy solution: http://jsfiddle.net/vupt3/1/

So on mouseUp you just store the currently drawn path into the array. Then also if you need to, you can access and manipulate those rings later on.

// path we are currently drawing var path = null; // array to store paths (so paper.js would still draw them) var circles = []; function onMouseDrag(event) { // The radius is the distance between the position // where the user clicked and the current position // of the mouse. path = new Path.Circle({ center: event.downPoint, radius: (event.downPoint - event.point).length, fillColor: null, strokeColor: 'black', strokeWidth: 10 }); // Remove this path on the next drag event: path.removeOnDrag(); }; function onMouseUp(event) { // if mouseUp event fires, save current path into the array circles.push(path); };