Let users draw a line (arrow) on a div/img

Question

Using the jQuery plugin: imgareaselect (http://odyniec.net/projects/imgareaselect/), I let users select areas of an image to add comments (just like flickr). I'm aiming to let users draw arrows pointing on specific image areas instead of drawing boxes.

Any idea if (and how) I can modify imgareaselect to draw lines (with an arrow head) instead of selection boxes?

I read that I could use Canvas or processing.js, but AFAIK those either don't work or have limitations on IE.

Thanks, Yasser

Answer 1

You can make a set of arrow images to overlay, using CSS absolute positioning, on top of the photo. For example, make 18 arrows, each rotated from the last one by 360° / 18 = 20°. Using the CSS sprite technique should allow you to vary the length of the arrow.

In the description that follows, I refer to the start of the arrow as the end near the textbox, and the end as the spot that is pointed to on the picture.

To calculate the (clockwise) arrow angle to use given a pair of x-y coordinates of the pixel pointed to and those of the text box location, we use:

var radians = Math.atan2(startY - endY, startX - endX),
    degrees = radians * 180 / Math.PI;
if (degrees < 0) degrees += 360;

Then your script could choose the closest pre-made arrow:

var approxDegrees = Math.round(degrees / 20) * 20;

When the arrow is loaded, position its top-left corner (relative to the end) according to:

var approxRadians = approxDegrees / 180 * Math.PI,
    imageX = arrowLength * Math.cos(approxRadians),
    imageY = arrowLength * Math.sin(approxRadians);

where l is the length of the arrow. Finally, trim the arrow:

var width = Math.abs(endX - startX);
var height = Math.abs(endY - startY);

and put the center of the text box on the start of the arrow.

var textX = (startX + textWidth) / 2;
var textY = (startY + textHeight) / 2;