2010年1月30日土曜日

[AS3.0]SVG表示してみた

ベクター形式の画像を表示したいと思ったので、折角だから最近流行ってる?SVG形式を試しに使ってみました。
こんな感じです。
何もしないと真っ白なままなので、クリックやドラッグをしてみてください。SVG画像が表示されます。
SVG形式の画像はInkscapeで作りました。
ソースコードはこちら。
package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 
 import frocessing.shape.FShapeSVG;

 [SWF(backgroundColor = "0xFFFFFF", frameRate = "30")]
 public class TestSVG extends Sprite {
  private var sp:Sprite;
  private var mouseDown:Boolean;
  private var mouseDownX:Number;
  private var mouseDownY:Number;
  
  public function TestSVG() {
   var loader:URLLoader = new URLLoader();
   loader.addEventListener(Event.COMPLETE, onComplete);
   loader.load(new URLRequest("test.svg"));
   
   mouseDown = false;
   stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
   stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
   stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  }
  
  private function onComplete(e:Event):void {
   var svg:XML = XML(e.target.data);
   var shapeData:FShapeSVG = new FShapeSVG(svg);
   sp = shapeData.toSprite();
  }
  
  private function onMouseDown(e:MouseEvent):void {
   mouseDownX = e.stageX;
   mouseDownY = e.stageY;
   sp.x = e.stageX - sp.width / 2;
   sp.y = e.stageY - sp.height / 2;
   sp.alpha = 0.2;
   mouseDown = true;
   addChild(sp);
  }
  
  private function onMouseMove(e:MouseEvent):void {
   if(mouseDown) {
    sp.width = Math.abs(mouseDownX - e.stageX);
    sp.height = Math.abs(mouseDownY - e.stageY);
    sp.x = mouseDownX - sp.width / 2;
    sp.y = mouseDownY - sp.height / 2;
   }
  }
  
  private function onMouseUp(e:MouseEvent):void {
   sp.alpha = 1;
   mouseDown = false;
  }
 }
}
Frocessingというライブラリを使わせてもらっています。
思った以上に簡単に出来ました。

今回の参考サイト
FlashでSVG形式のベクターグラフィックを利用する | デベロッパーセンター
nutsu/Frocessing - Spark project

0 件のコメント:

コメントを投稿