首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用paperJS绘制多个圆

使用paperJS绘制多个圆
EN

Stack Overflow用户
提问于 2013-06-01 03:40:15
回答 1查看 2.4K关注 0票数 1

如何使用paperjs绘制多个圆?我试着删除path.removeOnDrag(),在删除fillcolor之后,它工作了,但输出不是预期的。

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-01 13:54:46

这里有一个简单的解决方案:http://jsfiddle.net/vupt3/1/

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

代码语言:javascript
复制
// 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);
};
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16864688

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档