KineticJs - When dynamically creating rect, the rect behind it drags by itself

问题

In kineticjs I am creating dynamic rectangles that are draggable. However when I create a new rectangle, the rectangle behind it automatically drags. I dont want this to happen.

You can see the behaviour in demo at http://jsfiddle.net/sandeepy02/8kGVD/12/

Step 1: Choose "create rectangle" and create rectangles. Step 2: Choose "Move rectangle" and move the rectangles. Step 3: Choose "create rectangle" and create rectangles. This causes the rectangles previously created to also move. This is unwanted.

<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>

回答1:

Here is your updated function to fix the problem -

    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

来源：https://stackoverflow.com/questions/13757659/kineticjs-when-dynamically-creating-rect-the-rect-behind-it-drags-by-itself

标签

javascript

kineticjs