Javascript PaperJS拖放圆

如何对使用

onMouseDrag

绘制的圆应用拖放操作

带有拖放的粗略演示。通常，鼠标工具有两种模式；绘图和拖动。fiddle中的状态管理很弱，编写合适的鼠标工具需要对paper.js有更深入的了解

<script type="text/paperscript" canvas="canvas">
        var path = null;
        var circles = [];

        // Mouse tool state
        var isDrawing = false;
        var draggingIndex = -1;

        function onMouseDrag(event) {

            // Maybe hit test to see if we are on top of a circle
            if (!isDrawing && circles.length > 0) {
                for (var ix = 0; ix < circles.length; ix++) {
                    if (circles[ix].contains(event.point)) {
                        draggingIndex = ix;
                        break;
                    }
                }
            }

            // Should we be dragging something?
            if (draggingIndex > -1) {
                circles[draggingIndex].position = event.point;
            } else {
                 // We are drawing
                    path = new Path.Circle({
                        center: event.downPoint,
                        radius: (event.downPoint - event.point).length,
                        fillColor: null,
                        strokeColor: 'black',
                        strokeWidth: 10
                    });

                  path.removeOnDrag();
                  isDrawing = true;
            }
        };

        function onMouseUp(event) {
            if (isDrawing) {
                circles.push(path);
            }

            // Reset the tool state
            isDrawing = false;
            draggingIndex = -1;
        };
</script>
<canvas id="canvas"></canvas>

var path=null；
var循环=[]；
//鼠标工具状态
var isDrawing=错误；
变量DragginIndex=-1；
函数onMouseDrag（事件）{
//也许点击测试看看我们是否在圆的顶端
如果（！isDrawing&&circles.length>0）{
对于（var ix=0；ix-1）{
圆[DragginIndex]。位置=事件点；
}否则{
//我们正在画画
路径=新路径。圆({
中心：event.downPoint，
半径：（event.downPoint-event.point）。长度，
fillColor:null，
strokeColor:'黑色'，
冲程宽度：10
});
path.removeOnDrag（）；
isDrawing=true；
}
};
函数onMouseUp（事件）{
if（isDrawing）{
圆。推（路径）；
}
//重置刀具状态
isDrawing=false；
DragginIndex=-1；
};

这就是我需要的。我现在必须继续下一步，那就是调整圆的大小。你的演示给了我一些想法。非常感谢。