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 に対して実行すると、2 番目のグループが再びステージに対して 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 に答える