javascript - Raphael JS ライブラリで複数行のテキスト シフトを無効にする方法

Question

デフォルトでは、紙にテキスト オブジェクトを追加するとき、Raphael JavaScript ライブラリはテキストを y ポイントの中心に配置します。基本的に高さを取り、それを 2 で割り、テキストを新しい y 座標にアタッチします。複数行を追加してもテキストが同じ座標にとどまる別の動作を探しています。

誰かがその振る舞いをきれいに変える方法を持っているかどうか疑問に思っていました。ソースコードを変更することはできますが、新しいバージョンが出たときに常に維持するのは嫌です。

ありがとう！

Answer 1

基本的に、テキストオブジェクトのデフォルトのアクションについて説明しました。

「attr」メソッド内で「text-anchor」：「start」を使用します。

Raphaelの追加リソースのヘルプデータベースを紹介します。ここでは、テキストの例を見て、インタラクティブな環境でそれらを切り替えることができます。

http://www.irunmywebsite.com/raphael/additionalhelp.html?q=text

Answer 2

これは、私のプロジェクトの1つで行う方法です。コードをhttp://raphaeljs.com/playground.htmlに貼り付ければ、これを試すことができます

// create rectangle 

var locx = 300
var locy = 200
paper.rect(locx, locy, 100,100)

// create raw text

element2 = paper.text(locx, locy, "Raphael\n \njust\nrocks")

element2.attr("text-anchor", "start")

// measure the raw text

var bbox = element2.getBBox()


// compute the scale

var scalex = 100/bbox["width"]
var scaley = 100/bbox["height"]

var translation = "s"+ scalex + "," + scaley

// scale the text
element2.transform(translation)

// measure the scaled text
var bbox = element2.getBBox()

// compute the offets of the scaled text

offsetx = locx - bbox["x"]
offsety = locy - bbox["y"]

translation = translation + "T" + offsetx + "," + offsety

// do the final translation

element2.transform(translation)

よりエレガントなソリューションは大歓迎です。