【Raphael.js】画像を埋め込む方法

image関数

今回はRapahel上での画像の取扱いについてです。Raphaelの関数で画像をベコッと埋め込む方法になります。使いどころはいろいろあると思いますが、SVGでは表現しきれない細かい描写や、スライドショーなどの実装面で役立ちそうな気がします。

実行結果

画像を張るだけの簡単なスクリプトです。再生ボタンで実行結果を見れます。

解説

特筆することは特にありませんが、サイズ指定をした場合、画像の縦横比が崩れる可能性があることだけ理解しておいてください。それ以外はrect関数やcircle関数などと変わりありません。

Paper.image( src, x, y, width, height );

• Paper: Raphael関数で指定した描画エリア
• src: 画像のURL
• x: (省略可)フォントの太さ
• y: (省略可)フォントの装飾
• width: (省略可)フォントの割り付け
• height: (省略可)フォントの割り付け
• 返り値: 画像オブジェクト