javascript - PaperJS 拖放圆圈

Question

我如何对使用onMouseDrag. 看小提琴

Answer 1

这是一个关于拖放的粗略演示的小提琴。一般来说，鼠标工具有两种模式；绘图和拖动。小提琴中的状态管理很弱，编写一个合适的鼠标工具需要对 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>