どうも
今日はクリスマスですね。いかがお過ごしでしょうか？
僕はこのアドベントカレンダーを急いで書いています。
突然ですが、elmでcanvas使いたくなるときありますよね。
ぼくはあります。
そこで、elm-canvasを紹介したいと思います。
導入方法
$ npm i elm-canvas
$ elm install joakin/elm-canvas
// main.js
import 'elm-canvas';
or
<!-- index.html -->
<head>
<script src="https://unpkg.com/elm-canvas/elm-canvas.js"></script>
</head>
ellieで使いたい人はCDNからimportする方法でやりましょう。
使い方
ImageDataを弄る系のAPI以外は提供されているので普通のcanvasのように扱うことができます。
矩形の描画
基本的なところからいきましょう。
矩形の描画は
rectRender : Renderable
rectRender =
shapes
[ fill Color.red ]
[ rect (100, 100) 50 50 ]
こんな感じで書くと座標(100, 100)のところに50 x 50の矩形を赤で塗りつぶして描画できます。
詳しく見ていきましょう。
基本となる関数はshapes : List Setting -> List Shape -> Renderableです。
Settingは主に塗りつぶし縁取りの色、移動・回転・拡大など見た目に関係する部分を扱います。Html.Attributeみたいな感じですね。
Shapeは矩形や円、pathといった形の情報です。
これらをshapes関数に入れることで描画してくれます。同じ見た目になる形は1つのshapes関数で描画するといいようです。
円の描画
それでは、座標(100, 100)のところに半径50の円を緑で縁取り描画してみましょう。
上記の説明から考えるとList Settingのところに緑で縁取りをList Shapeのところに座標(100, 100)のところに半径50の円を入れたらよさそうです。
したがって、正解はこんな感じです。
circleRender : Renderable
circleRender =
shapes
[ stroke Color.green ]
[ circle (100, 100) 50 ]
縁取りは普通のcanvasのようにstrokeでできます。
円はcircle関数を使うことで表現できます。簡単ですね？
ブラウザに描画
これだけでは描画はできません。htmlにしましょう。toHtml関数を使います。
toHtml : Point -> List (Html.Attribute msg) -> List Renderable -> Html msgとなっているのでview関数の任意の位置に入れて上げましょう。
view : Model -> Html msg
view model =
div []
[ toHtml (model.width, model.height)
[]
[ clear
, render
]
]
みたいな感じ
注意点
このpackageはあくまでelm用にCanvasAPIを使えるようにしたものなので自分で画面の更新をしなければなりません。
画面の更新とは、前のフレームで描画しているものを消すことです。canvasにはclearRectがありますがこのpackageにはありません。canvasの領域を任意の色で塗りつぶす関数を作って置くと便利でしょう。
さらに、shapesやtoHtmlのRenderableの順番は描画の順番です。
なので、上の例のclearとrenderを逆に書いてしまうと望んでいる結果にはならないでしょう。そこを考えてコーディングしましょう。
最後に、座標の指定が(Float, Float)のタプルです。この部分に関しては特に言いません。がんばりましょう。
まとめ
この他にもpathを用いた複雑な図形やテキストなどを描画することができます。
僕自身もこの記事のためにクリスマスっぽいものを作ろうと思ったのですが、記事を書こうとした8日前にこのpackageが更新されて仕様がまるっきり変わっていました。。。
混乱の元になるのでソースコードは載せませんが、できてあるものは載せたいと思います。
雪降った pic.twitter.com/T96cAgJ3zU
— うじまる🐣 (@uzimaru0601) December 3, 2018
まだすべての機能を触りきれていないので随時更新していきたいと思います。
更新前と更新後の変更としては、宣言的に書けるようになりました。おそらく、更新頻度が高いライブラリなので使うときはしっかりとドキュメントを読みましょう。
それでは、良いお年を