Question

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

从一些代码开始。我已经针对动力学库的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相对于舞台。如果您尝试单击此版本下的绿色方块，将显示该位置，然后sqaure将完全消失，不会抛出任何javascript错误。我有很多使用嵌套组的代码，当我尝试升级到4.3.1时会发生这种情况 - 如果组嵌套，当我点击它们时，事情就会消失。我在IE9和Firefox中尝试过这个结果相同的结果。

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

Answer 1

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

嵌套组不保持绝对位置

1 个答案: