コンポーネントをアホみたいに沢山配置する

現在会社で作成しているアプリケーションは、もともとC++で作られたものの移植です。
元ネタはいまも現役で販売されているのですが、古臭いGUIにもかかわらず顧客がついている理由。
それは「無制限に大きな有向グラフを描画できる」という一点に尽きる(失礼)のです。

それをFlexに移植するとなったとき、最初に心配したのがこの点でした。
1000個ものノードを矢印つきで表示し、しかも移動や切り取りといった編集まで
実装しなければならないのです。
さらに、複数選択するのでFocusRectは別に表示しなければならない。
ドラッグの際にはFocusだけが先に動き、マウスを手放した時点で場所が確定する、
といったしろものです。

ムリだぁ

と上司に言ったところ、「じゃあ開発中止か。残念だね」とつっぱねられました。
しょうがないので最適化を重ねていたのですが、やっと今日になってその目処が立ちました。

要点は2つ。

(1)cacheAsBitmapを上手に使う
casheAsBitmapはオブジェクトの描画を軽くしてくれますが、その一方で、背景の透明処理や
アルファが抜けたり、開放し忘れのときのメモリ消費が大きくなるなどのデメリットが
あります。
今回は1000個のオブジェクトをドラッグするために、その下に敷いた透明なレイヤーオブジェクトに
一時的にcasheAsBitmapを設定し、startDrag()でレイヤー丸ごとドラッグする、という荒業を
使いました。
その効果は絶大。

(2)ドラッグ中の他のmouseEnabledをすべてfalseにする
実はこっちのほうが効き目があります。
画面上に折り重なった1000個ものオブジェクトの上をドラッグすると、ドラッグ中もマウスイベントを
拾うため、いちいちマウスイベントに引っかかります。
mouseChildrenという、子コンポーネントのマウスハンドラをすべて無効にする便利なプロパティも
あるので、使ってみたところ、これまた効果絶大。

いまでは、オブジェクトの数を感じさせないほどスムースにドラッグできます。
もっとも、複数選択など、クリアすべき課題は他にも沢山あったりするんですが・・・。

何はともあれ明日からGW。
実家で姪っ子たちと山菜取りでもして過ごします。