LoginSignup
0

More than 1 year has passed since last update.

Flash Advent Calendar 5日目 - Canvas2D -

将来的にはWebGLに移行する事になるのですが
初期はCanvas2Dを利用して描画を作っていました。
その中で得られた知見を書こうと思います。

Flashの描画手法

Flashの描画は基本、一筆書きでです。
使われる関数も3つです。

  • 移動(moveTo)
  • 直線(lineTo)
  • 曲線(quadraticCurveTo)

どれだけ複雑な表現でもこの仕様で実現されており
結構、男前な仕様だと思ってます。

ただ、この一筆書きがかなり難解でした。。。

参考資料
https___qiita-image-store.s3.amazonaws.com_0_80502_d2e1ec26-1eea-d29d-7169-56186082bc7f.png

Canvas2Dを利用した方であれば

え?
無理じゃない??

っとなると思います。
実際、この仕様をCanvas2Dで再現するのにかなりの時間を使いました・・・

まずは、同じ色をまとめる事からはじめました。

分解と結合

参考資料のDefineShapeの描画を分解すると、こんな感じになります。

※ s=開始点、e=終点
https___qiita-image-store.s3.amazonaws.com_0_80502_96813b1a-6124-378e-657e-0e101425f416.png

一筆書き問題は、この分解と結合する事でCanvas2Dに描画することができました。

non-zero rule

次にぶつかった問題は中抜きの描画

※ s=開始点、e=終点
https___qiita-image-store.s3.amazonaws.com_0_80502_b59cdf68-8962-ef09-705f-44084c9ee47b.png

でも・・・
https___qiita-image-store.s3.amazonaws.com_0_80502_eac22fc7-9451-c66c-b320-d5bd0c3296f3.png

いろいろ調べた所、中抜きするにはnon-zero ruleという仕様を利用するしかない。
という事がわかりました。

Canvas2Dの描画は時計回りの描画を+1とし、反時計回りを-1とし
0の部分は描画しないという仕様でした。

時計回り(+1)のデータが重なる部分は2となり、描画される。
上の画像だと時計回り(+1)のデータが重なる部分は2となり、描画されていました。
https___qiita-image-store.s3.amazonaws.com_0_80502_58577b92-850b-3cd2-2738-449857892665.png

なので、片方の描画を反時計回りに反転させます。
https___qiita-image-store.s3.amazonaws.com_0_80502_69fe9e2a-5014-8ef2-9cf6-cff8f34f8f9b.png

Flashの描画はこの分解と結合non-zero rule
無事に描画する事ができましたので、今日はこの辺で終わろうと思います。

明日はクロージャのスコープ問題に関して、書こうと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0