2

( Raphaelライブラリを使用して) 初めて SVG をいじる過程で、キャンバス内に完全に含まれるような方法で動的要素をキャンバスに配置するという問題に遭遇しました。私がやろうとしているのは、ランダムにn個の単語/短いフレーズを配置することです。

テキストは可変であるため、その位置も可変である必要があるため、私がやっていることは次のとおりです。

  1. 最初0,0に、不透明度のないポイントでテキストを作成します。
  2. を使用して、描画されたテキスト要素の幅を確認しますtext.getBBox().width。
  3. 新しいx座標を として設定しMath.random() * (canvas_width - ( text_width/2 ) - pad)ます。
  4. テキストのx座標を新しく設定した値に変更します ( text.attr( 'x', x ))。
  5. テキストの不透明度属性を 1 に設定します。

私の数学の洞察力が限られていることを最初に認めますが、これはかなり簡単に思えます。どういうわけか、テキストがキャンバスの右端からはみ出してしまいます。上記を簡単にxするために、結果に追加することで最小値も設定するビットを削除しましたMath.random()。しかし、それはそこにあり、キャンバスの前縁にも同じ問題が見られます.

私の理解では（そのように）、Math.random()ビットは0から1の間の数値を生成し、それを何らかの数値（私の場合、キャンバス幅-テキスト幅の半分-任意のパディング）で乗算して取得できるということです外側の境界。グリッド上のテキストの位置が中央に設定されているため、テキストの幅を半分に分割しています。

あまりにも長い間これを見つめていたことを願っていますが、私の数学はMath.random()さびているのでしょうか、それとも、このソリューションのフードの下にある 、SVG、テキスト、またはその他の動作について誤解しているのでしょうか?

4

1 に答える 1

1

Math.random()答えは、方程式について私がどのように考えていたかであることが判明しました。もちろん、最大値を掛けてから最小値を追加するほど単純ではありません。これは、コンテナーの右端に 2 倍の幅のガターを設定し、境界全体を移動してそのガターの半分を消費するようなものです。

var x  = Math.random() * ( canvas_w - 20 - ( text.getBBox().width ) ) + ( text.getBBox().width/2 + 10 );

英語で...

考慮したい各要素の幅を 2 ​​倍にする必要があるため、その幅だけ範囲全体を元に戻して、物事をうまく均等に保つことができます。私の場合、テキストの幅の半分に 10 のパディングを加えたものを考慮したいと考えています。

例えば...

キャンバスの幅500、テキストの幅50、必要な「ガター」 を指定して、と( )10の間に乱数を作成します。考慮する必要がある幅 (テキスト幅の半分 ( ) + パディング ( )) を追加すると、との間の乱数が残ります。テキストがその境界の外縁にある場合、またはまでしか到達できません。0430500 - 20 - 5025103546510490

うまくいけば、それは意味をなすのに十分明確です。考えてみれば当然のことなのですが、この種のことはすぐには直感的に理解できないので、ここで頻繁に参照することになると思います。

于 2010-04-29T19:18:31.607 に答える