ユーザーが拡大縮小移動回転などできるオブジェクトをAS3で
以前AS2で作ったことあるんですが、AS3で必要になり移植だるいなーと思ってたらふとそんなライブラリがあったなーということで試してみました。
TransformTool
http://www.senocular.com/demo/TransformToolAS3/TransformTool.html
使い方は超簡単。newしてaddChildしてtarget決めるだけ。
var tTool:TransformTool = new TransformTool(); addChild(tTool); tTool.target = container;クリックされたらtargetを入れ替えるようにすればそれっぽく使えそうです。
しかもいろいろな設定ができて至れり尽くせりな感じ。
tTool.registration = new Point(container.width/2, container.height/2); // 中心点 tTool.controlSize = 30; コントロールポイントの大きさ tTool.moveEnabled = false; // 移動できるかどうか tTool.registrationEnabled = false; // 中心点の表示 tTool.rotationEnabled = false; // 回転できるかどうか tTool.scaleEnabled = false; // 拡大縮小できるか tTool.skewEnabled = false; // 菱形に変形できるかどうか tTool.outlineEnabled = false; // 枠をの表示 tTool.cursorsEnabled = false; // カーソル変更するかどうか tTool.constrainScale = true; // 比率を保つかどうか tTool.constrainRotation = true; //constrainRotationで設定した角度ずつ回転 tTool.constrainRotationAngle = 10; tTool.maxScaleX = 2; // scaleXの最大値 tTool.maxScaleY = 2; // scaleYの最大値他にもよく分からないプロパティがいくつかあったのでいろいろできそう。
あとコントロールポイントの見た目もカスタマイズできるっぽい。
サンプル
package
{
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import com.senocular.display.TransformTool;
[SWF(width="500", height="400", frameRate="30", backgroundColor="0xffffff")]
public class TransformTest01 extends Sprite
{
[Embed(source='photo.jpg')] private var Photo:Class;
public function TransformTest01()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
init();
}
private function init():void
{
var container:Sprite = new Sprite();
var photo:Bitmap = new Photo() as Bitmap;
container.addChild(photo);
addChild(container);
var tTool:TransformTool = new TransformTool();
addChild(tTool);
tTool.target = container;
tTool.registration = new Point(container.width/2, container.height/2); // 中心点
//tTool.controlSize = 30; コントロールポイントの大きさ
//tTool.moveEnabled = false; // 移動できるかどうか
//tTool.registrationEnabled = false; // 中心点の表示
//tTool.rotationEnabled = false; // 回転できるかどうか
//tTool.scaleEnabled = false; // 拡大縮小できるか
//tTool.skewEnabled = false; // 菱形に変形できるかどうか
//tTool.outlineEnabled = false; // 枠をの表示
//tTool.cursorsEnabled = false; // カーソル変更するかどうか
//tTool.constrainScale = true; // 比率を保つかどうか
//tTool.constrainRotation = true; //constrainRotationで設定した角度ずつ回転
//tTool.constrainRotationAngle = 10;
//tTool.maxScaleX = 2; // scaleXの最大値
//tTool.maxScaleY = 2; // scaleYの最大値
}
}
}
