1

I have a set of unlabeled images which I need to present labeled and unlabeled. I have the label text and positions. I do not want to have two images (labeled and unlabeled); rather, I want to put the text over the image, either in relatively-positioned divs or as SVG text elements using Raphaël, those being two approaches I'm technically comfortable with. The nature of the project dictates that the image and the labels be delivered to the browser as distinct resources.

Ideally the labels would include indicator lines as in this image (N.B. I'm aware that the labels are part of the image file in the example - I want my end result to look like this.)

I'm wondering if there is any reason to prefer one approach over the other (either divs or SVG elements)? An existing javascript library for positioning labels would be a strong recommendation for either approach; otherwise I suppose drawing the indicator lines would be easier in SVG using Raphaël. jQuery and Raphaël are already available in the project.

4

1 回答 1

2

我看到在 Raphael 绘图中使用绝对定位的 div 而非 SVG 文本项的两个主要原因：

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

在您的情况下，我会制作一个小的 Raphael 函数来放置标签并在图像上的适当位置画一条线。此示例将标签放置在图像边缘的 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

于 2013-01-01T16:29:59.863 回答