移动路径onkeydown

时间:2016-06-07 19:23:16

标签: javascript paperjs

我正试图移动一条路径。在纸张上的keydown上的圆圈,但是它没有工作,我无法发现错误。

以下是代码,this是草图的链接。

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

1 个答案:

答案 0 :(得分:2)

您只需设置最初用于创建船只的变量值,但它根本不会改变船只。

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