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

Question

Using the jQuery: imgareaselect plugin (http://odyniec.net/projects/imgareaselect/), I let users select image areas to add comments (just like flickr). I try to make users draw arrows pointing to specific areas of the image instead of drawing drawers.

Any idea if (and how) I can change imgareaselect to draw lines (with arrow) instead of select boxes?

I read that I can use Canvas or processing.js, but AFAIK they either do not work, or they have restrictions on IE.

Thanks, Yasser

Answer 1

, CSS, . , 18 , 360 °/18 = 20 °. CSS sprite .

, - , .

( ) x-y , :

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

script :

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

, ( ) :

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

l - . , :

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

.

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