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>
