javascript - Kineticjs 在按钮单击时 move 图像

Question

我正在使用this example创建 Canvas 等。我想做的是通过单击按钮 move yodaGroup 或 yodaImage 的位置。有没有人曾经这样做过或知道如何做到这一点？

这就是我所在的地方。

    var yodaGroup = new Kinetic.Group({
      x: 250,
      y: 30,
      draggable: true
    });

我想调整或添加上面 yodaGroup 的 x 和 y 坐标使用单击按钮来触发下面的此功能

//需要弄清楚这个函数这只是一个示例，因为我不知道如何定义上面的 yodaGroup，因为它没有与之关联的 id 或类。

   function left() {
      yodaGroup.x += 5; // move image by 5px
   }

Answer 1

有比设置位置更简单的方法。它是 .move() 函数。

.move(x,y) 在对象上 move 给定的 x 和 y 量。

所以这可能是:

function left() {
   yodaGroup.move(-5,0);
}
function right() {
   yodaGroup.move(5,0);
}
function up() {
   yodaGroup.move(0,-5); //negative is up in canvas
}
function down() {
   yodaGroup.move(0,5); //positive is down in canvas
}

这也比调用 getPosition 两次然后设置位置要快得多。此外，setPosition 比 move 需要更多的资源和处理。

http://kineticjs.com/docs/symbols/Kinetic.Node.php#move