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

时间:2013-03-21 01:55:13

标签: drag kineticjs

在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 个答案:

答案 0 :(得分: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()来做相同类型的代码,这样绘图是相对的。

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