CODEWITHSUNDEEP
kineticjs
jmcclane
jmcclane

Reputation: 189

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?

Upvotes: 0

Views: 114

Answers (1)

lavrton
lavrton

Reputation: 20323

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

Upvotes: 1

Related Questions