我應該如何在圖像上放置標籤？

我有一套未標記的圖像，需要提供標記和未標記的圖像。我有標籤文字和位置。我做不是想要有兩個圖像（標記和未標記）;相反，我想將文字放在圖像上，或者放在相對定位的div或使用Raphaël的SVG文本元素，這些是我在技術上感覺舒適的兩種方法。該項目的性質決定了將圖像和標籤作爲不同的資源交付給瀏覽器。我應該如何在圖像上放置標籤？

理想的標籤將包括指標線在this image（NB我知道，在標籤中的示例圖像文件的一部分 - 我希望我的最終結果看這樣）

我想知道是否有任何理由更喜歡使用一種方法（div或SVG元素）？現有的用於定位標籤的JavaScript庫將是強烈推薦這兩種方法;否則我想在使用Raphaël的SVG中繪製指標線會更容易。 jQuery和Raphaël已經在項目中可用。

來源

2013-01-01 pjmorse

爲什麼不使用PHP的GD庫？可能是最好的選擇恕我直言 – jeremy

因爲較大的項目不在PHP中。我將澄清這個問題：圖像和標籤數據將作爲單獨的資源提供給瀏覽器。 – pjmorse

我看到使用拉斐爾繪畫中超過SVG的文本項絕對定位的div主要有兩個原因：

你必須多行文字，不想手動把它包（如提示）
你真的需要完整的CSS樣式可用於HTML文本

在你的情況，我會做一個小拉斐爾函數放置標籤，並繪製一條線到圖像上的適當位置。這個例子把標籤上的表示現場的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-01 16:29:59

+1，好吧，先生！ –

我喜歡這個。堅實的解釋，爲什麼要這樣做，好的佈局算法（聰明，但不那麼聰明，以致不可理解）和代碼！謝謝。 – pjmorse

我應該如何在圖像上放置標籤？

回答

相關問題