如何使用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>
答案 0 :(得分:0)
这是一个简单的解决方案: 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);
};