kineticjs custom hit region not working

Question

I have a draggable line with a stroke width of 2 and want the user to be able to drag the line even if he clicks and drags near the surrounding area. As per my understanding, the way to do that is to define a custom drawHitFunc for the line. I adapted the code from tutorial here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ to define my custom drawHitFunc for the line.

My custom draw hit function is simple--same line but much thicker (25 pixels wide). However, this does not seem to work. The drag only works if I carefully place my mouse pointer right on the line and then drag. Based on the drawHitFunc defined below, it should work even if I click and drag near the line. What am I doing wrong?

Here is the drawHitFunc snippet:

function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.lineWidth = 25;
context.moveTo(this.getPoints()[0].x, this.getPoints()[0].y);
context.lineTo(this.getPoints()[1].x, this.getPoints()[1].y);
context.closePath();
canvas.fillStroke(this);
}

The full failing example is at: http://jsfiddle.net/BwF6K/

Any help pointing out what I missed is appreciated.

Thanks.

score 2 · Answer 1 · answered Jul 19 '13 at 12:53

You can actually use a line as the hit area for a Line object. And you can achieve this in two ways:

Assign the line's internal colorKey as the strokeStyle and use the native canvas stroke:

context.lineWidth = 10; context.strokeStyle = this.colorKey; context.stroke();
The other solution is to set the strokeWidth before calling fillStroke, and then setting it back:

this.setStrokeWidth(10); canvas.fillStroke(this); this.setStrokeWidth(3);

score 2 · Answer 2 · answered Oct 29 '13 at 01:17

2

In Kinetic 4.7.2 the solution looks like:

  drawHitFunc: function(context) {
    var hitWidth = 50;
    context.beginPath();
    context.moveTo(this.getPoints()[0].x, this.getPoints()[0].y);
    context.lineTo(this.getPoints()[1].x, this.getPoints()[1].y);
    context.closePath();
    var orgWidth = this.getStrokeWidth();
    this.setStrokeWidth(hitWidth);
    context.fillStrokeShape(this);
    this.setStrokeWidth(orgWidth);
  }

answered Oct 29 '13 at 01:17

kofifus

17,260
17
99
173

I was looking for a custom hit function it worked like a charm! thanks! – pedrommuller Mar 26 '14 at 17:57

score 0 · Accepted Answer · answered Mar 01 '13 at 21:33

Yes, it looks like KineticJS doesn’t like custom hit-testing a line.

Instead, this works…rather than using a “fat” line in the custom hittest, just draw a rectangle around the line.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/twUqx/

  var line = new Kinetic.Line({
        points: [fromX, fromY, toX, toY],
        stroke: drawColor,
        strokeWidth: 2,
        name: 'line',
        draggable:true,
        drawHitFunc: function(canvas) {
          var x1=this.getPoints()[0].x;
          var y1=this.getPoints()[0].y;
          var x2=this.getPoints()[1].x;
          var y2=this.getPoints()[1].y;
          var context = canvas.getContext();
          context.beginPath();
          context.lineWidth = 25;
          context.moveTo(x1-12,y1-12);
          context.lineTo(x2+12,y1-12);
          context.lineTo(x2+12,y2+12);
          context.lineTo(x1-12,y2+12);
          context.closePath();
          canvas.fillStroke(this);
        }
    });

Notice that I drew a horizontal line because I didn’t feel like working out the trig for a rotated line =)

Thanks. Using a rect worked for drawHitFunc and some linear algebra took care of figuring out the exact corner points around any arbitrary line. — Michael Wiley, Mar 04 '13 at 05:25
@markE Is it possible to override the default hitFunc for Line so that each line I create doesn't have to hold the same function (memory inefficient). I've tried with Kinetic.Line.prototype.hitFunc = function(context) { // hit code } but it says context is undefined. Any ideas? — lawls, May 10 '14 at 08:46
Yes, you can use javascripts `.call` method to point every Kinetic.Line's hitFunc to a single common function rather than each line having their own individual hitFunc. BTW, the syntax for assigning a custom hitFunc in recent versions of KineticJS now `hitFunc` rather than `drawHitFunc` — markE, May 10 '14 at 15:32

kineticjs custom hit region not working

3 Answers3

Linked