RAPHAELIST

Raphael.jsは日本語ドキュメントが少ないので、初心者には敷居が高いのを何とかするブログ

【Raphael.js】Raphaelエレメントを自由に拡大縮小する方法

scale関数

Raphaelエレメントの拡大縮小を行える関数があります。変更後のサイズを指定するのではなく、倍率を指定することで大きさの指定を行います。

 

実行結果

解説

幅拡張をクリックするとrectエレメントの横幅が、高さ拡張をクリックするとrectエレメントの高さが高くなります。ここでは1.5倍の拡大を行うように設定しています。また、ssclae関数では拡大縮小の中心となるポイントを設定することもできます。

 

Element.scale(horizontal,vertical,centerx,centery);

  • Element: 拡大縮小を行うRaphaelエレメント
  • horizontal: 幅の拡大縮小倍率
  • vertical: 高さの拡大縮小倍率
  • centerx: (省略可能)拡大縮小の中心となるポイントのX座標
  • centery: (省略可能)拡大縮小の中心となるポイントのY座標
  • 返り値: 拡大縮小後のエレメント

 

関連エントリー

【Raphael.js】Raphaelでグラデーション背景を作る方法 - RAPHAELIST