kineticjs在按钮点击时移动图像答案

【问题标题】：kineticjs move image on button clickkineticjs在按钮点击时移动图像
【发布时间】：2013-01-04 22:03:55
【问题描述】：

我正在使用this example 创建画布等。我想做的是通过单击按钮移动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
   }

【问题讨论】：

我使用 kineticJS 做了一些项目，如果您需要帮助，请告诉我。我的项目在physiks.netii.net
是的，我很乐意帮助...我只是想使用图像获得一个 html5 画布，并且能够通过单击按钮来移动和调整它们的大小。只是调整大小会很棒。我发现了一个不同的示例，他们使用按钮进行缩放，这是我所需要的，但我也无法让它与图像一起使用......就是这里。 html5canvastutorials.com/labs/…

标签： javascript html canvas move kineticjs

【解决方案1】：

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

.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 两次然后设置位置快得多。此外，setPosition 比 move 需要更多的资源和处理。

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

【讨论】：

如果你想将图像/组移动到某个位置，那么你可以使用 .setPosition(x,y)
我今天晚些时候回家后会试试这些。出城几天了。感谢您的建议。
试过这些建议仍然无法让它移动......总是未定义 yodaImg 或 yodaGroup 未定义。任何其他人都知道如何将画布绘图放入 div id 或类的任何其他建议......如果我能做到，我可以使用画布并使用 css 单击功能来移动图像。提前致谢。
这应该可以。除了不要忘记用 layer.draw() 重绘图层

【解决方案2】：

我不确定“x”属性是否公开。根据 API，您应该使用 setPosition() 方法：http://kineticjs.com/docs/symbols/Kinetic.Node.php#setPosition

我会尝试类似：

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

Javascript（使用 jQuery）：

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

var step = 5;

$('button [data-direction=right]').click(function() {
  yodaGroup.setPosition(yodaGroup.getPosition().x + step, yodaGroup.getPosition().y);
});

$('button [data-direction=left]').click(function() {
  yodaGroup.setPosition(yodaGroup.getPosition().x - step, yodaGroup.getPosition().y);
});

【讨论】：

谢谢，但似乎没有做任何事情我得到 $ 不是在 chrome 控制台中定义的。
你需要 jQuery code.jquery.com/jquery-1.8.3.min.js 或者只使用 vanilla js：document.querySelector(...).addEventListener('click', function() { ... });

【解决方案3】：

最终使用了这个......并让它工作

html

<div class="positionImage">
<input type="button" value="left" id="left" >
<input type="button" value="right" id="right" >
<input type="button" value="up" id="up" >
<input type="button" value="down" id="down" >
</div>

脚本

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

【讨论】：