让用户在 div/img 上画一条线（箭头）

Question

使用 jQuery 插件：imgareaselect (http://odyniec.net/projects/imgareaselect/)，我让用户选择图像的区域来添加 cmets（就像 flickr 一样）。 我的目标是让用户绘制指向特定图像区域的箭头，而不是绘制框。

知道是否（以及如何）我可以修改 imgareaselect 以绘制线条（带有箭头）而不是选择框？

我读到我可以使用 Canvas 或 processing.js，但 AFAIK 要么不起作用，要么对 IE 有限制。

谢谢， 亚瑟

Answer 1

您可以使用 CSS 绝对定位在照片顶部制作一组箭头图像以叠加。例如，制作 18 个箭头，每个箭头都从最后一个旋转 360° / 18 = 20°。使用 CSS sprite 技术应该可以让您改变箭头的长度。

在下面的描述中，我将箭头的 start 称为文本框附近的结尾，将 end 称为指向文本框上的点图片。

要计算（顺时针）箭头角度以使用给定的一对像素指向的 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;