Kineticjs移动图像上的按钮点击

kineticjs move image on button click

本文关键字：按钮 移动 图像 Kineticjs      更新时间：2023-09-26

我用这个例子来创建一个画布等。我想做的是通过点击按钮来移动yodaGroup或yodaImage的位置。有人做过或者知道怎么做吗?

这是我在哪里。

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

我想调整或添加上面yodaGroup的x和y坐标使用点击按钮触发

下面的这个函数

//需要计算出这个函数这只是一个例子，因为我不知道如何定义上面的yodaggroup，因为它没有id或类绑定到它。

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

有一个比设置位置更简单的方法。它是。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并在之后调用set position要快得多。而且，setPosition比move需要更多的资源和处理。

http://kineticjs.com/docs/symbols/Kinetic.Node.php移动

我不确定"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 (with 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);
});

最后用这个…让它工作

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)
相关文章：