0

KineticJSを使用して、垂直線と水平線、および中央に円を描画しています。垂直線と円をグループ化しましたが、水平線と一緒に円も移動したいと思います。スクリプトは次のとおりです。

var stage1 = new Kinetic.Stage({
                container: 'container',
                width: 1024,
                height: 1024
            });
              var blayer1 = new Kinetic.Layer();
            var bgroup1 = new Kinetic.Group({
                draggable: true,
                dragBoundFunc: function (pos) {
                    return {
                        x: pos.x,
                        y: this.getAbsolutePosition().y
                    }
                }
            });
            var BlueLine1 = new Kinetic.Line({
                points: [512, 0, 512, 1024],
                stroke: '#0080c0',
                strokeWidth: 2,
                lineCap: 'round',
                lineJoin: 'round'
            });
            var circle = new Kinetic.Circle({
                x: stage1.getWidth() / 2,
                y: stage1.getHeight() / 2,
                radius: 140,
                stroke: '#00ffff',
                strokeWidth: 2
            });
            bgroup1.add(circle);
            bgroup1.add(BlueLine1);
            blayer1.add(bgroup1);
            stage1.add(blayer1);
            blayer1.draw();

            var glayer1 = new Kinetic.Layer();
            var ggroup1 = new Kinetic.Group({
                draggable: true,
                dragBoundFunc: function (pos) {
                    return {
                        x: this.getAbsolutePosition().x,
                        y: pos.y
                    }
                }
            });
            var GreenLine1 = new Kinetic.Line({
                points: [0, 512, 1024, 512],
                stroke: 'red',
                strokeWidth: 2,
                lineCap: 'round',
                lineJoin: 'round'
            });
            ggroup1.add(GreenLine1);
            glayer1.add(ggroup1);
            stage1.add(glayer1);
            glayer1.draw();
        }
4

1 に答える 1

0

2つのグループ間で1つのサークルを共有する方法は次のとおりです

「.moveTo（）」を使用して、必要なグループに円を移動します。

これにより、円がggroup1に移動し、ggroup1に垂直線と円が追加されます。

circle.moveTo(ggroup1);
blayer1.draw();
glayer1.draw();

これにより、円がbgroup1に移動し、bgroup1に水平線と円が追加されます。

circle.moveTo(bgroup1);
blayer1.draw();
glayer1.draw();

ところで、2つの別々のレイヤーを使用しているようです。2つのレイヤーの目的はあなたがしている他の何かのためだと思います。ただし、サークル共有を可能にするために2つのレイヤーは必要ありません。1つのレイヤーに2つのグループを配置しても、2つのグループ間で円を移動するだけです。

于 2013-03-17T18:57:16.443 に答える