2012-05-04 12 views
1

ラファエルのVML機能を使用して、画像を含む円を生成しようとしています(IE8でボーダー半径が不足している場合の修正)。Raphaël.js:円に合うように円の塗りつぶし画像をスケールする方法は?

私の問題は、私は

circle.attr({fill: 'url(image.jpg)'}); 

と私の画像を使用している場合、画像が部分的にしか示されている円よりも大きいと私は円の直径に画像をダウンスケールする方法を見つけることができないということです。

どうすればいいですか?

答えて

2

IE8 border-radiusをRaphaelJSで修正することに真剣ですか? 私はcss3pieのようなものを示唆しており、使用についてはquestion in SOさえあります。

しかし、RaphaelJSを使用する場合は、イメージを拡大縮小するときにElement.transformを使用し、後でのみ別の要素で丸みを帯びたコーナーエフェクトを設定する必要があります。

+1

はい私は真剣です、各項目が丸められているグラフィカルなツリーなので、ここにはボタンがありません。すべてのアイテムが適切な場所に集められていますが、私は位置付けを解決しましたが、塗りつぶしイメージは縮尺されていません。私は変身を試みます。 css3pieが私の最初の候補でしたが、子要素を持つ要素のボーダー半径を処理できませんでした。 – Tirithen

+0

Tirithen、あなたの状況からちょっとしたものを表示して、正確な状況を再現するためのクライアントサイドコードを表示してください。 – Deele

+0

@Deele - Element.transformを使用して塗りつぶしパターンとして設定された画像を拡大/縮小できません。質問は十分明確です。ボーダー半径についてではなく、サークルに合うように円の塗りつぶし画像を拡大することについてです。また、問題の原因を知るためにコードを追加する必要はありません。 Tirithen - 私は同じ問題を抱えていたので、この解決法をチェックするべきです:http://stackoverflow.com/questions/1098994/scaling-a-fill-pattern-in-raphael-jsそしてこの解決策はこの場合に働きます。正しい幅と高さを設定するだけで、おそらくサークルと同じです。 – Karol

関連する問題