«
»

TLF Markupのimg

  • 2010 年 9月 3 日
  • kosuke

やたらとテキスト周りのエントリーが続いています。
覚えること多すぎなText Layout Framework。そしてFlash Text Engine。
TLF Markupのimgタグについて気づいたことをメモ。

TLF Markupでは、InlineGraphicElementをimgタグで記述しますが、そのソース画像の指定はsource属性です。srcでないところに注意。

たとえばこの場合、画像は表示されない。

var markup:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008"><p><img src="contrail.jpg" width="200" height="150"/><span>飛行機雲</span></p></TextFlow>;
var flow:TextFlow = TextConverter.importToFlow( markup, TextConverter.TEXT_LAYOUT_FORMAT );
flow.flowComposer.addController( new ContainerController( container, 480, 480 ) );
flow.flowComposer.updateAllControllers();

<img src="contrail.jpg" width="200" height="150"/>

のsrcがNGなわけです。

試しにこの時のInlineGraphicElementの属性を確認してみる。

var img:InlineGraphicElement = flow.getFirstLeaf() as InlineGraphicElement; 
trace( "img.source = " + img.source );
 
結果はnull。

とsource属性に値が無いです。

少し混乱するのがここからで、TextFlowを再度テキストに書き出してみると、

var str:String = TextConverter.export( flow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE ) as String;
trace( str ); 
 
結果は、
<TextFlow columnCount="inherit" columnGap="inherit" columnWidth="inherit" lineBreak="inherit" 
paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" verticalAlign="inherit" 
whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008">
	<p>
		<img src="contrail.jpg" height="150" width="200"/>
		<span>飛行機雲</span>
	</p>
</TextFlow>

src属性はそのまま残っていたりします。マークアップは別途保存されるんですかね。

これはいいとして、以前のエントリーで2段階で変換すればうまくいくと書きました。

var markup:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008"><p><img src="contrail.jpg" width="200" height="150"/><span>飛行機雲</span></p></TextFlow>;
var flow:TextFlow = TextConverter.importToFlow( markup, TextConverter.TEXT_FIELD_HTML_FORMAT );
markup = TextConverter.export( flow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE ) as XML;
flow = TextConverter.importToFlow( markup, TextConverter.TEXT_LAYOUT_FORMAT );
flow.flowComposer.addController( new ContainerController( container, 480, 480 ) );
flow.flowComposer.updateAllControllers();

これなら期待どおり変換されて画像が表示されます。

もう少しだけ、よさそうな方法がありました。
TextConverter.getImporterとTextConverter.getExporterを使ってまとめておくと便利かもしれません。

var HTMLImporter:ITextImporter	= TextConverter.getImporter( TextConverter.TEXT_FIELD_HTML_FORMAT );
var TLFImporter:ITextImporter	= TextConverter.getImporter( TextConverter.TEXT_LAYOUT_FORMAT );
var TLFExporter:ITextExporter	= TextConverter.getExporter( TextConverter.TEXT_LAYOUT_FORMAT );
function getFlow( source:* ):TextFlow{
	return TLFImporter.importToFlow( TLFExporter.export( HTMLImporter.importToFlow( source ), ConversionType.STRING_TYPE ) );
}
 
var container:Sprite= new Sprite();
addChild( container );
 
var markup:XML	= <TextFlow xmlns="http://ns.adobe.com/textLayout/2008"><p><img src="contrail.jpg" width="200" height="150"/><span>飛行機雲</span></p></TextFlow>;
var flow:TextFlow = getFlow( markup );
flow.flowComposer.addController( new ContainerController( container, 480, 480 ) );
flow.flowComposer.updateAllControllers();

まとめのサンプル

“TLF Markupのimg” に コメントはありません

コメントをどうぞ