あーくたん

前回のSVG表示するやつを少し変えたものをwonderflに投稿してみました。

forked from: show SVG - wonderfl build flash online

回転させる角度を求めるのに、最初Math.atan2メソッドを知らなくて、Math.atanで事象ごとに場合分けをして求めようとしてたら、無駄に苦労して涙目。

というわけでatanの復習。
atanつまりarctan（アークタンジェント）はtan（タンジェント）の逆関数。
直角三角形の2辺から、角度（ラジアン）を求めることができます。

今回のプログラムをatanを使おうとすると、単純にMath.atan(dy / dx)では角度が求められない場合がでてくる。一番わかり易いのだとdxが0の場合とか。
Math.atan2だとそんな問題が解決できる。ActionScriptのatan2がどう実装されているか知りませんが、一般的に、atan2はこのようになっているようです。

atan2(y, x) =
{
atan(y/x) (x>0),

π-atan(|y/x|) (x<0 かつ y>0),

-(π-atan(|y/x|)) (x<0 かつ y<0),

0 (x<=0 かつ y=0),

π/2 (x=0 かつ y>0),

-π/2 (x=0 かつ y<0)
}

ちゃんと0のときも定義されているので使いやすい。

[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

自転車と下郷

以前自転車で東京に行ったときに最初に撮った写真。
たぶん下郷町です。大内宿を過ぎたあたり。このときはまだ写真を撮ってる余裕があったなあ・・・


手前の自転車が自分の自転車です。
そんなにいい自転車じゃありません。こんな自転車で東京行くとか馬鹿ですね。

次はFlashの記事書きます。
SVGを使ってみる予定。

歩行者用道路

更新するプログラムネタがないので、自転車で街探索してた時に撮った写真を上げます。

初回は地元会津若松市から。
七日町周辺です。

偶然見つけたかなり細い歩行者用道路と思われるものを前後から撮影。

[Flex]CanvasのaddChild

この間、FlexでCanvasにSimpleButtonをaddChildしようとしたらエラーが出た。

ググるといろいろ対策が出てきます。
Canvas に Sprite や Shape が addChild できない件 - kagamihogeのblog
Flex 3で直接Spriteを使用することはできない？ - Memorize

というかなぜaddChild出来ないんでしょうかね。
flash.display以下のものは直接addChildできないのかなー。

上であげたリンク先はUIComponentを使ってこの問題を解決しています。
この方法でも解決出来ますが、Twitterでつぶやいてたら先輩に他の方法を教えてもらった。

CanvasのrawChildrenプロパティにaddChildすれば、Spriteでもエラーはでないとのこと。
これは地味に便利。
rawChildren便利だよ、rawChildren。
なんで解決したのかがよくわかってないのが気持ち悪いですが。

というかこの方法、以前教えてもらったのに忘れてた気がする。