We Keep Coding

kineticjs change tween start color

I am trying to have a three state mouseover for a rectangle in KineticJS. The rectangle starts as white, then a mouseover on the rectangle changes the colour to red, which then starts a tween and tweens over 1 second to white. Another mouseover would repeat the process I was able to get this running using the version 4 library, but not version 5. JsFiddle: http://jsfiddle.net/cmh600/uFFN9/12/
Any help greatly appreciated
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,
fillRed: 255,
fillGreen: 255,
fillBlue: 255,
stroke: 'black',
strokeWidth: 2,
});
layer.add(rect);
stage.add(layer);
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
opacity: 1,
easing: Kinetic.Easings.Linear,
fillRed: 255,
fillGreen: 255,
fillBlue: 255
});
rect.on("mouseover", function() {
rect._setAttr('fillRed',255);
rect._setAttr('fillGreen',0);
rect._setAttr('fillBlue',0);
rect.draw();
tween.play();
});

You must declare the tween after set the new fill color of the rect, because else, starting values will be wrong (and it will be transformed to white instantly). Working with KJ5 :
rect.on("mouseover", function() {
rect.fillBlue(0);
rect.fillGreen(0);
rect.draw();
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
opacity: 1,
easing: Kinetic.Easings.Linear,
fillRed: 255,
fillGreen: 255,
fillBlue: 255
});
tween.play();
});

Why Isn't My Shadow Blurry? (Kinetic JS)

I'm learning KineticJS and tinkering with shadows. I made a shape and gave it shadow blur, but the shadow isn't blurry. I'm using the latest version of Chrome. This is the code I'm using:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 250,
y: 120,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: {
x: 10,
y: 10
},
shadowOpacity: 0.5
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
Its copied from here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shadows/
Here's a Fiddle: http://jsfiddle.net/acbabis/Tu8Qh/

Yes, this is a misbehavior in Chrome which will apply a shadow on both the Kinetic stroke and a second on the Kinetic fill (double shadowing).
The current version of KineticJS has not yet accounted for / corrected this misbehavior satisfactorily.
The workaround is to:
use only a stroke or fill, but not both.
draw 1 filled rect and shadow it. Then draw a second stroked rect on top.

get position of canvas element after drag relative to canvas

I double click on a canvas to create an element, and the user can do this n times. Each element is draggable.
For each element, if I drag it to within a certain rectangle of x/y coordinates, I want to then clearRect() within that rectangle, effectively deleting the dragged element.
How implement this?
Current:
var stage = new Kinetic.Stage({
container: 'container',
width: 662,
height: 983
});
var layer = new Kinetic.Layer();
stage.add(layer);
$(stage.getContent()).on('dblclick', function (event) {
var pos = stage.getMousePosition();
var mouseX = parseInt(pos.x);
var mouseY = parseInt(pos.y);
var text = new Kinetic.Text({
x: mouseX,
y: mouseY,
text: cc,
fill: "blue",
draggable: true,
});
layer.add(text);
layer.draw();
}

You can use yourElement.on("dragend",handler) to test if the element is inside the deletion rectangle.
If it is inside you can use yourElement.destroy() to destroy that element.
Example code and a Demo: http://jsfiddle.net/m1erickson/jqPhe/
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// define the boundaries of the deletion box
var dx=200;
var dy=40;
var dw=100;
var dh=100;
// create the deletion box
var deleteMe=new Kinetic.Rect({
x:dx,
y:dy,
width:dw,
height:dh,
stroke:"red"
});
layer.add(deleteMe);
var label=new Kinetic.Text({
x:dx,
y:10,
text:"Drag here to delete\n(Must be fully inside)",
fill:"black"
});
layer.add(label);
// create a circle element for testing purposes
var circle1 = new Kinetic.Circle({
x:100,
y:100,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// on dragend: test if this circle is inside the deletion rectangle. If yes, delete this circle.
circle1.on("dragend",function(){
var x=this.getX();
var y=this.getY();
if(x>=dx && x<=dx+dw && y>=dy && y<=dy+dh){
this.destroy();
layer.draw();
}
});
layer.add(circle1);
layer.draw();

Create a masked overlay with draggable/resizable underneath

I'm trying to get kineticjs down and worked out a little app which makes my images draggable and resizable. So far so good;
However: I want an overlay with a variable height/width block in the center which should show the image underneath(With the draggable/resizable intact) with a semi-transparent overlay.
I want to be able to still resize/drag behind the overlay while the overlay is still intact(Like this, but with kineticjs: http://envyum.nl/pointer/)
Is there a way to do so? By cutting a block out of an overlaying rectangle perhaps? And can the mouse ignore the overlay such as pointer-events: none can in css3?
Thanks in advance,

I have a sample of what I was talking about in the comments above: http://jsfiddle.net/KwQBB/
This did not require a new layer, but might be good practice to do so.
You can tailor the logic to be whatever you want, especially to simulate a 'cut-out'
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
var pentagon = new Kinetic.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragOnTop: false
});
var rect1 = new Kinetic.Rect({ // overlay
x: 0,
y: 0,
width: stage.getWidth(),
height: 100,
fill: 'gray',
opacity: 0.5,
listening: false // <------ Extremely important
});
var rect2 = new Kinetic.Rect({ // overlay
x: 0,
y: stage.getHeight()/2,
width: stage.getWidth(),
height: 100,
fill: 'gray',
opacity: 0.5,
listening: false // <------ Extremely important
});
// add the shape to the layer
layer.add(pentagon);
layer.add(rect1);
layer.add(rect2); // add more rectangles to complete overlay
// add the layer to the stage
stage.add(layer);

moving more than two arrow lines on canvas

This is my code using kinetic.js
I draw three lines and move using mouse.
$(document).ready(function(){
var y1=50;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group=new Kinetic.Group({
draggable: true,
dragConstraint : 'horizontal'
});
var lineme =function(pts){
var line1 = new Kinetic.Line({
points: pts,
stroke: "black",
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
});
group.add(line1);
}
for(a=0;a<=2;a++)
{
var points1 = [{
x: 73,
y: y1
}, {
x: 300,
y: y1
}];
lineme(points1);
y1=y1+50;
}
group.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
group.on("mouseout", function() {
document.body.style.cursor = "default";
});
// add the shape to the layer
layer.add(group);
// add the layer to the stage
stage.add(layer);
});
I want to draw arrow line I tried more time but I cant find out the proper solution. Is their any arrow function in kinetic js can anyone help me

You have to create a group and add both lines to the group.
Check the following example:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/
Hope it helps!

var line2 = .....
// add another line to the layer before adding it to the stage
layer.add(line2);
surely?