在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();
});
但是我无法更新图层以移动垂直线和圆。我要感谢你的建议,提前谢谢。
答案 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()来做相同类型的代码,这样绘图是相对的。
另一种方法是在每个阶段创建一个组,并使组可拖动,这样,您可以同时拖动组中的所有项目,并跨阶段同步拖动。