第7回 TextBlockクラスで多彩な文字表現

//書式
var format:ElementFormat = new ElementFormat();
format.locale = "ja";

//テキストエレメントを作る
var textElement:TextElement = new TextElement(str, format);

//テキストブロックを作る
var textBlock:TextBlock = new TextBlock();
//テキストブロックのコンテンツにテキストエレメントを設定する
textBlock.content = textElement;

//テキストブロックから最初のtextLineを作る
var textLine:TextLine = textBlock.createTextLine(null, block_width);

//テキストブロックから次のtextLineを作る
textLine = textBlock.createTextLine(textLine, block_width);

var str:String = "まず始めにTextBlockクラスでテキストブロックという入れ物を作り、";
str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。";
str+="次にTextBlockから１行分のデータを取り出してテキストラインを作り、";
str+="そのテキストラインの座標、傾きなどを設定して表示します。";
//書式
var format:ElementFormat = new ElementFormat();
format.locale = "ja";
format.fontSize = 16;
//テキストエレメントを作る
var textElement:TextElement = new TextElement(str, format);
//テキストブロックを作る
var textBlock:TextBlock = new TextBlock();
//テキストブロックのコンテンツにテキストエレメントを設定する
textBlock.content = textElement;
//均等配置設定
textBlock.textJustifier = new EastAsianJustifier();
var block_width:Number = 340;
//テキストブロックから最初のtextLineを作る
var textLine:TextLine = textBlock.createTextLine(null, block_width);
var offset:Point = new Point(25,50);
var tx:Number = 0;
var ty:Number = 0;
//textLineの値がnullになるまで繰り返す。
while (textLine != null){
	textLine.x = tx+offset.x;
	textLine.y = ty+offset.y;
	//表示位置の行送り
	ty +=(textLine.ascent + textLine.descent+5);
	addChild(textLine);
	//テキストブロックから次のtextLineを作る
	textLine = textBlock.createTextLine(textLine, block_width);
}

//回転方向（縦書き）
textBlock.lineRotation = TextRotation.ROTATE_90;

var str:String = "まず始めにTextBlockクラスでテキストブロックという入れ物を作り、";
str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。";
str+="次にTextBlockから１行分のデータを取り出してテキストラインを作り、";
str+="そのテキストラインの座標、傾きなどを設定して表示します。";
//書式
var format:ElementFormat = new ElementFormat();
format.locale = "ja";
format.fontSize = 16;
//テキストエレメントを作る
var textElement:TextElement = new TextElement(str, format);
//テキストブロックを作る
var textBlock:TextBlock = new TextBlock();
//テキストブロックのコンテンツにテキストエレメントを設定する
textBlock.content = textElement;
//均等配置設定
textBlock.textJustifier = new EastAsianJustifier();
//回転方向（縦書き）
textBlock.lineRotation = TextRotation.ROTATE_90;
var block_width:Number = 200;
//テキストブロックから最初のtextLineを作る
var textLine:TextLine = textBlock.createTextLine(null, block_width);
var offset:Point = new Point(320,50);
var tx:Number = 0;
var ty:Number = 0;
//textLineの値がnullになるまで繰り返す。
while (textLine != null){
	textLine.x = tx+offset.x;
	textLine.y = ty+offset.y;
	//表示位置の行送り（縦書きなので右から左へ進む）
	tx -=(textLine.ascent + textLine.descent+5);
	addChild(textLine);
	//テキストブロックから次のtextLineを作る
	textLine = textBlock.createTextLine(textLine, block_width);
}

//四角形の領域に横書きでテキストラインを書き出す
var remainTextLine:TextLine=fillTextLineRect(sp1,textBlock,null);
//残りのテキストを２個目の四角形領域に書き出す
remainTextLine=fillTextLineRect(sp2,textBlock,remainTextLine);

var str:String = "まず始めにTextBlockクラスでテキストブロックという入れ物を作り、";
str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。";
str+="次にTextBlockから１行分のデータを取り出してテキストラインを作り、";
str+="そのテキストラインの座標、傾きなどを設定して表示します。";
//テキストラインを表示したい四角形の領域を示すスプライトを作る
var sp1:Sprite = new Sprite();
sp1.graphics.beginFill(0xDDDDDD);
sp1.graphics.drawRect(0,0,180,120);
sp1.graphics.endFill();
sp1.x=30;
sp1.y=30;
addChild(sp1);
//２個目の四角形領域
var sp2:Sprite = new Sprite();
sp2.graphics.beginFill(0xFFCDCD);
sp2.graphics.drawRect(0,0,150,240);
sp2.graphics.endFill();
sp2.x=220;
sp2.y=30;
addChild(sp2);

//書式
var format:ElementFormat = new ElementFormat();
format.locale="ja";
format.fontSize=16;
//テキストエレメントを作る
var textElement:TextElement = new TextElement(str, format);
//テキストブロックを作る
var textBlock:TextBlock = new TextBlock();
//均等配置設定
textBlock.textJustifier = new EastAsianJustifier();

//テキストブロックのコンテンツにテキストエレメントを入れる
textBlock.content=textElement;
//y=0を合わせる位置
textBlock.baselineZero = TextBaseline.ASCENT;
//四角形の領域に横書きでテキストラインを書き出す
var remainTextLine:TextLine=fillTextLineRect(sp1,textBlock,null);
//残りのテキストを２個目の四角形領域に書き出す
remainTextLine=fillTextLineRect(sp2,textBlock,remainTextLine);

function fillTextLineRect(sp:Sprite,tb:TextBlock, textLine:TextLine):TextLine {
	//四角形の領域
	var rect:Rectangle=sp.getRect(stage)
	var i:int=0;
	if (textLine==null) {
		i=1;
		//テキストブロックの最初の行のとき
		var textLine:TextLine=tb.createTextLine(null,sp.width);
		sp.addChild(textLine);
	}
	//残りのテキストラインを指定領域に入るだけ表示する
	var gap:Number = 8;
	var h:Number=textLine.ascent+textLine.descent+gap;
	var numOfLines:int=Math.floor(sp.height/h);
	for (i=Math.max(0,i); i<numOfLines; i++) {
		//次のテキストラインを作る
		textLine=tb.createTextLine(textLine,rect.width);
		if (textLine==null) {
			//取り出せるデータが終わったので処理を終了する
			return null;
		}
		//行送り
		textLine.y=textLine.ascent+h*i;
		sp.addChild(textLine);
	}
	return textLine;
}

var str:String = "まず始めにTextBlockクラスでテキストブロックという入れ物を作り、";
str += "その中にテキストやグラフィックスといったコンテンツを入れておきます。";
str+="次にTextBlockから１行分のデータを取り出してテキストラインを作り、";
str+="そのテキストラインの座標、傾きなどを設定して表示します。";
//テキストラインを表示したい円形の領域を示すスプライトを作る
var sp1:Sprite = new Sprite();
sp1.name="sp1";
sp1.graphics.beginFill(0xFFFFCD);
sp1.graphics.drawCircle(0,0,100);
sp1.graphics.endFill();
sp1.x=280;
sp1.y=130;
addChildAt(sp1,0);
//２個目の円形領域
var sp2:Sprite = new Sprite();
sp2.name="sp2";
sp2.graphics.beginFill(0xFF99CC);
sp2.graphics.drawCircle(0,0,70);
sp2.graphics.endFill();
sp2.x=100;
sp2.y=180;
addChildAt(sp2,0);

//書式
var format:ElementFormat = new ElementFormat();
format.locale="ja";
format.fontSize=14;
//テキストエレメントを作る
var textElement:TextElement = new TextElement(str, format);
//テキストブロックを作る
var textBlock:TextBlock = new TextBlock();
//テキストブロックのコンテンツにテキストエレメントを入れる
textBlock.content=textElement;
//均等配置設定
textBlock.textJustifier = new EastAsianJustifier();
//回転方向（縦書き）
textBlock.lineRotation = TextRotation.ROTATE_90;
//x=0を合わせる位置
textBlock.baselineZero = TextBaseline.ASCENT;
//円形領域に縦書きでテキストラインを書き出す
var remainTextLine:TextLine=fillTextLineCircle(sp1,textBlock,null);
//残りのテキストを２個目の円形領域に書き出す
remainTextLine=fillTextLineCircle(sp2,textBlock,remainTextLine);
//円を拡大しながら回転させる
sp1.addEventListener(Event.ENTER_FRAME, entrerFrameHandler);
sp2.addEventListener(Event.ENTER_FRAME, entrerFrameHandler);

function fillTextLineCircle(sp:Sprite,tb:TextBlock, textLine:TextLine):TextLine {
	//円の半径
	var r:Number = sp.width/2;
	var i:int=0;
	var gap:Number = 8;
	var dw:Number;
	if (textLine==null) {
		i=2;
		var fontSize:Number=tb.baselineFontSize
		var h0:Number = Math.sqrt(r*r-Math.pow(r-fontSize,2))*2;
		//テキストブロックの最初の行のとき
		var textLine:TextLine=tb.createTextLine(null,h0);
		//座標設定
		dw = textLine.ascent+textLine.descent+gap;
		textLine.x=r-dw;
		textLine.y=-Math.sqrt(r*r-Math.pow(r-dw,2));
		sp.addChild(textLine);
	}
	//残りのテキストラインを指定領域に入るだけ表示する
	 dw=textLine.ascent+textLine.descent+gap;
	var numOfLines:int=Math.floor(2*r/dw);
	for (i=Math.max(1,i); i<numOfLines; i++) {
		//次のテキストラインを作る
		var h:Number = Math.sqrt(r*r-Math.pow(r-dw*i,2))*2;
		textLine=tb.createTextLine(textLine,h);
		if (textLine==null) {
			//取り出せるデータが終わったので処理を終了する
			return null;
		}
		//座標設定
		textLine.x=r-dw*i;
		textLine.y=-Math.sqrt(r*r-Math.pow(r-dw*i,2));
		sp.addChild(textLine);
	}
	return textLine;
}
//回転、拡大縮小、アルファ変更のアニメーション
function entrerFrameHandler(event:Event):void{
	var sp:Sprite = event.target as Sprite;
	var ratio:Number = Math.sin(sp.rotation*Math.PI/180);
	sp.scaleX = sp.scaleY = 1+ratio/3;
	sp.alpha = 1+ratio;
	if(sp.name=="sp1"){
		sp.rotation += 2;
	}else{
		sp.rotation -= 2;
	}
}