flashrod

■ AS3でフリーハンドベジェ 22:25

JavaScriptとActionScriptは同じECMAScriptの子供なので兄弟なのだ、と聞いてたんだけど本当にそうなのか?というわけで実際に試してみた。

JavaScriptのちょうどいいブツを探してたらはてなブックマーク - フリーハンドでベジェ曲線を描くというのがおもしろそうなので食いついてみる。

ちなみに件のページはAjaxでSVGなところがすごいわけで、Flashにしちゃうとそんなのできてて当たり前な感じがしてなんだか負けた感じがしてしまうのだけど。

1. bezier-generator.jsをダウンロードしてBezierGenerator.asにリネーム
2. 全体を package {}で囲む
3. var BezierGenerator (function(){…})() → public class BezierGenerator {…}
4. BezierGenerator.prototype = … をコメントアウト
5. import flash.geom.Point;を追加
6. $P → new Point

function ptOperate()が「引数の数が違う」といわれてしまうので、可変長引数にする。「... 仮引数名」で可変長部分のパラメータが配列でアクセスできる。

        private function ptOperate(... args):Point {
            var len:int = args.length - 1;
            var x:Array = new Array(len);
            var y:Array = new Array(len);
            for (var i:int = 0; i < len; i++) {
                x[i] = args[i].x;
                y[i] = args[i].y;
            }
            var op:Function = args[args.length - 1];
            return new Point(op.apply(null, x), op.apply(null, y));
        }

これでとりあえず、たくさん警告が出るけど、コンパイルは通るようになる。警告は全部「変数や関数の型が無い」という意味なので、「:型」を書いていけばいつかは無くせる。

BezierGeneratorの使い方は簡単だ。

        var gen:BezierGenerator = new BezierGenerator();
        var segment:Array = gen.fromPoints([Pointの配列], null, null);

これでsegmentに4つのPointが入って戻る。4つの点はCubic Bezierの4つの点だ。flash.display.GraphicsのcurveTo()はQuadratic Bezierなのでこのままじゃ使えない。2次ベジェを戻すようにBezierGeneratorを改造するのはちょっと難しそうだ。Inkscapeのソースを見たらいいのかな?それより3次ベジェを描くほうが簡単だ。

    public class CubicBezier extends Shape {
        public function CubicBezier(p0:Point, p1:Point, p2:Point, p3:Point) {
            var d:Number = Math.min(0.1, 10 / Point.distance(p0, p3));
            graphics.lineStyle(2, 0x000000);
            graphics.moveTo(p0.x, p0.y);
            for (var t:Number = d; t <= 1.0; t += d) {
                var p4:Point = Point.interpolate(p1, p0, t);
                var p5:Point = Point.interpolate(p2, p1, t);
                var p6:Point = Point.interpolate(p3, p2, t);
                var p7:Point = Point.interpolate(p5, p4, t);
                var p8:Point = Point.interpolate(p6, p5, t);
                var p9:Point = Point.interpolate(p8, p7, t);
                graphics.lineTo(p9.x, p9.y);
            }
        }
    }

さて本題のJavaScriptとActionScriptは似てるのかだけど、似てるかよりも可変長引数のやり方が分かったのが今回の収穫だ。

S2Flex2

前のエントリのコメントでid:arkw氏がS2Flex2というものを教えてくれたので見てみた。java.util.zip.Deflaterでいいんだ。こうやって相互運用するのか…。やっぱり他人の書いたコードを見ると勉強になる。

S2Flex2とは何か?というのははてなダイアリーキーワードを見ても良く分からない。というかはてなダイアリーキーワードはほとんどの場合素っ気無さ過ぎていつもそれだけじゃ全然分からない。S2Flex2というのは要するにRIAな世界を構築するためのフレームワークのようだけど、フレームワークは、すごい大変なんだよね。ほんとに。中の人にはがんばって成功していただきたい。