Question

我有一组未标记的图像，我需要提供标记和未标记的图像。我有标签文字和位置。我不想要有两个图像（标记和未标记）;相反，我想把文本放在图像上，无论是在相对定位的div中，还是使用Raphaël作为SVG文本元素，这些是我在技术上很舒服的两种方法。项目的性质决定了图像和标签作为不同的资源传递给浏览器。

理想情况下，标签会包含this image中的指示线（注意我知道标签是示例中图像文件的一部分 - 我希望我的最终结果是看像这样。）

我想知道是否有任何理由更喜欢一种方法而不是另一种方法（div s或SVG元素）？用于定位标签的现有javascript库将是对这两种方法的强烈推荐;否则我想使用Raphaël在SVG中绘制指标线会更容易。 jQuery和Raphaël已经在该项目中可用。

Answer 1

我认为在Raphael绘图中对SVG文本项使用绝对定位的div有两个主要原因：

您有多行文字，不想手动换行（如工具提示）
您确实需要HTML文本可用的完整CSS样式

在你的情况下，我会做一个小拉斐尔函数来放置标签并在图像上的适当位置画一条线。此示例将图像边缘上的标签置于其指示的点的y值处，但您可以轻松调整以将标签放在图像上以及不同的高度（即对角线）。

//x and y relative to image
Raphael.el.label = function (label, dx, dy) {
    //absolute x and y
    var x = dx + this.attr("x"),
        y = dy + this.attr("y"),
        label,
        line;
    //decide whether to put label on left or right
    if (dx < this.attr("width") / 2) {
        label = paper.text(this.attr("x") - 10, y, label).attr("text-anchor" , "end");
        line = paper.path("M" + (this.attr("x") - 5) + "," + y + "l" + (dx + 5) + ",0").attr("stroke", 2);
    } else {
        label = paper.text(this.attr("x") + this.attr("width") + 10, y, label).attr("text-anchor" , "start");
        line = paper.path("M" + (this.attr("x") + this.attr("width") + 5) + "," + y + "L" + (x) + "," + y).attr("stroke", 2);   
    }            
};

jsFiddle

我该如何在图像上贴标签？

1 个答案: