1

ラベル付きとラベルなしで提示する必要のあるラベルなしの画像のセットがあります。ラベルのテキストと位置があります。2つの画像（ラベル付きとラベルなし）は必要ありません。むしろ、テキストを画像の上に配置したいのですが、相対的な位置に配置するか、divRaphaëlを使用したSVGテキスト要素として使用します。これらは、技術的に快適な2つのアプローチです。プロジェクトの性質上、画像とラベルは個別のリソースとしてブラウザに配信されます。

理想的には、ラベルにはこの画像のようにインジケーターラインが含まれます（注：この例では、ラベルが画像ファイルの一部であることを認識しています。最終結果を次のようにしたいと思います）。

divあるアプローチを他のアプローチ（ sまたはSVG要素のいずれか）よりも好む理由があるかどうか疑問に思っていますか？ラベルを配置するための既存のjavascriptライブラリは、どちらのアプローチにも強く推奨されます。そうでなければ、Raphaëlを使用したSVGでインジケーターラインを描画する方が簡単だと思います。jQueryとRaphaëlはすでにプロジェクトで利用可能です。

4

1 に答える 1

2

Raphael図面内のSVGテキストアイテム上に絶対位置のdivを使用する2つの主な理由がわかります。

  • 複数行のテキストがあり、手動で折り返したくない（ツールチップなど）
  • 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 に答える