Ext.draw の使用法メモ

Ext.draw.Compornent を使ってあるものを作ってみようと思い立ち、その前に使い方を一通りマスターしようと、サンプルプロジェクトを作ってみました。 ごくごく簡単な、お絵かきのようなものです。 そのサンプルプロジェクトを作りにあたり、使用法のポイントをメモします。

Senchaのサンプルでは、あらかじめ用意されている画像が表示されるようなものばかりですが、 僕は、画面上のdraw.Comportnentの上にマウス操作で絵を描くようなものを作りたいので、 動的にSurfaceにSpriteを追加する方法を調べてみます。

SurfaceにSpriteを

Ext.draw.Compornentに図形を描画するには、SurfaceオブジェクトにSpriteを追加します。 Surfaceオブジェクトのitemsコンフィグを指定すれば、そのSpriteはSufaceオブジェクトに表示されます。

Surfaceが生成された後にSpriteを追加する際には、Spriteオブジェクトを生成する時にsurfaceコンフィグに既存のSurfaceオブジェクトを渡します。 Ext.draw.Compornent の所有するSurfaceは、surfaceプロパティで取得できます。

[js] var someSprite = Ext.create(‘Ext.draw.Sprite’, { surface: drawCompo.surface, type: ‘rect’, stroke: ‘#666’, ‘stroke-width’: 1, x: 100, y: 50, width: 300, height: 150 }); [/js]

また、Surfaceのaddメソッドを使ことで追加することもできます。 上記の例は次のようにするのと等価です。

[js] var someSprite = drawCompo.surface.add({ type: ‘rect’, stroke: ‘#666’, ‘stroke-width’: 1, x: 100, y: 50, width: 300, height: 150 }); [/js]

Spriteの移動や変形など

Surfaceに配置したSpriteを移動したり色や形を変更するには、SpriteのsetAttributeメソッドを使います。 Spriteのコンフィグで指定できることが、ほとんどここで変更できます。

[js] me.sprite.setAttributes({ width: w, height: h, x: x, y: y }, true); [/js]

マウスイベントを拾う

draw.Compornent のマウスイベントを拾いたいですよね。 draw.CompornentのgetEl()メソッドでExt.Elementオブジェクトを取得して、そこにリスナーを設定します。 Ext JS通の人には当たり前の話ですが、最初僕は気づかなかったので書いておきます。 また、エレメントではなくSurfaceにリスナーを設定する事もできるみたいです。(APIリファレンスに書いてあります)

Ext.Elementのクリックイベントでは、マウスがクリックされた座標位置を取得できます。 この座標はブラウザの領域全体での位置になるので、draw.Compornent上でのローカル座標に変換するには Ext.ElementのgetTop(), getLeft() メソッドでコンポーネントのブラウザ上での座標を取得して変換します。

[js] onClick: function(e, t, opt) { var me = this, x, y, el = me.GetDrawCompo().getEl(), xy = e.getXY(); x = xy[0] – el.getLeft(); y = xy[1] – el.getTop(); } [/js]

pathスプライト

‘rect’で矩形が秒できたので、次は直線を描画しようと思ったら、’line’ とかいうSpriteはありませんでした。(´･ω･`) あるのは’path’というSpriteだけです。

このスプライトではパスのデータを「SVGライクなシンタックスで記述します」とあります。 ここで、SVGでのパスシンタックスを覚えなければなりません。 ここではとりあえず直線が引ければいいので、それだけ調べてみます。 単純な直線を引くためには、M10 10 L10 20 というような形式でパスデータを用意します。

[js] someSprite.setAttributes({ path: Ext.String.format(‘M{0} {1} L{2} {3}’, x1, y1, x2, y2) }, true); [/js]

こんな感じで作れば、直線を引くことができます。

グループ

Spriteをグループ化して、グループ全体を操作することができます。 Spriteをグループに所属させるには、groupコンフィグに所属するグループを(文字列または文字列配列)で指定します。 生成時ではなくあとでグループに所属させるには、CompositeSpriteオブジェクトのaddメソッドを使います。 グループのCompositeSpriteは、SurfaceのgetGroup()メソッドで取得します。

[js] var hogeGroup = drawCompo.surface.getGroup(‘hoge’); hogeGroup.add(someSprite); [/js]

色指定

Chromeで作っていて、FireFoxで動かすと色指定がうまく動作しませんでした。 Ext.menu.ColorPickerで設定した色をそのままSpriteのfillコンフィグなどに設定していたのですが、 それがよくなかったようです。

ColorPickerのgetValue()メソッドで返ってくる色の値には先頭に#がついていません。 Chrome(Webkit)のSVGでは色指定に # が付いていなくても色指定されますが、 ForeFox(Gecko)では # がついてないとだめみたいです。

ですのでSpriteに色指定する際には、先頭に # をつけてから設定してやります。