从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>
分享到:
相关推荐
本文将深入探讨如何使用ArcGIS for Flex API在地图上绘制直线、曲线以及军标。 1. 绘制直线 在ArcGIS for Flex中,直线的绘制主要通过Graphics对象实现。首先,我们需要创建一个Graphic对象,并设置其几何形状为...
标题中提到的"动态画直线",是指在应用程序运行时根据用户输入或其他条件实时绘制直线。这通常涉及到两个主要部分:坐标系统和绘图API。在Flex中,我们可以使用`Flash.display.Graphics`类提供的绘图方法来实现这一...
本示例“Flex画线(直线,折线)完美实现”专注于提供一种高效、灵活的方法来绘制动态直线和折线,并允许用户进行实时编辑。通过这个项目,开发者可以学习如何在Flex应用中实现这一功能,提升用户体验。 首先,Flex是...
这个示例代码展示了如何在Flex应用中实现用户通过鼠标绘制直线、清除直线以及多点折线的功能。以下是详细的知识点解析: 1. **Flex架构**:这个应用基于Adobe Flex框架,使用Spark组件库,如`s:Application`、`s:...
使用flex绘制直线的一个小例子,对flex鼠标事件有个初步认识
具体到实现,可以使用Flash的Graphics类,它提供了绘制直线、曲线的方法。例如,`lineTo()`和`curveTo()`函数可用于构建曲线路径。对于更复杂的Visio曲线,可能需要自定义算法来计算每个点的位置,这可能涉及到矩阵...
`Sprite`是一个可绘制的容器,可以包含其他显示对象,并且提供了绘制直线、曲线、填充等方法。而`Shape`则更简单,它是一个用于绘制基本几何形状的类。 要在Flex中画一个点,我们通常会创建一个`Sprite`实例,然后...
- **draw() 方法**:实现具体的绘制逻辑,调用 `lineFunc()` 方法绘制直线。 ##### lineFunc 方法 此方法接受四个参数 `x1`, `y1`, `x2`, `y2`,用于实际绘制线段。 ```actionscript private function lineFunc...
在Flex中,我们可以利用`mx.graphics.graphicsItems`包中的`Line`类来绘制直线,但要实现折线,我们需要用到`Polyline`类。`Polyline`类允许我们定义一系列点,并根据这些点连接起来形成折线。下面将详细讲解如何...
在本文中,我们将深入探讨如何使用Adobe Flex技术来实现一个风向杆的可视化组件。Flex是一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA),它可以为网页提供丰富的交互性和动态图形效果。 首先,...
### Flex 实现高亮闪烁显示 Polyline 的方法 在 Flex 中实现高亮闪烁显示 Polyline 是一种常见的图形用户界面设计技巧,特别是在地图应用、数据可视化等领域。本文将详细介绍如何使用 Flex 和相关技术来实现这一...
- **`drawLine1`**:该函数实现了线条的第一个部分,即从初始位置逐渐向右上方绘制直线。 - **`drawLine2`**:接着 `drawLine1`,继续向右绘制直线。 - **`drawLine3`**:接着 `drawLine2`,垂直向上绘制直线。 ...
1. **图形绘制**:使用Flex提供的Graphics类,可以绘制直线、曲线、圆弧等基本图形,构建温度计的刻度和指针。例如,通过`drawRect()`和`drawLine()`方法绘制刻度线,用`drawCircle()`和`lineTo()`绘制指针。 2. **...
本文将深入探讨一个基于Flex技术的GIS地图系统,该系统利用ArcGIS for Flex API,实现了在地图上绘制曲线、直线、军标、标记等功能。 Flex是Adobe公司推出的一种富互联网应用程序(Rich Internet Application, RIA...
4. 笔触形状:可能包含直线、曲线、填充等不同笔触模式,让用户可以自由选择线条的形态。 5. 透明度调整:用户可以改变线条或填充的透明度,创建半透明效果,增加作品层次感。 6. 工具窗口:预留了一个空白的工具栏...
2. **直线与折线绘制**:用户可以选择在两点间绘制直线或通过多点绘制折线。直线是两点之间的直接连接,而折线则由多个线段组成,每个线段都由用户指定的点连接。 3. **设置箭头**:实现箭头功能需要创建特殊形状的...
3. **图形绘制**:在Flex中,我们可以使用Graphics类进行图形绘制,包括直线、曲线等,这在绘制流程图的连线时非常有用。通过监听鼠标事件,我们可以实现连线的拖动功能。 4. **事件监听**:实现拖动连线功能的关键...
4. **绘制图形**:AlivePDF提供了绘制直线、矩形、椭圆等基本形状的功能。通过`drawLine()`, `drawRect()`, `drawEllipse()`等方法,可以创建自定义图形。 5. **设置页面样式**:可以控制线条的颜色、宽度,以及...
`Sprite`是一个可以包含图形、文本和其他精灵的容器,而`Shape`则用于绘制直线、曲线等基本形状。通过组合这些组件,我们可以构建出拓扑图的节点和边。 在描述中提到的程序实现了节点的拖拽功能,这需要我们对Flex...