Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

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
無事に描画する事ができましたので、今日はこの辺で終わろうと思います。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?