0

私はラジアル メニュー (ゲーム用) に取り組んでいますが、パスに沿ってテキストを希望どおりに動作させるのに問題があります。現時点でのメニューの例は次のとおりです。

わずかに壊れています

すべてのテキストをノードの中央に配置し、fontSize を十分に小さくして、テキストが使用可能なスペースに収まるようにします。これは、フォントをスケーリングし、収まるまで幅を測定することで、ストレート テキストの場合はかなり簡単に実現できます。

var fontSize = 19;
var titleText = new Kinetic.Text({
    text: title,
    fontSize: fontSize ,
    fontFamily: 'Calibri',
    fill: 'white',
    rotationDeg: rotation
});


while (titleText.getWidth() > availableSpace)
    titleText.setFontSize(--fontSize);

ただし、(私が見る限り)パスに沿って配置された文字列の長さを測定する方法がないため、このアプローチは湾曲したテキストには適用できません。

テキストがパスに沿って配置されている場合、テキストのセンタリングとスケーリングをどのように達成すればよいですか?

4

1 に答える 1

1

これはセンタリングに関するハックですが、アイデアはわかります：

http://jsfiddle.net/ysaLp/2/

基本的に、リストに各項目がある場合、円弧の合計スペースに応じて、先頭に空白を追加します。

あなたがすることができます（繰り返しますが、ループ内で）：

textPathObjectName.setText(' ' + textPathObjectName.getText()); //dependent on the length of the width of text ( .getTextWidth() )

サイズ変更に関しては、次のようになります: http://jsfiddle.net/ysaLp/5/

    for (var i = 1; i < 5 && titleText.getTextWidth() > circumference ; i++)
        titleText.setFontSize(titleText.getFontSize()-i);

ウェッジの円周に「収まる」までフォントを下げます

直後にパス データを計算するため、最初にフォント サイズを 15 に設定するため、フォントを低い値から開始することも役立ちます。

于 2013-01-25T16:43:36.313 に答える