使用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); };更多推荐
发布评论