从Flex3转到Flex4,发现很多以前的代码写法不能用了。其实就是两套UI框架的问题,一个最简单的例子就是addChild和addElement。最简单的分类原则就是:MX的UI是用addChild来添加可视对象,Spark的UI是用addElement来添加可视化对象,如果用Spark而又想原来MX的可视对象(即对象不是继承自IVisualElement),那就把对象封装一下,就用如下的两行代码:
var mxSprite:Sprite = new Sprite;
var uiComponent:UIComponent = new UIComponent;
//this.addChild(Sprite); 在s:Application下是无效果
uiComponent.addChild(mxSprite);
this.addElement(uiComponent);// 这才有效果
好了,直接贴上Flex4绘制直线的效果,只是一个思路,欢迎探讨。
<?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="onLoad();" >
<fx:Script>
<![CDATA[
import flash.display.Sprite;
import flash.geom.Point;
import mx.core.UIComponent;
// 实际绘图组件
private var canvasComponent:UIComponent = new UIComponent;
// 代理组件
private var proxyComponent:UIComponent = new UIComponent;
private var startPoint:Point = new Point;
private var endPoint:Point = new Point;
private var isDrawing:Boolean = false;// 是否正在绘图
private var hasDrawed:Boolean = false;// 是否有绘图行为
private function onLoad():void{
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// Application加入代理组件
this.addElement(proxyComponent);
}
private function onMouseDown(event:MouseEvent):void{
proxyComponent.graphics.lineStyle(2,0x0099ff,1);
proxyComponent.graphics.moveTo(event.localX, event.localY);
startPoint.x = event.localX;
startPoint.y = event.localY;
isDrawing = true;
hasDrawed = false;
}
public function onMouseMove(event:MouseEvent):void{
if(isDrawing){
hasDrawed = true;// 有绘图行为
// 清除掉原有的绘图内容,如果不清除,则画面上会出现多条画线,而本例的效果是为了实现画线时线条可以动态的移动
proxyComponent.graphics.clear();
proxyComponent.graphics.lineStyle(2,0x0099ff,1);
proxyComponent.graphics.moveTo(startPoint.x, startPoint.y);
proxyComponent.graphics.lineTo(event.localX, event.localY);
endPoint.x = event.localX;
endPoint.y = event.localY;
}
}
private function onMouseUp(event:MouseEvent):void{
if(isDrawing && hasDrawed){
// 创建新UI对象,加入容器,并清除掉代理对象
canvasComponent = new UIComponent;
canvasComponent.graphics.lineStyle(2,0x0099ff,1);
canvasComponent.graphics.moveTo(startPoint.x, startPoint.y);
canvasComponent.graphics.lineTo(endPoint.x, endPoint.y);
this.addElement(canvasComponent);
proxyComponent.graphics.clear();
}
isDrawing = false;
}
]]>
</fx:Script>
</s:Application>