I want to create a little animation
When you click on the rect0.
rect0 and rect1 go to a new position and after that get back to the first.
<div id="container"></div>
<script src="js/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 890,
height: 730
});
var layer = new Kinetic.Layer();
var rect0 = new Kinetic.Rect({
x: 670,
y:10,
width:210,
height:36,
fill :"#6dbbfe"
});
var rect1 = new Kinetic.Rect({
x: 670,
y:55,
width:210,
height:36,
fill :"#fb6aef"
});
layer.add(rect1);
layer.add(rect0);
stage.add(layer);
var tween = new Kinetic.Tween({
node: rect0,
duration: 1,
x: 10,
y: 168
});
var tweenr = new Kinetic.Tween({
node: rect0,
duration: 1,
x: 670,
y: 10
});
var tweenf = new Kinetic.Tween({
node: rect1,
duration: 1,
x: 10,
y: 528
});
var tweenfr = new Kinetic.Tween({
node: rect1,
duration: 1,
x: 670,
y: 55
});
rect0.on('mousedown', function() {
setTimeout(function() {
tween.play();
tweenf.play();
setTimeout(function() {
tweenr.play();
tweenfr.play();
}, 2000);
}, 2000);
});
For rect0 everything works fine but rect1 does not move.
The problem is in:
var tweenfr = new Kinetic.Tween({
node: rect1,
duration: 1,
x: 670,
y: 55
});
Because if you delete it the rect1 move. but where....
you can use reverse() function here.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
How people voted for Iphone <input type="checkbox" name="sample_size" id="sample_size1">
<br>
<button class="btn-arow pull-right" id="arrow110">click</button>
<div id="container"></div>
<input type="hidden" id="orientation_1_1_0" value="horizontal">
<script type="text/javascript" defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 890,
height: 730
});
var layer = new Kinetic.Layer();
var rect0 = new Kinetic.Rect({
x: 670,
y:10,
width:210,
height:36,
fill :"#6dbbfe"
});
var rect1 = new Kinetic.Rect({
x: 670,
y:55,
width:210,
height:36,
fill :"#fb6aef"
});
layer.add(rect1);
layer.add(rect0);
stage.add(layer);
var tween = new Kinetic.Tween({
node: rect0,
duration: 1,
x: 10,
y: 168
});
var tweenr = new Kinetic.Tween({
node: rect0,
duration: 1,
x: 670,
y: 10
});
var tweenf = new Kinetic.Tween({
node: rect1,
duration: 1,
x: 10,
y: 528
});/*
var tweenfr = new Kinetic.Tween({
node: rect1,
duration: 1,
x: 670,
y: 55
});*/
rect0.on('mousedown', function() {
tween.play();
tweenf.play();
setTimeout(function(){
tween.reverse();
tweenf.reverse();
},2000);
});
</script>
</body>
</html>
We cannot use the same node for tween twice with x and y coordinates.
Related
I'm looking for a way to obtain ID (123 in the code below) of a Konva Label ("Hello World!" in the code below) from Konva's 'dblclick' event.
I could obtain ID (321 in the code below) of a Konva Image (Konva's LOGO "K" in the code below) from both of Konva's 'dblclick' and 'dragmove' events.
Also I could obtain the ID (123 in the code below) of the Konva Label ("Hello World!") from 'dragmove' event; however I couldn't obtain the ID (123 in the code below) of the Konva Label ("Hello World!") from Konva's 'dblclick' event.
My code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#5.0.2/konva.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<span id="container"></span>
</body>
<script>
//Konva Stage
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
//Konva Layer
var layer = new Konva.Layer();
stage.add(layer);
//Konva Image
var imageObj = new Image();
imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
imageObj.addEventListener('load', function() {
var kImage = new Konva.Image({
x: window.innerWidth*2.5/10,
y: window.innerHeight*1/10,
image: imageObj,
id: 321,
draggable: true,
});
layer.add(kImage);
layer.draw();
});
//Konva Label
WordLabel = new Konva.Label({
x: window.innerWidth*3/10,
y: window.innerHeight*4/10,
opacity: 0.75,
draggable: true,
fill: 'green',
id: 123,
});
//Konva Tag
WordLabel.add(
new Konva.Tag({
fill: 'green',
})
);
//Konva Text
WordLabel.add(
new Konva.Text({
text: 'Hello World!',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
strokeWidth: 0,
})
);
layer.add(WordLabel);
layer.draw();
//Konva dragstart event
stage.on('dragstart', function(e) {
console.log('ID (dragstart) = ' + parseInt(e.target.id()));
});
//Konva dblclick event
stage.on('dblclick dbltap', function (e) {
console.log('ID (dblclick) = ' +parseInt(e.target.id()));
});
</script>
</html>
If you look at the e.target object you can see that it is the text node rather than the label node that received the click.
Use e.target.findAncestors (see shape API) to get and iterate the shape hierarchy looking for an ancestor shape with the ID attribute you seek.
Working snippet below.
//Konva Stage
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
//Konva Layer
var layer = new Konva.Layer();
stage.add(layer);
//Konva Image
var imageObj = new Image();
imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
imageObj.addEventListener('load', function() {
var kImage = new Konva.Image({
x: window.innerWidth*2.5/10,
y: window.innerHeight*1/10,
image: imageObj,
id: 321,
draggable: true,
});
layer.add(kImage);
layer.draw();
});
//Konva Label
WordLabel = new Konva.Label({
x: 10,
y: 20,
opacity: 0.75,
draggable: true,
fill: 'green',
id: 123,
});
//Konva Tag
WordLabel.add(
new Konva.Tag({
fill: 'green'
})
);
//Konva Text
WordLabel.add(
new Konva.Text({
text: 'Hello World!',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
strokeWidth: 0
})
);
layer.add(WordLabel);
layer.draw();
//Konva dragstart event
stage.on('dragstart', function(e) {
console.log('ID (dragstart) = ' + parseInt(e.target.id()));
});
//Konva dblclick event
stage.on('dblclick dbltap', function (e) {
// Looking for a specif attr on a parent shape. In this
// case we know the parent is a Label so search for ancestors of that type
var nodes = e.target.findAncestors('Label', true);
if (nodes.length > 0) {
for (var i = 0; i < nodes.length; i++){
var id = nodes[i].getAttr("id")
console.log('shape ' + i + ' ID (dblclick)', id )
}
}
else {
console.log('ID (dblclick) = ' + parseInt(e.target.id()));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#5.0.2/konva.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<span id="container"></span>
</body>
<script>
</script>
</html>
I habe a problem that the zoom function in the new 5.0.0 version doesn't zoom like bevor.
I have tested the new Version 5.0.0 with the follwing test:
See this jsfiddle.
I change the .jsfile to:
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js
and make the changes for the new scale function:
ui.stage.setScale(newscale); --> ui.stage.setScale({x:newscale,y:newscale});
The error is that the zoompoint in 5.0.0 is the left top corner and not the mousepoint liek bevor.
Any suggestions ?
Just change this if you are using kinetic.jsv5.0.0
You can also view all the changes made in Kinetic.jsv5.0.0
ui.stage.setScale(newscale); --> ui.stage.setScale({x:newscale,y:newscale});
and
ui.stage.setOffset(ui.origin.x,ui.origin.y); --> ui.stage.setOffset({x: ui.origin.x, y: ui.origin.y});
or
Apply the following code:
var ui = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var evt = event.originalEvent,
mx = evt.clientX - ui.stage.getX(),
my = evt.clientY - ui.stage.getY(),
zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0)),
newscale = ui.scale * zoom;
ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;
ui.stage.setOffset({x: ui.origin.x, y: ui.origin.y});
ui.stage.setScale({x: newscale, y: newscale});
ui.stage.draw();
ui.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = ui.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var layer = new Kinetic.Layer();
var box1 = ui.box = new Kinetic.Circle({
x: 50,
y: 50,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var box2 = ui.box = new Kinetic.Circle({
x: 150,
y: 150,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
// add cursor styling
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// add cursor styling
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box1);
layer.add(box2);
stage.add(layer);
$(stage.content).on('mousewheel', ui.zoom);
});
JSFiddle: http://jsfiddle.net/bijaybhandari1989/6J8F5/4/
I grabbed a working example of scaling and dragging an image from HTML5 Canvas Tutorials, but I want to achieve the same effect using rectangles.
When I adapt the code to use Rects, the anchors stop following the Rect. What's the secret to getting this working?
Thanks for any tips!
<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<style>
#container{
float:left;
border:1px solid red;
width:930px;
height:400px;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var mask = group.get('.mask')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
mask.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if(width && height) {
mask.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function initStage() {
var stage = new Kinetic.Stage({
container: 'container',
width: 930,
height: 400
});
var redGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var greenGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(redGroup);
layer.add(greenGroup);
stage.add(layer);
// red
var redRect = new Kinetic.Rect({
x: 0,
y: 0,
name: 'mask',
width: 100,
height: 100,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
opacity:0.5,
draggable:true
});
redGroup.add(redRect);
addAnchor(redGroup, 0, 0, 'topLeft');
addAnchor(redGroup, 100, 0, 'topRight');
addAnchor(redGroup, 100, 100, 'bottomRight');
addAnchor(redGroup, 0, 100, 'bottomLeft');
redGroup.on('dragstart', function() {
this.moveToTop();
});
// green
var greenRect = new Kinetic.Rect({
x: 0,
y: 0,
name: 'mask',
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 1,
opacity:0.5,
draggable:true
});
greenGroup.add(greenRect);
addAnchor(greenGroup, 0, 0, 'topLeft');
addAnchor(greenGroup, 100, 0, 'topRight');
addAnchor(greenGroup, 100, 100, 'bottomRight');
addAnchor(greenGroup, 0, 100, 'bottomLeft');
greenGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
initStage();
</script>
</body>
</html>
becuase you making your rectangle as well draggable, just remove that and it works.
btw thanks for your solution i need something very similar. :)
here it is your working one:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<style>
#container {
float: left;
border: 1px solid red;
width: 930px;
height: 400px;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var mask = group.get('.mask')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
mask.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
mask.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
update(this);
});
// add hover styling
anchor.on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function initStage() {
var stage = new Kinetic.Stage({
container: 'container',
width: 930,
height: 400
});
var redGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var greenGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(redGroup);
layer.add(greenGroup);
stage.add(layer);
// red
var redRect = new Kinetic.Rect({
x: 0,
y: 0,
name: 'mask',
width: 100,
height: 100,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
opacity: 0.5
});
redGroup.add(redRect);
addAnchor(redGroup, 0, 0, 'topLeft');
addAnchor(redGroup, 100, 0, 'topRight');
addAnchor(redGroup, 100, 100, 'bottomRight');
addAnchor(redGroup, 0, 100, 'bottomLeft');
redGroup.on('dragstart', function () {
this.moveToTop();
});
// green
var greenRect = new Kinetic.Rect({
x: 0,
y: 0,
name: 'mask',
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 1,
opacity: 0.5
});
greenGroup.add(greenRect);
addAnchor(greenGroup, 0, 0, 'topLeft');
addAnchor(greenGroup, 100, 0, 'topRight');
addAnchor(greenGroup, 100, 100, 'bottomRight');
addAnchor(greenGroup, 0, 100, 'bottomLeft');
greenGroup.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
}
initStage();
</script>
</body>
</html>
I am using Kinetic for some image processing. What happens is that I crop my image and then by clicking a button I want to make it black and white. For some reason the simple setFilter function is not working in this case, when you do crop first.
This is the code for cropping:
layer.removeChildren();
layer.clear();
image = new Kinetic.Image({
image: canvasImage,
x: (canvasWidth/2-theSelection.w/2),
y: (canvasHeight/2-theSelection.h/2),
width: theSelection.w,
height: theSelection.h,
crop: [theSelection.x, theSelection.y, theSelection.w, theSelection.h],
name: "image_tmp"
});
layer.add(image);
stage.draw();
And here is the function I decided to use for applying the filter:
var imgPixels = ctx.getImageData(xx, yy, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, xx, yy, 0, 0, imgPixels.width, imgPixels.height);
So now I get my cropped image with the filter, but if I want to continue doing something to the image object, I am getting:
TypeError: a.getType is not a function
I think also that the image object I used to use in my code, is now like undefined.
So for example I want after the filter to do layer.add(image) and I want image variable to be the new black and white one and not the old one.
So does anyone have an idea what is the problem, or how can I make the new imgPixels to be the same as my image. Thanks in advance
Is there any reason you didn't use the Kinetic.Filters.Grayscale filter?
Here are 2 ways you can do it:
1) Use setFilter (it works!)
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
crop: [0, 0, 50, 100]
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
yoda.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
2) Set the filter property on the image beforehand
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
crop: [0, 0, 50, 100],
filter: Kinetic.Filters.Grayscale
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
//yoda.setFilter(Kinetic.Filters.Grayscale);
//layer.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
Either way you don't need to add any new images, the original Kinetic.Image is filtered black & white.
UPDATE
Open this link: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
And copy and paste this code, replacing all the code in the link. It's working fine for me..
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button id="crop">Crop</button>
<button id="gray">Grayscale</button>
<button id="both">Both</button>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<script defer="defer">
var yoda;
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
document.getElementById('crop').addEventListener('click', function() {
yoda.setCrop([20, 20, 50, 50]);
layer.draw();
});
document.getElementById('gray').addEventListener('click', function() {
yoda.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
});
document.getElementById('both').addEventListener('click', function() {
yoda.setCrop([20, 20, 50, 50]);
yoda.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
});
</script>
</body>
</html>
I have a grid and I'm looking to basically add a tooltip Image for each rectangle in the grid. Basically, first I need to be able to add an image to the canvas on the rectangle mouse over event. Eventually each rectangle would have it's own image so I need to keep track of the rectangles...do I add them to an array?
Here is my fiddle for what I've got so far:
http://jsfiddle.net/marseilles84/7ZzTh/1/
Here is a sample image source to use:
'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
<div id="container"></div>
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 500
});
var layer = new Kinetic.Layer();
for (var i=0; i<7; i++)
{
for(c=0; c<18; c++)
{
var colorPentagon = new Kinetic.Rect({
x: (45*c),
y: 45*i,
width:40,
height:40,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
colorPentagon.on('mouseover touchstart', function() {
//code here
});
layer.add(colorPentagon);
}
}
stage.add(layer);
http://jsfiddle.net/7ZzTh/2/
This is probably more of what you're looking for.
colorPentagon.on('mouseover touchstart', function() {
var userPos = stage.getUserPosition();
yoda.setPosition(userPos.x,userPos.y);
layer.add(yoda);
layer.draw();
});
colorPentagon.on('mouseout touchstart', function() {
yoda.remove();
layer.draw();
});
At the beginning you want:
var imageObj = new Image();
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 106,
height: 118
});
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';