Pergunta
I'm trying to move an image but I can't
...
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
....
// event button - move image;
document.getElementById('show').addEventListener('click', function() {
imageObj.move(0,5);
}, false);
Solução
A few bugs:
be be sure to draw the layer so your changes are displayed
the element you want to move is yoda, not imageObj: yoda.move(0,5)
the yoda object must be declared outside imageObj.onload so its in scope later
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/T2pfZ/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var yoda;
var imageObj = new Image();
imageObj.onload = function() {
yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
layer.add(yoda);
layer.draw();
}
imageObj.src="houseicon.png";
document.getElementById('show').addEventListener('click', function() {
yoda.move(0,5);
layer.draw();
}, false);
}); // end $(function(){});
</script>
</head>
<body>
<button id="show">Move!</button>
<div id="container"></div>
</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow