酷符网Flex > 正文

flex中使用graphics画文字实例

2010-08-04 11:52codeif.com

使用graphics很简单的就可以实现画线,怎样把文字也画到组件上呢?看下面的实例
1.新建一个可以画文字的控件,然后添加到flex文件就可以,首先建一个ActionScript类 MyComponent,代码如下

package ui
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.text.StyleSheet;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	import mx.controls.Alert;
	import mx.controls.Label;
	import mx.controls.Text;
	import mx.core.UIComponent;

	public class MyComponent extends UIComponent
	{
		public function MyComponent()
		{
			super();
			//此处画一段线段为例
			this.graphics.lineStyle(1, 0x000000, 1);
			this.graphics.moveTo(100,100);
			this.graphics.lineTo(500, 100);

			//以下为在此控件中画文字
			var style:StyleSheet = new StyleSheet();

			var heading:Object = new Object();
			heading.fontWeight = "bold";
			heading.color = "#FF0000";

			var body:Object = new Object();
			body.fontStyle = "italic";
			body.fontSize  = 20;

			style.setStyle(".heading", heading);
			style.setStyle("body", body);

			var label:TextField = new TextField();
			label.autoSize = TextFieldAutoSize.LEFT;
			label.styleSheet = style;
			label.htmlText = "1234Hello World...1234";
			var bitmapData:BitmapData = new BitmapData(label.width, label.height);
			bitmapData.draw(label);
			var bitmap:Bitmap = new Bitmap(bitmapData);
			bitmap.x = 200;
			bitmap.y = 200;
			//bitmap.rotation = -90;//逆时针旋转90度(负为逆时针、正为顺时针)
			addChild(bitmap);
		}
	}
}

测试上面我们新建的组件,代码如下

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import ui.MyComponent;

			protected function init():void
			{
				myCanvas.addChild(new MyComponent());
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:Canvas id="myCanvas" width="100%" height="100%" backgroundAlpha="0.5" backgroundColor="0x000000"/>
</s:Application>

相关文章

新浪微博 | 淘段子 | 我的博客 | 淘宝店铺 | jnan.org | RSS
Copyright © 2009 - 2011 酷符网