KAGEXではLayerクラスを拡張したAffineLayerクラスを利用できます。AffineLayerクラスを使うと簡単に回転や拡大縮小した画像を表示できます。
画像を表示
以下はAffineLayerに”star.png”を読み込んで表示するだけの例です。Layerと使い方は同じなので、AffineLayerの部分をLayerに変えてもそのまま動きます。
// レイヤオブジェクトを生成
var layer = new AffineLayer(kag, kag.fore.base);
// 画像を読み込む
layer.loadImages("star.png");
layer.setSizeToImageSize();
// 表示
layer.visible = true;
画像を回転
次は回転させてみる例です。
// レイヤオブジェクトを生成
var layer = new AffineLayer(kag, kag.fore.base);
// 画像を読み込む
layer.loadImages("star.png");
layer.setSizeToImageSize();
// 回転原点を画像中央に設定
layer.afx = AffineLayer.AFFINEOFFSET_CENTER;
layer.afy = AffineLayer.AFFINEOFFSET_CENTER;
// 画面中央に移動
layer.left = kag.width / 2;
layer.top = kag.height / 2;
// 90度回転させてみる
layer.rotate = 90;
// 表示
layer.visible = true;
afx, afyで回転原点を設定できます。その機能はKAGEXコマンドのafx, afyと同じです。その点を中心として回転や拡大縮小などが実行されます。afx,afyは整数で設定することもできますが、あらかじめ定義された定数も使えます。使える定数は以下の様になります。
| 定数名 | 設定される値 |
|---|---|
| AffineLayer.AFFINEOFFSET_DEFAULT | 初期値(0) |
| AffineLayer.AFFINEOFFSET_CENTER | 画像中央 |
| AffineLayer.AFFINEOFFSET_LEFT | 画像左端(afxのみ) |
| AffineLayer.AFFINEOFFSET_RIGHT | 画像右端(afxのみ) |
| AffineLayer.AFFINEOFFSET_TOP | 画像上端(afyのみ) |
| AffineLayer.AFFINEOFFSET_BOTTOM | 画像下端(afyのみ) |
また、Layerと同じようにleft, topで画像の位置を設定できます。ただしその機能は表示原点(KAGEXコマンドのorx, ory)と同じになります。つまりleft,topに指定した座標(回転原点)に回転原点が重なるようになります。KAGEXの回転原点と表示原点について忘れた方はKAGEX講座(12) – レイヤ表示位置(afx, afy, orx, ory)を参照してください。
その他の変形プロパティ
rotate以外にも様々なプロパティが用意されています。以下の表に主なものをまとめます。これ以外にopacityやwidth, heightなどLayerクラスと同じプロパティや関数なども利用できます。
| プロパティ名 | 初期値 | 説明 |
|---|---|---|
| flipx | false | trueなら横方向に反転 |
| flipy | false | trueなら縦方向に反転 |
| rotate | 0 | 回転角度 |
| zoomx | 100 | 横方向の拡大率 |
| zoomy | 100 | 縦方向の拡大率 |
| zoom | 100 | zoomx, zoomyを一括指定 |
| slantx | 0 | 横方向の剪断 |
| slanty | 0 | 縦方向の剪断 |
| afx | 0 | 回転原点のx座標 |
| afy | 0 | 回転原点のy座標 |
| orx | 0 | 表示原点のx座標 |
| ory | 0 | 表示原点のy座標 |
| raster | 0 | ラスター振幅量 |
| rasterLines | 100 | ラスター行数 |
| rasterCycle | 1000 | ラスター周期 |
それぞれのプロパティはKAGEXでも同じ属性名のコマンドとして用意されています。ここで改めて機能の説明はしません。