javascript - PaperJS 拖放圆形

Question

如何对使用 onMouseDrag 绘制的圆应用拖放操作。 Look at the fiddle

Answer 1

Here is a fiddle带有拖放的粗略演示。通常，鼠标工具有两种模式；绘图和拖动。 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>