The syntax of KineticJS has changed a great deal since V4.3.3.
Here's the new syntax for setting the hit function:
(Note that you're now given a context instead of a canvas as a parameter)
myShape.hitFunc( function(context){ ... } );
[ Addition to answer to refactor your code to work in KineticJS V5.1 ]
A working Demo: http://jsfiddle.net/m1erickson/2QG5W/
KineticJS now has a dragmove
event which lets you respond every time your greenLine or blueLine is dragged.
This means you can:
Listen for
dragmove
on the green line and automatically reposition the circle vertically.Listen for
dragmove
on the blue line and automatically reposition the circle horizontally.
This is much simpler than the way it had to be done in version4!
Here's how:
// reposition the circle vertically
// every time the green line is dragged vertically
GreenLine1.on('dragmove',function(){
circle1.y(GreenLine1.y()+GreenLine1.points()[1]);
layer.draw();
});
// reposition the circle horizontally
// every time the blue line is dragged horizontally
BlueLine1.on('dragmove',function(){
circle1.x(BlueLine1.x()+BlueLine1.points()[0]);
layer.draw();
});
One other thing
You can set a dragBoundFunc
to keep the user from dragging your green line horizontally and keep the user from dragging your blue line vertically.
Here's how:
// save the X position of the green line
GreenLine1.fixedX=GreenLine1.x();
// let the user drag the green line vertically
// but not horizontally
GreenLine1.dragBoundFunc(function(pos){
pos.x=GreenLine1.fixedX;
return(pos);
});
// save the X position of the green line
BlueLine1.fixedY=BlueLine1.y();
// let the user drag the blue line horizontally
// but not vertically
BlueLine1.dragBoundFunc(function(pos){
pos.y=BlueLine1.fixedY;
return(pos);
});