Flexで動的にベクタ画像を表示する方法

Tweet

Flex3の標準ライブラリでベクタ画像を表示する方法を模索中。 Imageコンポーネントではベクタ画像として唯一SVG形式がサポートされていることをヘルプファイルで発見。 以下のようにhoge.svgを表示しようと試してみるも失敗。

<mx:Image source="hoge.svg"/>

エラーメッセージを読むと、どうやらSVG形式は動的に読み込むことはできず、 最初からSWFファイルに埋め込む形にしなくてはならない。 つまりこのようにする。

<mx:Image source="@Embed('hoge.svg')"/>

こうすると表示できるが、コンパイル時にSWFファイルに埋め込まれる形になる。 つまりユーザの選択に応じて別の画像を表示したりということができない。

ということで、現在の回避策としては以下の方法を取った。

1. SVGファイルを埋め込んだSWFファイルを必要数用意しておく
2. そのSWFファイルを動的に読み込むようにする

SVGファイルを埋め込んだSWFファイルの作成

まず、以下のようなMXMLファイルを生成してコンパイル。するとSVGファイルが埋め込まれたhoge.swfができる。 今回は3種類のSVGファイルを用意してhoge1.swf, hoge2.swf, hoge3.swfを作成した。

hoge.mxml

<?xml version="1.   0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
    <mx:Image id="imagebox" source="@Embed('hoge.svg')" y="20" x="20"/>
</mx:Application>

用意したSWFファイルを読み込むMXMLファイルを作成

下記のようにImageコンポーネントのsource属性を動的に変更するようにする。 Listコンポーネントのchangeイベントが発生することでImageコンポーネントのsource属性を変更している。

SVGviewer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" alpha="1.0" width="271" height="132">
    <mx:HBox x="10" y="10" width="251" height="112">
        <mx:Image id="image" width="100" height="100" source="hoge1.swf"/>
        <mx:VRule height="106" width="1"/>
        <mx:List id="list" width="100" height="81" change="image.source=list.selectedItem.data">
            <mx:Object label="hoge1.swf" data="hoge1.swf"/>
            <mx:Object label="hoge2.swf" data="hoge2.swf"/>
            <mx:Object label="hoge3.swf" data="hoge3.swf"/>
        </mx:List>
    </mx:HBox>
</mx:Application>

用意したSVG画像が単純すぎてわかりにくいかもしれないけど、このようになる。右側のリストからファイル名を選択すると左側の画像が切り替わる。 判別する術はないかもしれないが、ちゃんとSVG形式のベクタ画像だ。

問題点

現状ではこの方法しか思い浮かばないが、もっといい方法があるかもしれない。 ちなみにこの方法では以下の問題点がある。

1. 画像のファイルサイズが大きくなる

   実際今回のサンプルに使用したSVGファイルのサイズは100バイト程度だ。 しかし、SWFファイルにすると250Kバイト程度となり、実に２千倍以上のサイズになっている。 ただし、SVGファイルが大きくなればなるほど、この差は小さくなると思う。

2. 画像毎にMXMLファイルを作成した後、SWFファイルにコンパイルしなくてはならない。

   作成するMXMLファイルは定型的なものなので自動化も簡単だが、毎回コンパイルしてファイルを配備する仕組みを作る必要がある。 もちろん、できればそんなことはしたくない。

今回の方法は一つの選択肢ではあるが、引き続き調査は必要だ。