0

在另一个 stackoverflow 用户的帮助下，我可以使用以下命令更改舞台上两条线和一个圆圈的位置：

                   var circle2 = new Kinetic.Circle({
                    drawFunc: function(canvas) {
                        var context2 = canvas.getContext();
                        var centerX2 = blueLine2.getPosition().x;
                        centerY2 = greenLine2.getPosition().y;
                        context2.drawImage(gArrow2, -156, -23 + centerY2, 11, 23);
                        context2.drawImage(gArrow2, 156, -23 + centerY2, 11, 23);
                        context2.drawImage(bArrow2, centerX2, 156, 23, 11);
                        context2.drawImage(bArrow2, centerX2, -156, 23, 11);  
                        context2.beginPath();
                        context2.arc(centerX2, centerY2, this.getRadius(), 0, 2 * Math.PI, false);
                        context2.lineWidth = this.getStrokeWidth();
                        context2.strokeStyle = this.getStroke();
                        context2.stroke();
                    },
                    x: cx + gx,
                    y: cy + gy,
                    radius: 70,
                    stroke: '#00ffff',
                    strokeWidth: 3,
                    opacity: 0.5
                });
                layer2.add(circle2);

效果很好，现在我的挑战是如果我在第二阶段移动一条线，例如水平线，我还可以使用以下方法在第一阶段移动水平线：

        greenLine2.on('dragend', function (event) {
        var y1 = greenLine2.getPosition().y;
        greenLine3.setPoints([0, 256 + y1, 512, 256 + y1]);
        centerY3 = 256 + y1;
        layer3.draw();
        layer2.draw();
    });

但是我无法更新图层以移动垂直线和圆圈。我会很感激你的建议，在此先感谢。

4

1 回答 1

1

假设 greenLine2 是您要移动的那个，并且您希望 greenLine3 移动到另一个舞台上的相同位置。我将假设这些阶段的大小相同，但您可以更改代码以解决这些更改。

 greenLine2.on('dragmove', function (event) {
    var userPos = stage.getUserPosition();  //if this doesnt work the way you need, try a different approach, such as below:
    //var userPos = greenLine.getPosition(); //other possibility
    greenLine3.setPosition(userPos);
    layer3.draw();
    layer2.draw();
 });

如果您还希望其他东西移动，您可以使用带有一些偏移量的 .setPosition() 执行相同类型的代码，以便绘图是相对的。

另一种方法是在每个阶段创建一个组，并使组可拖动，这样您就可以同时拖动组中的所有项目，并且跨阶段同步。

于 2013-03-21T15:07:57.310 回答