javascript - 使用 KineticJS 重置为默认位置

Question

我的游戏中有以下圆圈。玩家将它们拖到游戏中的不同位置。当玩家选择，再次播放时，我希望形状回到 init 函数中指定的原始位置。我该怎么办？谢谢你。

stage = new Kinetic.Stage({
   container: "container",
   width: 900,
   height: 550
});

shapes = new Kinetic.Layer();

function init() {
  circle1 = new Kinetic.Circle({
     x: stage.getWidth() / 3.2,
     y: stage.getHeight() / 3.2,
     radius: radius,
     fill: "blue",
     stroke: "black",
     strokeWidth: 4,
     name: "circle",
     draggable: true
});  

shapes.add(circle1)
stage.add(shapes)

Answer 1

将默认值存储在单独的变量中，然后用于.setPosition( x, y )重置它：

//store settings
var settings = {
     x: stage.getWidth() / 3.2,
     y: stage.getHeight() / 3.2,
     radius: radius,
     fill: "blue",
     stroke: "black",
     strokeWidth: 4,
     name: "circle",
     draggable: true
}; 

//use settings
circle1 = new Kinetic.Circle(settings);

//after move, reset using:
circle1.setPosition(settings.x,settings.y);

Answer 2

您还可以像这样使用超级方便的 setAttrs 方法：

circle1.setAttrs(settings);

干杯!

Answer 3

我知道这个问题已经很老了，但我刚刚解决了这样的问题。

stage.removeChildren();
stage.setAttrs(stage.defaultNodeAttrs);

stage.reset() 不再起作用，但这应该可以满足您的要求。