1

我在嵌套组周围发现了一些问题。

从一些代码开始。我已经针对动能库的 v4.2.0 和 4.3.1 尝试了此代码。每个版本都给了我不同的行为，但都不是正确的，所以我将描述两者。这是代码：

<script>

        var stage = new Kinetic.Stage({
            container: "container",
            x: 0,
            y: 0,
            width: 1000,
            height: 800
        });

        var layer = new Kinetic.Layer();
        stage.add(layer);

        var grp1 = new Kinetic.Group(
        {
            id: 'grp1',
            name: 'grp1',
            height: 100,
            width: 100,
            draggable: true
        });
        grp1.setAbsolutePosition(100, 100);

        var sqr1 = new Kinetic.Rect({
            x: 100,
            y: 100,
            width: 100,
            height: 100,
            fill: '#FFFFFF',
            stroke: '#000000',
            strokeWidth: .4,
            id: 'sqr1',
            name: 'sqr1'
        });
        grp1.add(sqr1);

        var grp2 = new Kinetic.Group(
        {
            id: 'grp2',
            name: 'grp2',
            height: 50,
            width: 50,
            draggable: true
        });
        grp2.setAbsolutePosition(110, 110);

        var sqr2 = new Kinetic.Rect({
            x: 110,
            y: 110,
            width: 50,
            height: 50,
            fill: '#FFFFFF',
            stroke: '#00FF00',
            strokeWidth: .4,
            id: 'sqr2',
            name: 'sqr2'
        });

        grp2.add(sqr2);
        grp1.add(grp2);

        layer.add(grp1);

        grp2.on('click', function (evt) {
            var pos = grp2.getAbsolutePosition();
            alert(pos.x + ', ' + pos.y);
        });

        layer.draw();
</script>

如果您针对 v4.2.0 运行此程序，您将看到 grp2 不是放置在相对于舞台的 110、110 处，而是相对于舞台放置在 210、210 处（单击绿色方块以查看它的位置）。我尝试删除 setAbsolutePosition 调用，然后它会正确绘制组，但是如果您拖动组然后再次单击绿色方块，您将看到该位置现在相对于嵌套组的初始位置，而不是阶段。

如果您针对 v4.3.1 运行上述代码，您将看到第二组再次放置在相对于舞台的 210、210 处。如果您尝试单击此版本下的绿色方块，则会显示该位置，然后该方块将完全消失，不会引发任何 javascript 错误。我有很多使用嵌套组的代码，当我尝试升级到 4.3.1 时，到处都会发生这种情况 - 如果组是嵌套的，当我单击它们时，事情就会消失。我在 IE9 和 Firefox 中尝试过，结果相同。

有没有人对如何获得嵌套组的正确绝对位置有任何建议？

4

1 回答 1

0

http://jsfiddle.net/tbYLe/2/

您必须为您的组“dragOnTop”添加一个额外的属性（与 4.3.1 一起使用）

    var grp1 = new Kinetic.Group(
    {
        id: 'grp1',
        name: 'grp1',
        height: 100,
        width: 100,
        draggable: true,
        dragOnTop: false   //<-- right here is what you need, add this to your other group too
    });

这可以防止元素在拖动时被放置在新图层中，并将解决您消失的正方形问题。

关于绝对位置：

您需要在嵌套组之后设置绝对位置，而不是在创建它们之后。看一看：

    grp1.add(sqr1);
    grp2.add(sqr2);

    grp1.add(grp2);                      //nested groups

    grp1.setAbsolutePosition(100, 100);  //set absolute position after nesting groups
    grp2.setAbsolutePosition(110, 110);  //set absolute position after nesting groups

    layer.add(grp1);
于 2013-02-06T19:32:34.447 回答