2

私はRaphael JSを使用しており、幅100%がコンテナのように設定されたキャンバスを作成しています...

// there is a `div` with id `paper`
paper = Raphael('paper', '100%', '100%')
paper.circle(50, 40, 100)

今、キャンバスの大きさを知りたいです。すべてのプラットフォームでキャンバスのサイズを確実に確認するにはどうすればよいですか?

私はjQueryを使用していません。

更新:潜在的な回避策

キャバスを比例的にスケーリングすることにより、ピクセル幅を取得する必要がなくなるソリューションには、ボーナス ポイントが与えられます。これが可能であると確信しているcanvasので、Raphaelで可能であると仮定して、すべての要素を設定された幅（たとえば100ピクセル幅のキャンバス）に作成すると、キャンバスを100%画面に合わせて拡大縮小できるはずです。 canvas は、すべての要素が適切に引き伸ばされ、それらの比率を維持した状態で画面いっぱいに表示される必要があります。

4

1 に答える 1

3

ビューボックスを使用して、全画面表示モードに合わせて拡大縮小できます。

http://raphaeljs.com/reference.html#Paper.setViewBox

SVG データを含む物理領域 (x、y、幅、高さ) を定義すると、比率を維持しながらすべてが拡大されます。ビューボックスの領域は、(fit に false を指定した場合) コンテナー内に収まる最大サイズに比例して拡大されます。

paper.setViewBox(0, 0, 100, 100, false);​

残念ながら、Raphael は、オーバーフローの処理方法を指定するオプションを提供していないようです。たとえば、ビュー ボックスを中央に配置して、余分な部分が均等に広がるようにすることができます。100 x 200 のコンテナーがあり、100 x 100 のビューボックスがある場合、ビューポートを上に 50 ピクセル、下に 50 ピクセルにしたい場合、アップスケールされたビューポートの下に 100 ピクセルの高さがあります。

SVG では、これらのオプションは SVG コンテナーのpreserveAspectRatioプロパティで定義されます。VML (lte ie8) オプションをサポートしていない場合は、このプロパティを変更して配置に影響を与えることができます。

http://premsobel.info/notes/ml/svg/viewports.html

一般的な幅と高さの検出に関しては、 と を使用して親ノードの幅または高さを検出したほうがよいでしょelement.clientWidthうelement.clientHeight。body を親ノードとして使用することを避け、サイズを検出するために独自の内部コンテナーを追加する傾向があります。あなたのキャンバスはコンテナの 100% の幅/高さなので、そのコンテナを探してそのサイズを調べます。

于 2012-12-07T11:37:15.913 に答える