Sencha Advent Calendar 2014 - 12月14日 実は便利な Ext.draw パッケージ

Sencha Advent Calendar 14日目書いてくよ！！

今回のネタ

今回のネタは Ext.draw パッケージについて :)
あんまり直接使われてるのは見たことないけど、SenchaのChartパッケージはこのExt.drawパッケージを使って実装されている縁の下の力持ち的な存在だよ！

相変わらず Sencha Touch で実装したサンプル乗せて行くけど、drawパッケージ自体はExt JS側にもあるし、使い方もほとんど変わらないっす :)

ちなみにExt JS 5.1系からdrawパッケージがアップデートされてて、なんか新機能いろいろ入ってるので、これを機に触って見よう！

今回のエントリーでは触りません :(

アップデートされたExt.drawについて

は、下記の記事を見てみてね (>ω•)

Ext JS 5.1 Beta 版の発表
https://www.xenophy.com/sencha-blog/11953

ということで、やっていく

drawパッケージで遊ぶ時に大体 Ext.draw.Component を使う事になると思うのですが、このクラス（厳密にいうともっと細かく分けられます）が色々素敵な感じになっています。

素敵なところその１

描画オブジェクトを細かいこと考えずに、sprites (itemsみたいなもん) に定義すれば何とかなる。

Sencha宗派な方々が慣れ親しんでいるオブジェクトリテラルの記述がそのまま描画オブジェクトの定義に使えます。

描画オブジェクト追加する際なんかと、普通にaddメソッド使えるので結構楽っす。

素敵なところその２

まぁ、これは他の Canvas取り扱うライブラリには普通に入ってると思いますが、Canvasに描画したオブジェクトの管理機構が入ってること。

素のCanvasに描画して、描画オブジェクトの管理なんかをしようとすると色々面倒ですが、そこら辺の機構を用意してくれています。

実際の使い方

指定できるスプライトの種類については、APIリファレンス見てね！なんですが、次のような感じで指定すればそのまま描画できます。

複数おきたい場合も普通に複数定義してあげればOKだし、各スプライトの深度設定もCSSでお馴染みのzIndexの値を設定してあげれば簡単にできます :)

実際にCanvas上のタッチイベントをリッスンしてスプライトの取得をしたりしようとすると、もう少し込み入った処理を書く必要がありますが、そこまで難しいことせずに結構かけて楽しいです。

ちょこっとサンプル

D&Dでの移動と、深度の入れ替え、スプライと上でホールド（長押し）すると、対象スプライトの削除が行えるようなサンプルを書いてみたので載せておきます。

ソースコードもgithubにあげておきます。

右隅のアイコンクリックすると、Canvas上にスプライト追加されます。

ソースコード

tnker/sencha.advent2014
https://github.com/tnker/sencha.advent2014/tree/master/20141214_001

リソース系に結構無駄なSASSが入ってますが、ちょっと掃除面倒なので手抜きしてるだけです。ほとんど無駄なSASSなので気にしないでください :(

最後に

なんとなくJSFiddle使ってみたけど、なんか見た目合わなくて微妙でした（まる）でも見る側は、その場で実行できるほうが嬉しいんだろうなぁ（遠い目

それでは、お次 @ispernさんでーす :-)