代码之家 › 专栏 › 技术社区 › hncl

KineticJS-移动另一个舞台上的对象后更新drawFunc

kineticjs drag

hncl · 技术社区 · 11 年前

在一位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();
    });

但是,我无法更新图层以同时移动垂直线和圆。我很感激你的建议,提前谢谢。

1 回复 | 直到 11 年前

SoluableNonagon 11 年前

假设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()做同样的代码,并有一些偏移量,这样绘图就相对了。

另一种方法是在每个阶段创建一个组,并使该组可拖动,这样,您可以同时拖动组中的所有项目,并在各个阶段之间同步拖动。