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 个群组之间共享一个圈子

使用“.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 回答