3

raphaeljs アイコンのサイズを変更しようとしています。しかし、私はいくつかの奇妙なサイズ変更オーバーフローの問題を抱えています.修正方法は本当にわかりませんが、すでにいくつかの方法を試しました.

ここに問題のあるライブリンクがあります: http://jsfiddle.net/ydmSB/2/

これはJSコードです：

var message = "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z";

var elements = document.querySelectorAll('.message');
for (i = 0; i < elements.length; i++) {
    paper = Raphael(elements[i], 200, 200)
    paper.path(message).attr({
        "fill": "#333"
    }).transform("s5");
}​

私のCSSコード:

.wrapper { width:400px; height:auto; margin-left:auto; margin-right:auto; }
.icon {
    margin-left:50px;
    margin-top:50px;
}​

私のHTMLコード:

<div class="wrapper">
   <div class="icon">
      <div class="message">

      </div>
   </div>
</div>​
4

2 に答える 2

3

左上transform隅からパスをスケーリングしたいように見える場合、コマンドは公称中心を中心にパスをスケーリングしています。したがって、表示されている結果は、アイコンがコンテナーの左上隅を超えてスケ​​ーリングされていることです。この場合は.messagediv.

1 つの修正方法は、 などの変換に中心点を指定することtransform("s5,5,0,0")です。もう 1 つは、スケーリングを行うためにより多くのスペースを提供することです。もう 1 つは、変換に x,y 変換も提供することです (t50,50たとえば)。

一般に、ラファエル ペーパー オブジェクトを含む中に、すべてのスケーリング変換を実行するのに十分なスペースがあることを確認する必要があります。あなたの例では、にheight設定した div のサイズを取得していますauto。つまり、フォント サイズが用紙のサイズに影響し、クリッピングの問題が発生する可能性があります。疑わしい場合は、用紙サイズを手動で設定してください。

于 2012-11-10T06:20:00.333 に答える
2

わかりました、これは、デフォルトでは、スケール変換がオブジェクトの中心から拡大するという事実によるようです。そのため、それを入れたコンテナの外側で文字通り拡大しています.

必要に応じて、原点を指定できます。

}).transform("s5,5,0,0");

これは基本的に、「x を 5 倍、y を 5 倍にスケーリングしますが、オブジェクトの 0,0 座標から変換を開始します」ということです。

ドキュメンテーションはここにあり、地獄のように混乱しています。読み方を理解するのに数回の試行が必要でした！http://raphaeljs.com/reference.html#Element.transform

それが役立つことを願っています!

于 2012-11-10T06:19:11.053 に答える