Custom drawfunc in KineticJS

Question

I have gone through few articles for detecting hit only on the perimeter of circle or rectangle. Some workarounds for implementing it is done by doing maths on click event of the shape or creating groups. That's fine. But is there any way we can implement this by creating a custom draw function that just draws the perimeter of a rectangle, circle (stroke only).

Any help would be much appreciated.

Answer 1

This is really simple if you set your hit function. Here's a jsfiddle:

http://jsfiddle.net/L3EST/

The key is to use the strokeShape() method in your custom hit function instead of fillStrokeShape(), which is what the default hit function uses.

  var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 100,
    height: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 10,
    drawHitFunc: function(context) {
      context.beginPath();
      context.rect(0, 0, this.getWidth(), this.getHeight());
      context.closePath();
      context.strokeShape(this);
    }
  });

After attaching events as is done in the jsfiddle, when you mouseover or mouseout of the perimeter of the shape, the events are fired.