Javascript 按键向下移动路径

我正在尝试移动一条路径。在paperjs中按键向下旋转，但它不起作用，我无法发现错误

这是代码，是指向草图的链接

var rect = new Path.Rectangle({
  point: [0, 0],
  size: [view.size.width, view.size.height],
  strokeColor: 'white',
  selected: true
});

rect.sendToBack();
rect.fillColor = 'blue';

var beach = new Path.Rectangle({
  point: [0, 0],
  size: [view.size.width, view.size.height / 5],
  strokeColor: 'white',
  selected: true
});

beach.fillColor = "yellow";

var boat = new Path.Circle(new Point(xpoint, ypoint), 30);
boat.fillColor = "black";

xpoint = 100;
ypoint = 300;

function onKeyDown(event) {
  if (event.key == 'a') {
    xpoint -= 10;
  }

  if (event.key == 'd') {
    xpoint += 10;
  }

  if (event.key == 'w') {
    ypoint -= 10;
  }

  if (event.key == 's') {
    ypoint += 10;
  }
}

---

您只是设置最初用于创建船的变量的值，但它根本不会更改船

var x = 10,
    y = 10,
    boat = new Boat(x, y);    //pseudocode

// now setting x doesn't do anything at all. The value was already
// passed to boat, boat doesn't retain a reference to x 
x = 20;

相反，更改变量，然后直接修改boat。我对paperjs不太了解，但以下方法似乎有效：

function onKeyDown(event) {
   if(event.key == 'a') {
      xpoint -= 10;
   }
   // ...

   boat.setPosition(xpoint, ypoint)
}

---

您只是设置最初用于创建船的变量的值，但它根本不会更改船

var x = 10,
    y = 10,
    boat = new Boat(x, y);    //pseudocode

// now setting x doesn't do anything at all. The value was already
// passed to boat, boat doesn't retain a reference to x 
x = 20;

相反，更改变量，然后直接修改boat。我对paperjs不太了解，但以下方法似乎有效：

function onKeyDown(event) {
   if(event.key == 'a') {
      xpoint -= 10;
   }
   // ...

   boat.setPosition(xpoint, ypoint)
}

---

所以您只需在keydown上设置/增加变量值。你在触发什么来重新绘制路径？我显然不知道该怎么做。有什么提示吗？我以为你会意识到你不是在用我的问题重新画船。有关详细解释，请参见Sam Fen的答案。你需要在改变了新的点值后，用新的点值重新画一条船。我怀疑这就是问题所在，但不知道怎么做：）谢谢：）@Naomi，我认为这部分是PaperJS的错。我对PaperJS不太了解，但它似乎有相当大的“魔力”，可以让屏幕渲染的内部工作和其他东西对你隐藏起来。因此，我想说，对于新手来说，不清楚为什么更改对象的属性（不显式重新绘制）会导致重新绘制，而更改变量

xpoint

则不会。但是，由于改变一个数值变量不可能起作用的实际原因，请研究“Javascript传递值”，回想一下数字是一种基本类型。因此，您只需在keydown上设置/增加变量值。你在触发什么来重新绘制路径？我显然不知道该怎么做。有什么提示吗？我以为你会意识到你不是在用我的问题重新画船。有关详细解释，请参见Sam Fen的答案。你需要在改变了新的点值后，用新的点值重新画一条船。我怀疑这就是问题所在，但不知道怎么做：）谢谢：）@Naomi，我认为这部分是PaperJS的错。我对PaperJS不太了解，但它似乎有相当大的“魔力”，可以让屏幕渲染的内部工作和其他东西对你隐藏起来。因此，我想说，对于新手来说，不清楚为什么更改对象的属性（不显式重新绘制）会导致重新绘制，而更改变量

xpoint

则不会。但是，由于更改数值变量不可能奏效的实际原因，请研究“Javascript传递值”，并回想数字是一种基本类型。FWIW：您还可以使用

boat.position=new Point（xpoint，ypoint）

或

boat.position+=new Point（xOffset，yOffset）

查看文档了解更多信息：FWIW：您也可以使用

boat.position=新点（xpoint，ypoint）

或

boat.position+=新点（xOffset，yOffset）

查看文档了解更多信息：