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

Question

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

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

我读到我可以使用 Canvas 或processing.js，但据我所知，这些要么不起作用，要么在 IE 上有限制。

谢谢， 亚西尔

Answer 1

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

在下面的描述中，我将箭头的开始称为文本框附近的结束位置，将结束称为图片上指向的点。

为了计算（顺时针）箭头角度以使用给定的一对像素指向的 xy 坐标和文本框位置的坐标，我们使用：

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;