[英]Draw multiple circles using paperJS
如何使用paperjs繪制多個圓圈? 我嘗試刪除path.removeOnDrag()
並在刪除fillcolor
后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>
這是一個簡單的解決方案: 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);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.