Question

在kineticjs中，我正在创建可拖动的动态矩形。但是当我创建一个新的矩形时，它后面的矩形会自动拖动。我不希望这种情况发生。

您可以在http://jsfiddle.net/sandeepy02/8kGVD/12/

中看到演示中的行为

步骤1：选择“创建矩形”并创建矩形。第2步：选择“移动矩形”并移动矩形。第3步：选择“创建矩形”并创建矩形。这会导致先前创建的矩形也移动。这是不受欢迎的。

<html>
    <head>
        <script>
function valButton(radios) {
    var btn = document.getElementsByName(radios);
    var cnt = -1;
    for (var i = btn.length - 1; i > -1; i--) {
        if (btn[i].checked) {
            cnt = i;
            i = -1;
        }
    }
    if (cnt > -1) return btn[cnt].value;
    else return null;
}

window.onload = function() {
    layer = new Kinetic.Layer();
    stage = new Kinetic.Stage({
        container: "container",
        width: 320,
        height: 320
    });
    background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: stage.getWidth(),
        height: stage.getHeight(),
        fill: "white"
    });


    layer.add(background);
    stage.add(layer);

    moving = false;

    stage.on("mousedown touchstart", function() {
        var btnName = valButton("group2");
        if (btnName == "1") {
            if (moving) {
                moving = false;
                layer.draw();
            } else {
                var mousePos = stage.getMousePosition();
                rect = new Kinetic.Rect({
                    x: 22,
                    y: 7,
                    width: 0,
                    height: 0,
                    fill: 'red',
                    stroke: 'black',
                    strokeWidth: 4,
                    draggable: true
                });
                layer.add(rect);
                //start point and end point are the same
                rect.setX(mousePos.x);
                rect.setY(mousePos.y);
                rect.setWidth(0);
                rect.setHeight(0);
                moving = true;
                layer.drawScene();
            }
        }
        document.all.text.innerText = btnName +" "+moving;

    }); //end of mousedown
    stage.on("mousemove touchmove", function() {
        var btnName = valButton("group2");
        if (btnName == "1") {
            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();
            }
        }
        else if (btnName == "3") {
            layer.draw();
        }
        document.all.text.innerText = btnName +" "+moving;
    }); //end of mousemove
    stage.on("mouseup touchend", function() {
        var btnName = valButton("group2");
        if (btnName == "1") {
            moving = false;
        }
        document.all.text.innerText = btnName +" "+moving;
    }); //end of mouseup
};
        </script>
    </head>
    <body>

        <h2>Toggle buttons</h2>
<div class="toggle-btn-grp">
    <label onclick="" class="toggle-btn"><input type="radio" value="1" name="group2"/> Create Rectangle</label>
    <label onclick="" class="toggle-btn"><input type="radio" value="3" name="group2"/>Move Rectangle</label>
</div>

        <div id="container" ></div>
                <div id="text" >abc</div>

    </body>
</html>

Answer 1

这是您更新的解决问题的功能 -

    stage.on("mousedown touchstart", function() {
    var btnName = valButton("group2");
    if (btnName == "Create") {
        if (moving) {
            moving = false;
            layer.draw();
        } else {
            var mousePos = stage.getMousePosition();
            rect = new Kinetic.Rect({
                x: 0,
                y: 0,
                width: 0,
                height: 0,
                fill: 'red',
                stroke: 'black',
                strokeWidth: 4,
                draggable: true
            });
            layer.add(rect);
            //start point and end point are the same
            rect.setX(mousePos.x);
            rect.setY(mousePos.y);
            rect.setWidth(0);
            rect.setHeight(0);
            moving = true;
            rect.on("mousemove touchmove", function() {
                var btnName = valButton("group2");
                if (btnName == "Create") {
                    this.setDraggable(false);
                }
                else if (btnName == "Move") {
                    this.setDraggable(true);
                }
                document.all.text.innerText = btnName +" rect move MovingFlag: "+moving;
            }); //end of rect mousemove
            layer.drawScene();
        }
    }
    document.all.text.innerText = btnName +" MovingFlag: "+moving;

}); //end of mousedown

KineticJs - 当动态创建rect时，它背后的矩形会自动拖动

1 个答案: