Animating and moving a draggable shape in KineticJS's dragend event - javascript

I would like to animate moving a draggable shape to another position after it has been dragged in KineticJS. I would like to animate the movement of the shape over a period of time (for example, over 1 second). For example, I create a draggable shape and save its initial xy coordinates. I register a "dragend" event on this shape. Then, I drag the shape to a new position. When I release the drag, the dragend event is called. In that event function, I want to animate/ease the shape back to its original position. See my JSFiddle for a complete example: DragSample.
(function () {
//create variables at global scope
var layer;
var stage;
var triangle;
var triangleLastX = 190;
var triangleLastY = 120;
var tween;
function initTween() {
tween = new Kinetic.Tween({
node: triangle,
duration: 1,
easing: Kinetic.Easings.EaseInOut,
x: 400,
y: 200,
});
}
this.init = function () {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600
});
triangle = new Kinetic.RegularPolygon({
x: 190,
y: 120,
sides: 3,
radius: 80,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
triangle.on('dragstart', function () {
triangleLastX = triangle.attrs.x;
triangleLastY = triangle.attrs.y;
});
triangle.on('dragend', function () {
tween.play();
stage.draw();
});
layer.add(triangle);
stage.add(layer);
initTween ();
}
window.onload = init();
})();
I have tried doing this several ways. The last way I attempted to do this was using Kinetic's Tween(), however, when I play this Tween from the dragend event handler function, it moves the shape back to its original position immediately (i.e. the position when the drag started), then applies the Tween.
Is there any way to achieve animating the movement of a draggable shape to its original position (or any other position for that matter) in dragend using KineticJS?

As I mentioned in my comment above, I have found the solution and that is to simply call my initTween() function in the dragend event handler. Following is the updated source for DragSample
(function () {
//create variables at global scope
var layer;
var stage;
var triangle;
var triangleLastX = 190;
var triangleLastY = 120;
var tween;
function initTween() {
tween = new Kinetic.Tween({
node: triangle,
duration: 1,
easing: Kinetic.Easings.EaseInOut,
x: triangleLastX,
y: triangleLastY,
});
}
this.init = function () {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600
});
triangle = new Kinetic.RegularPolygon({
x: 190,
y: 120,
sides: 3,
radius: 80,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
triangle.on('dragstart', function () {
});
triangle.on('dragend', function () {
initTween();
tween.play();
stage.draw();
});
layer.add(triangle);
stage.add(layer);
}
window.onload = init();
})();

Related

Cannot read property 'rotation' of undefined kineticjs

I've been staring at this for the past hour and cannot figure it out.
I'm trying to use KineticJS to rotate a shape 45 degrees when it is clicked. I found http://jsfiddle.net/JUu2Q/6/ from a previous question on Stack Overflow which does basically what I want. When I apply this to my code (and change 'layer' to 'stage'), I get the following error: Cannot read property 'rotation' of undefined:
layer.on('click tap', function(evt) {
evt.targetNode.tween = new Kinetic.Tween({
node: evt.targetNode,
duration: 0.3,
rotationDeg: evt.targetNode.rotation()+45,
easing: Kinetic.Easings.EaseOut
});
evt.targetNode.tween.play();
});
I'm sure I'm doing something wrong but I just can't figure it out.
My code can be found at http://jsfiddle.net/0h55fdzL/
I've only be using KineticJS for a few hours so I apologize if this is stupid question
Thanks for your help!
1 Create closure for x variable.
2 Use target instead of targetNode
var x = -50;
var y = -50;
var stage = new Kinetic.Stage({
container: 'container',
width: 1200,
height: 1200,
});
for (i=0; i<3; i++){
x = x + 50;
y = y + 50;
var layer = [];
layer[i] = new Kinetic.Layer();
var hex = [];
(function(x){
hex[i] = new Kinetic.Shape({
sceneFunc: function(context) {
context.beginPath();
context.moveTo(x+25, 0);
context.lineTo(x+40, 10);
context.lineTo(x+40, 25);
context.lineTo(x+25, 35);
context.lineTo(x+10, 25);
context.lineTo(x+10, 10);
context.closePath();
// KineticJS specific context method
context.fillStrokeShape(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotation:0
});
})(x);
// add the triangle shape to the layer
layer[i].add(hex[i]);
// add the layer to the stage
stage.add(layer[i]);
}
stage.on('click tap', function(evt) {
evt.target.tween = new Kinetic.Tween({
node: evt.target,
duration: 0.3,
rotationDeg: evt.target.rotation()+45,
easing: Kinetic.Easings.EaseOut
});
evt.target.tween.play();
});
http://jsfiddle.net/0h55fdzL/1/

kineticjs group cache and layer draw is hiding kinetic arc shapes

I am creating a circle as a group of kinetic arcs. When I cache the group and subsequently call the draw function on the layer, three quarters of the circle are hidden. I think layer.draw may require an offset but really I'm only guessing. When I remove the fill, stroke or opacity from the arc or the object literal from the cache call then the full circle is displayed. http://jsfiddle.net/leydar/gm2FT/5/ Any insights gratefully received.
function createArc(n){
var arc = new Kinetic.Arc({
innerRadius: 30,
outerRadius: 50,
/* if I remove the fill, stroke or opacity
the full wheel is correctly displayed */
fill: 'blue',
stroke: 'black',
opacity: 0.3,
strokeWidth: 1,
angle: 36,
rotation: 36*n
});
return arc;
}
function init() {
var arc;
var stage = new Kinetic.Stage({
container: 'container',
width: 104,
height: 104
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Group();
for(var i=0;i<10;i++) {
arc = createArc(i);
circle.add(arc);
};
layer.add(circle);
stage.add(layer);
/* if I do not cache or do not call layer.draw()
then again the wheel is correctly displayed */
circle.cache({
x: -52,
y: -52,
width: 104,
height: 104,
drawBorder: true
});
layer.draw();
}
init();
Stephen
This is a bug of KineticJS.
You may use this workaround:
Kinetic.Arc.prototype._useBufferCanvas = function() {
return false;
};
http://jsfiddle.net/gm2FT/6/

mouseenter / mouseleave event fired when moving from shape to circle in kinetic group

I have Kinetic group which contains custom shape and circle.
Mouseenter and mouseleave events are specified on group level.
When I move from shape to circle and vice versa events are fired, which (I guess) is not correct as I am all the time above group.
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 300
});
var shapesLayer = new Kinetic.Layer();
var group = new Kinetic.Group({
x: 100,
y: 40,
listening: true
});
var square = new Kinetic.Shape({
sceneFunc: function(context) {
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 100);
context.lineTo(50, 100);
context.lineTo(50, 50);
context.closePath();
// KineticJS specific context method
context.fillStrokeShape(this);
},
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
var circle = new Kinetic.Circle();
circle.x( 75 );
circle.y( 75);
circle.fill( 'LightGray' );
circle.stroke( 'Gray' );
circle.strokeWidth( 2 );
circle.strokeEnabled( true );
circle.listening(true);
circle.draggable( true );
circle.radius( 10 );
group.add(square);
group.add(circle);
group.on( 'mouseenter', function( evt ) {
document.body.style.cursor = 'pointer';
} );
group.on( 'mouseleave', function( evt ) {
document.body.style.cursor = 'default';
} );
shapesLayer.add(group);
stage.add(shapesLayer); `
See mouse pointer in example here: http://jsfiddle.net/69K59/2/
Mouse movements on the group itself do not trigger mouse events.
Mouse events on nodes (shapes,circles,etc) do trigger mouse events.
That's why you get leave+enter when moving from the circle to the rect.

Bouncing image balls with KineticJS

I'm just starting out the KineticJS library and been playing about with it creating shapes etc.. However, I'm struggling to create a custom circle with my own image in it. I have tried using the fillPattern but it doesn't scale/centre correctly at all. Am I meant to use my own circle image or a rectangle image and then let KineticJS take care of things?
Just to give a bit of background: What I want is 3 balls bouncing in and then settling in place.
Any advice is welcome.
Sorted it... needed the offset values
var ball = new Image();
ball.src = 'ball2.jpg';
ball.height = 230;
ball.width = 230;
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 1000
});
var circle = new Kinetic.Circle({
x: 300,
y: 300,
radius: 115,
fillPatternImage: ball,
fillPatternOffset :{
x: -115,
y: -115
}
});
var layer = new Kinetic.Layer();
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
ball.onload = function () {
stage.draw();
}

KineticJS / Javascript dynamic creation and immediate dragging

What I want do is dynamically create a shape on mousedown, and then immediately have it (the shape) follow the mouse cursor until mouseup sets it in place.
Here is what I have so far and it's not working for me.
addNegativeButton.on('mousedown', function(){
var userPos = stage.getUserPosition();
shapesLayer.add(new Kinetic.Image({
image: imageObj,
x: userPos.x,
y: userPos.y,
height: 25,
width: 25,
rotation: 1,
draggable: true,
offset: 12
}));
var last = shapesLayer.getChildren()[shapesLayer.getChildren().length -1];
stage.on("mouseup", function(){
last.setAbsolutePosition(stage.getUserPosition());
stage.off("mouseup");
});
To reiterate:
What I have is an 'addNegativeButton' which when clicked creates a shape.
But I want it to follow the mouse cursor until the click is released.
http://jsfiddle.net/CPrEe/37/
Any suggestions?
Turns out its rather simple ;)
After you add the element/shape, all you have to do is use the simulate function to simulate mouse down and it drags....
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
//What I really want here is to start dragging the circle until the
//user releases the mouse, which would then place the circle.
rect.on('mousedown', function(evt) {
var userPos = stage.getUserPosition();
var latestElement = new Kinetic.Circle({
x: userPos.x,
y: userPos.y,
radius: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
})
layer.add(latestElement);
// Here's the bit you want. After adding the circle (with draggable:true) simulate the mousedown event on it which will initiate the drag
latestElement.simulate('mousedown');
layer.draw();
});
layer.add(rect);
stage.add(layer);​
http://jsfiddle.net/CPrEe/38/
http://kineticjs.com/docs/symbols/Kinetic.Node.php#simulate

Categories

Resources