More than 5 years have passed since last update.

Flutter/DartのDrawingAPI

Last updated at 2018-11-01Posted at 2018-11-01

概要

Flutter/Dart環境でほそぼそとサンプルを作ってて気がついたんですが、所謂Creative Coding環境として非常に優秀な子かもしれません。

この分野ではProcessingやopenFrameworksなどが有名ですが、スマートフォン向けにサクっとデプロイできて試行錯誤が容易、描画APIも比較的癖がなく個人的には非常に魅力的です。

本来の用途からすると明後日の方向なのは百も承知で所感を書こうと思います。

ちなみに、Creative Codingっつうもったいぶった名前は微妙にモヤりますね
（ProgrammingやCodingはどの分野であれCreativeだと思ってるから）

多くのFlutterianが口を揃えて賛美する機能ですが、まあ優秀です。モーションのスピードや色相のバランスなどパラメータを修正すると即反映されます。「即」っていうのがどれくらいかというと1-2秒くらい。ガチです。

#Flutter #Dart 環境のHotReloadが快適なのでmotionScript的なやつが非常に捗る pic.twitter.com/19i5Ymdmzv
— Kappa-Lab.gamiken (@kappaLab) 2018年10月24日

実際に丸や四角、線を描くのはCanvasのAPIを使います。HTML5のCanvasと似ている点もありますが（moveToとかlineTo）異なる点も多いです。

Path Classを使えばベジェ曲線も描画可能です。

Canvasに描画した内容はPictureインスタンスとして生成され、Windowに渡してRenderingされます。RenderBoxやCustomPainterを使うとこの辺は隠蔽されますが、Widgetを使用すると後述のフレーム毎処理が厄介になります。

Processingのdraw()、UnityのUpdate()、ActionScriptのonEnterFrame()の様にフレーム毎に処理を行うには

 void main() { 
   ui.window.onBeginFrame = beginFrame; 
   ui.window.scheduleFrame(); 
 }

という感じでWindow.onBeginFrameにcallbackを渡してやります。Widgetを使用するとcallbackの中でStatefulWidget.setState()を呼ぶことになると思いますが、オーバーヘッドが気になります。（未検証）

上記のフレーム毎処理やレンダリング処理をまとめたクラスをGistに一時保管。もう少し整備してrepogitoryを作る予定です。