移动路径 onkeydown

Question

我正在尝试在 paperjs 中移动 path.Circle on keydown 但它不起作用，我无法发现错误。

这是代码，this 是 link 草图。

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;
  }
}

Answer 1

您只是设置了最初用于创建船的变量的值，但根本没有改变船。

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;

改为更改变量，然后直接修改船。我不太了解 paperjs，但以下似乎有效：

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

   boat.setPosition(xpoint, ypoint)
}

移动路径 onkeydown

Move path onkeydown

javascript

paperjs