Question

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

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

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

谢谢，亚西尔

Answer 1

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

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

要计算（顺时针）箭头角度，给定一对指向的像素的x-y坐标和文本框位置的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;

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

1 个答案: