Question

我正在使用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();
        }

Answer 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个组之间移动圆圈。

KineticJS在两组之间共享一个对象

1 个答案: