Search code examples
kineticjs

KineticJS Tooltip point to the middle of a line

I draw a line like this:

var connect_line = new Kinetic.Line({
        points : [beginX, beginY, endX, endY - 10],
        name : 'line',
        stroke : '#6699ff',
        strokeWidth : 4,
        lineCap : 'round',
        dash : [29, 20, 0.001, 20],
        id : id
});

I want to show a tooltip on mouseover:

var tooltip = new Kinetic.Label({
        x : ?,
        y : ?,
        opacity : 0.75
    });
...

How do I have to calculate the coordinates for the tooltip to show it pointing to the middle of the line ? Additionally when the line is draggable, how do I have to calculate the new coordinates of the middle of the line?

Solution

  • You can get x and y this way:

    var x = line.points()[0] / 2 + line.points()[2] / 2 + line.x();
var y = line.points()[1] / 2 + line.points()[3] / 2 + line.y();

    Demo: http://jsbin.com/nibuv/1/edit