CODEWITHSUNDEEP
javascripthtmlcanvasmovekineticjs
Bowenac
Bowenac

Reputation: 503

kineticjs move image on button click

I am using this example to create a canvas etc. What I would like to do is move the position of the yodaGroup or yodaImage via button click. Has anyone ever done this or know how to do this?

Here is where I am at. 

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

I want to adjust or add to the x and y cordinates for the yodaGroup above using a button click that triggers this function below

// need to figure out this function this is just an example as I don't know how to define for the yodaGroup above as it doesn't have an id or class tied to it.

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

Upvotes: 1

Views: 4234

Answers (3)

Bowenac
Bowenac

Reputation: 503

Ended up using this... and got it working

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>

script

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

Upvotes: 0

SoluableNonagon
SoluableNonagon

Reputation: 11755

There is an easier way than set position. Its the .move() function.

.move(x,y) moves on object by given amounts x and y.

so this could be:

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
}

This is also much faster execution than calling getPosition twice and set position after. Also, setPosition requires more resources and processing than move.

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

Upvotes: 1

Maxence De Rous
Maxence De Rous

Reputation: 166

I'm not sure that "x" property is public. According to the API, you should use setPosition() method : http://kineticjs.com/docs/symbols/Kinetic.Node.php#setPosition

I would try something like :

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

Upvotes: 0

Related Questions