Позвольте пользователям нарисовать линию (стрелку) на div / img

Question

Использование плагина jQuery: imgareaselect (http://odyniec.net/projects/imgareaselect/), Я позволяю пользователям выбирать области изображения для добавления комментариев (как в flickr). Я хочу, чтобы пользователи рисовали стрелки, указывающие на определенные области изображения, а не на блоки рисования.

Есть идеи, если (и как) я могу изменить imgareaselect для рисования линий (с наконечником стрелки) вместо полей выбора?

Я читал, что мог бы использовать Canvas или processing.js, но AFAIK те, которые либо не работают, либо имеют ограничения для IE.

Спасибо, Ясир

Answer 1

Вы можете сделать набор изображений стрелок для наложения, используя абсолютное позиционирование CSS, поверх фотографии. Например, сделайте 18 стрелок, каждая из которых повернута от последней на 360 ° / 18 = 20 °. Использование техники спрайтов CSS должно позволять вам изменять длину стрелки.

В последующем описании я ссылаюсь на начало стрелки в качестве конца рядом с текстовым полем, а конец - на точку, указанную на рисунке.

Чтобы вычислить угол стрелки (по часовой стрелке) для использования с учетом пары координат x-y пикселя, на который указывает пиксель, и координат текстового поля, мы используем:

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

Тогда ваш сценарий может выбрать ближайшую готовую стрелку:

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;