1

私はKineticJSで簡単なペイントプログラムに取り組んでいます。私が達成しなければならないのは、マウスの動きで長方形、線、または円を描くことであり、描かれた形状はマウスでドラッグまたはサイズ変更できます。私の問題は、描画を行うためmousedownにmousemoveイベントを使用する必要があることですが、ドラッグアンドドロップまたはサイズ変更を同時に行うことはできません。

図面のコードは次のとおりです。

stage.on("mousedown", function() {
    if ((drawFlag == 1) && (dragFlag == 0)) {
        if (moving) {
            moving = false;
            layer.draw();
        } else {
            var mousePos = stage.getMousePosition();
            line = new Kinetic.Line({
                points: [0, 0, 50, 50],
                stroke: "red"
            });
            layer.add(line);

            line.getPoints()[0].x = mousePos.x;
            line.getPoints()[0].y = mousePos.y;
            line.getPoints()[1].x = mousePos.x;
            line.getPoints()[1].y = mousePos.y;

            moving = true;
            layer.drawScene();
        }
    }

    if ((drawFlag == 2) && (dragFlag == 0)) {
        if (moving) {
            moving = false;
            layer.draw();
        } else {
            var mousePos = stage.getMousePosition();
            rect = new Kinetic.Rect({
                x: 20,
                y: 20,
                fill: "red",
                stroke: "black",
                strokeWidth: 2,
                draggle: true,
                width: 0,
                height: 0
            });

            rect.setX(mousePos.x);
            rect.setY(mousePos.y);
            rect.setWidth(0);
            rect.setHeight(0);

            moving = true;
            layer.drawScene();



            layer.add(rect);

            Rects.push(rect);
        }
    }
});

stage.on("mousemove", function() {
    if ((drawFlag == 1) && (dragFlag == 0)) {
        if (moving) {
            var mousePos = stage.getMousePosition();
            var x = mousePos.x;
            var y = mousePos.y;
            line.getPoints()[1].x = mousePos.x;
            line.getPoints()[1].y = mousePos.y;
            moving = true;
            layer.drawScene();
        }
    }
    if ((drawFlag == 2) && (dragFlag == 0)) {
        if (moving) {
            var mousePos = stage.getMousePosition();
            var x = mousePos.x;
            var y = mousePos.y;
            rect.setWidth(mousePos.x - rect.getX());
            rect.setHeight(mousePos.y - rect.getY());
            moving = true;
            layer.drawScene();
        }
    }
});

stage.on("mouseup", function() {
    moving = false;
});

長方形を描いた後、それをクリックすると、マウスの動きでドラッグされるはずです。しかし、私のプログラムでは、描画された長方形をクリックすると、ドラッグする代わりに別の長方形が描画されます。そこで、dragFlagを使用して、描画しているかドラッグしているかを示しました。そして、関数を使用して、マウスカーソルが描画された長方形のいずれかにあるかどうかを確認します。

for (var n = 0; n < Rects.length; n++) {
    (function() {
        Rects[n].on('mouseover', function() {
            dragFlag = 1;
            document.body.style.cursor = "pointer";
        });

        Rects[n].on('mouseout', function() {
            dragFlag = 0;
            document.body.style.cursor = "default";
        });
        if (dragFlag == 1) {
            Rects[n].on("dragstart", function() {
                Rects[n].moveToTop();
                layer.draw();
            });

            Rects[n].on("dragmove", function() {
                document.body.style.cursor = "pointer";
            });
        }

    });

しかし、それは機能しません。マウスカーソルの位置を確認できないため、描画した長方形をクリックしながら新しい長方形を描画し続けています。マウスの動きで描画し、描画された図形をドラッグアンドドロップする方法を知っている人はいますか？

私はあなたの助けに感謝します。

4

1 に答える 1

2

まず、次のような単純なものでデバッグしてみてください。

Rects[n].on('mouseover', function() {
    dragFlag = 1;
    alert('mouse over rectangle'); //check if event fired
    document.body.style.cursor = "pointer";
});

本当の問題は、ロジックが複雑かつ高速になっていることです。ロジックを単純化してリファクタリングする必要があります。

ペイントについて考えてみましょう。選択ツールを使用したり、線ツールや長方形ツールを使用したりできます。これは、ステージ上のイベントではなく、ユーザーがいるモードによって決定されます。

したがって、ボタンがクリックされるたびに、ボタンを作成し、各イベントに関数をデタッチ/再アタッチする必要があります。

例

drawLineButton.on('click', function() {
    stage.off(); // or whatever function to remove other events from stage
    stage.on('mousedown', function() {
        draw line logic
    });
});

drawRectButton.on('click', function() {
    stage.off(); // or whatever function to remove other events from stage
    stage.on('mousedown', function() {
        draw rectangle logic
    });
});

dragButton.on('click', function() {
    stage.off(); // or whatever function to remove other events from stage
    // now you dont have to worry about stage events firing and can drag shapes
});
于 2013-03-21T20:26:23.847 に答える