javascript - PaperJS ドラッグ アンド ドロップ円

Question

を使用して描画された円にドラッグ アンド ドロップを適用するにはどうすればよいですかonMouseDrag。 フィドルを見てください

Answer 1

これは、ドラッグアンドドロップの大まかなデモを含むフィドルです。一般に、マウス ツールには 2 つのモードがあります。描画とドラッグ。フィドルでの状態管理は弱く、適切なマウス ツールを作成するには、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>