Javascript kineticjs在单击按钮时移动图像

我正在使用创建画布等。我要做的是通过单击按钮移动

yodaGroup

或

yodaImage

的位置。有没有人做过或者知道怎么做

这就是我所处的位置

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

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

//我们需要弄清楚这个函数 这只是一个例子，因为我不知道如何为上面的YodGroup定义，因为它没有绑定id或类

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

我不确定“x”属性是否是公共的。根据API，您应该使用setPosition（）方法：

我想尝试一下：

<button data-direction="right" value="&gt;">
<button data-direction="left" value="&lt;">

我不确定“x”属性是否是公共的。根据API，您应该使用setPosition（）方法：

我想尝试一下：

<button data-direction="right" value="&gt;">
<button data-direction="left" value="&lt;">

---

有一个比设定位置更简单的方法。它是.move（）函数

.移动（x，y）在对象上移动给定数量的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，然后再调用set position要快得多。 此外，设置位置比移动需要更多的资源和处理

---

有一种比设置位置更简单的方法。它是.move（）函数

.移动（x，y）在对象上移动给定数量的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，然后再调用set position要快得多。 此外，设置位置比移动需要更多的资源和处理

---

最后使用了这个。。。让它工作起来

html

---

最后用了这个。。。让它工作起来

html

---

如果您想将图像/组移动到某个位置，那么可以使用.setPosition（x，y）我今天晚些时候回家后会尝试这些。我已经出城几天了。谢谢你的建议。尝试了这些建议仍然无法移动。。。始终未定义yodaImg或yodaGroup都未定义。任何人知道如何将画布绘图放入div id或类的任何其他建议。。。如果我能做到这一点，我可以使用画布和css点击功能来移动图像。提前谢谢。这应该行得通。除了别忘了用layer.draw（）重新绘制图层，如果你想将图像/组移动到某个位置，那么你可以使用.setPosition（x，y）我今天晚些时候回家后会尝试这些。我已经出城几天了。谢谢你的建议。尝试了这些建议仍然无法移动。。。始终未定义yodaImg或yodaGroup都未定义。任何人知道如何将画布绘图放入div id或类的任何其他建议。。。如果我能做到这一点，我可以使用画布和css点击功能来移动图像。提前谢谢。这应该行得通。除了别忘了用layer.draw（）重新绘制图层。谢谢，但似乎没有做任何事情。chrome控制台中没有定义$。您需要jQuery，或者只使用vanilla js:document.querySelector（…）.addEventListener（'click'，function（）{…}）；谢谢，但似乎没有做任何事情。chrome控制台中没有定义$I get。您需要jQuery，或者只需使用vanilla js:document.querySelector（…）.addEventListener（'click'，function（）{…}）；我用kineticJS做了一个项目，如果需要帮助，请告诉我。我的项目是在是会喜欢帮助。。。我只是想用图像来制作一个html5画布，并且能够通过点击按钮来移动和调整它们的大小。只要调整大小就好了。我发现了一个不同的例子，他们使用按钮缩放，这是我需要的，但我也不能让它与图像一起工作。。。就在这里。我用kineticJS做了一个项目，如果需要帮助，请告诉我。我的项目是在是会喜欢帮助。。。我只是想用图像来制作一个html5画布，并且能够通过点击按钮来移动和调整它们的大小。只要调整大小就好了。我发现了一个不同的例子，他们使用按钮缩放，这是我需要的，但我也不能让它与图像一起工作。。。就在这里。

// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
   var zoomAmount = e.wheelDeltaY*0.0001;
   yodaGroup.setScale(yodaGroup.getScale().x+zoomAmount)
   layer.draw();
   e.preventDefault();
}, false)

// move down
document.getElementById("down").addEventListener("click", function(e) {
yodaGroup.move(0,5);
layer.draw();
e.preventDefault();
}, false)

// move right
document.getElementById("right").addEventListener("click", function(e) {
yodaGroup.move(5,0);
layer.draw();
e.preventDefault();
}, false)

// move up
document.getElementById("up").addEventListener("click", function(e) {
yodaGroup.move(0,-5);
layer.draw();
e.preventDefault();
}, false)

// move left
document.getElementById("left").addEventListener("click", function(e) {
yodaGroup.move(-5,0);
layer.draw();
e.preventDefault();
}, false)