`
ttong547785026
  • 浏览: 6086 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

flex画箭头

    博客分类:
  • flex
阅读更多


package customer
{
    import flash.geom.Point;
    
    import mx.core.UIComponent;

    public class MyTriangle extends UIComponent
    {
        public function MyTriangle()
        {
            super();
        }
        
        //箭头的大小
        public var Radius:int=6;
        public var FromPoint:Point;
        public var ToPoint:Point;
        //线性的颜色
        public var LineColor:uint=0x000000;
        //是否需要画箭头
        public var NeedArrow:Boolean=true;
        
        private function GetAngle():int
        {
            var  tmpx:int=ToPoint.x-FromPoint.x ;
            var tmpy:int=FromPoint.y -ToPoint.y ;
            var angle:int= Math.atan2(tmpy,tmpx)*(180/Math.PI);//这是什么意思呢???
            return angle;
        }
        
        //绘制线
        public function Draw():void
        {
            this.graphics.clear();
            this.graphics.lineStyle(1,LineColor,1);
            this.graphics.moveTo(FromPoint.x,FromPoint.y);
            this.graphics.lineTo(ToPoint.x,ToPoint.y);
            
            if(NeedArrow)
            {
                var angle:int =GetAngle();
                var centerX:int=ToPoint.x-Radius * Math.cos(angle *(Math.PI/180)) ;
                var centerY:int=ToPoint.y+Radius * Math.sin(angle *(Math.PI/180)) ;
                var topX:int=ToPoint.x ;
                var topY:int=ToPoint.y  ;
                
                var leftX:int=centerX + Radius * Math.cos((angle +120) *(Math.PI/180))  ;
                var leftY:int=centerY - Radius * Math.sin((angle +120) *(Math.PI/180))  ;
                
                var rightX:int=centerX + Radius * Math.cos((angle +240) *(Math.PI/180))  ;
                var rightY:int=centerY - Radius * Math.sin((angle +240) *(Math.PI/180))  ;
                
                this.graphics.beginFill(LineColor,1);
                
                this.graphics.lineStyle(1,LineColor,1);
                
                this.graphics.moveTo(topX,topY);
                this.graphics.lineTo(leftX,leftY);
                
                this.graphics.lineTo(centerX,centerY);
                
                this.graphics.lineTo(rightX,rightY);
                this.graphics.lineTo(topX,topY);
                
                this.graphics.endFill();
            }
        }
        
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" 
	creationComplete="init();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FCFCFC, #FCFCFC]">
    <mx:Script>
        <![CDATA[
        /*1.画一条线,这个很简单。
		  2.画箭头,这步比较麻烦,因为画箭头的时候,线需要旋转,箭头也需要跟着旋转,这样就需要动态的计算坐标。
        * */
            
            import mx.controls.Alert;
            import customer.MyTriangle;
            
            var begin:Boolean=false;
            var tmp:MyTriangle;
            var fromPoint:Point;
            
            
            private function mouseDownHandler(e:MouseEvent) : void
            {
                begin=true;
                fromPoint=new Point(mouseX,mouseY);
                tmp=new MyTriangle();
                tmp.Radius=4;
                tmp.NeedArrow=true;
                myCanvas.addChild(tmp);
            }
            
            private function mouseMoveHandler(e:MouseEvent):void
            {
                if(begin)
                {
                    var toPoint:Point=new Point(mouseX,mouseY);
                    tmp.FromPoint=fromPoint;
                    tmp.ToPoint=toPoint;
                    tmp.Draw();
                }    
            }
            
            private function mouseOverHandler(e:MouseEvent):void
            {
                begin=false;
            }
            
        ]]>
    </mx:Script>
    <mx:Canvas x="0" y="0" width="100%" id="myCanvas" height="100%"  
    	mouseUp="mouseOverHandler(event)" mouseDown="mouseDownHandler(event)" mouseMove="mouseMoveHandler(event);">
    </mx:Canvas>
        
</mx:Application>


分享到:
评论

相关推荐

    flex 画箭头 拖动示例

    flex画两个图片控件,用箭头把这两个连接起来,定制工作流程需要的flex技术例子。

    ArcGIS Flex API和SuperMap Flex API实现的军标箭头库

    本项目聚焦于使用Flex API,一种基于Adobe Flex的开发框架,来实现军标箭头库的构建。这涉及到Web GIS应用的开发,以及如何将军事符号标准(例如北约军标)与地图服务相结合。 首先,ArcGIS Flex API是由Esri公司...

    flex 画流程图 简单demo

    在本示例中,"flex 画流程图 简单demo" 是一个使用Flex技术来创建流程图的简单演示项目。流程图是用于表示算法、工作流程或系统操作的图形化工具,它通过各种图形元素如流程框、箭头等来直观表达步骤和决策过程。 ...

    FLEX ActionScript超强仿visio画线功能

    在这个特定的项目中,“FLEX ActionScript超强仿visio画线功能”是指使用ActionScript实现的类似Microsoft Visio的图形绘制功能。 Visio是一款流行的图表和流程图绘制软件,允许用户轻松创建各种复杂的图形。在FLEX...

    arcgis flex 动态标绘

    基于arcgis flex api 实现动态标绘功能,为2.0新版本

    FLex 左右滑动图片墙

    在本文中,我们将深入探讨如何使用Adobe Flex技术创建一个具有左右滑动功能的图片墙。Flex是一种基于ActionScript 3(AS3)的开源框架,主要用于构建富互联网应用程序(RIA)。通过利用Flex,开发者可以轻松地创建...

    Flex实现画线(可拖拽、带箭头、可变色)

    在Flex编程中,创建一个可拖拽、带有箭头且颜色可变的线条是一个常见的需求,这通常用于构建图形编辑器、流程图或者简单的绘图应用。本篇将详细讲解如何利用ActionScript(AS)来实现这样的功能。 首先,我们需要...

    flex 图片轮播效果

    "flex 图片轮播效果"是指利用Adobe Flex这一开发框架来实现这种功能。Flex是一款基于ActionScript和MXML的开源工具,主要用于构建富互联网应用程序(RIA)。以下是对这个主题的详细讲解: 首先,Flex支持XML...

    flex动态标绘作战图箭头曲线的源程序

    这个源程序标题“flex动态标绘作战图箭头曲线的源程序”表明它是一个使用Flex3开发的项目,专注于在作战图上动态绘制箭头曲线。这可能是军事模拟、战术规划或任何需要表示动态流向的复杂应用的一部分。 Flex3是Flex...

    flex 俄罗斯方块 源码

    例如,左右箭头键控制方块水平移动,下箭头加速下落,上箭头尝试旋转方块。 5. **得分系统**:每当消除一行,玩家的得分会增加。源码中会有一个计分系统,负责计算并显示得分。 6. **界面设计**:Flex的组件库使得...

    FLEX4-instance.rar_flex_flex4

    3. **DateSpinner**:这是一个允许用户通过上下箭头滚动选择日期的组件。它提供了增加或减少日期单位(如天、月、年)的便捷方式。 4. **TimeFormatter** 和 **TimeParser**:这两个类分别用于日期和时间的格式化和...

    Flex 4 进度条的皮肤

    主要组件包括轨道、拇指(即可拖动的部分)以及箭头按钮。 通过上述方法,你可以根据自己的设计需求,创建出富有个性和独特视觉风格的进度条和滚动条皮肤。记住,良好的界面设计不仅关乎功能,还在于提供出色的用户...

    最新的flex流程图源码

    1. **图形对象和布局**:流程图通常由各种形状(如矩形、菱形、箭头等)组成,源码中会定义这些图形对象,并实现它们之间的布局算法,如树状布局、网状布局等。 2. **事件处理**:流程图的节点和连接线可能需要响应...

    flex tree控件

    默认情况下,Flex Tree控件为每个节点提供预设的图标,如展开/折叠箭头。要去除这些默认图标,我们需要在NodeRenderer类中进行定制。创建一个新的MXML或ActionScript类,继承自mx.controls.treeClasses....

    flex 3.0流程编辑器修改版源码

    在我们所讨论的"flex 3.0流程编辑器修改版源码"中,重点集中在流程图的绘制、元素的拖动、线条的连接以及箭头的处理等方面。 首先,流程编辑器的核心功能在于流程图的创建。流程图是表示工作流程或系统状态变迁的...

    Flex版本的简单标绘Plot

    在本案例中,"Plot"是指利用Flex进行的图形绘制,特别是关于箭头、风向和目标方向等元素的标绘。 首先,让我们详细了解一下Flex中的图形绘制基础。在Flex中,我们可以使用DisplayObject类及其子类(如Sprite和Shape...

    flex 360度旋转小人,模拟3D效果

    7. **交互设计**:为了让用户更好地理解如何操作,可以添加视觉提示,例如箭头指示旋转方向,或者使用进度条显示旋转进度。同时,考虑添加键盘快捷键或触摸手势,增加可访问性。 通过以上步骤,我们可以创建一个...

    flex 人物行走源代码

    5. **事件监听**:人物行走可能响应用户的键盘输入或触摸事件,例如,当检测到"上箭头"键被按下时,人物向上行走。ActionScript 3.0的Event类和EventListener接口可用于监听和处理这些事件。 6. **物理引擎**:对于...

    flex开发的坦克大战游戏

    开发者需要对特定的键盘事件做出响应,如上、下、左、右箭头键控制坦克移动,空格键发射子弹。 此外,游戏的界面设计也是吸引玩家的重要因素。Flex的MXML允许开发者以声明式的方式创建UI,通过CSS样式表定义各个...

    Flex 仿SOHU高清首页图片切换广告 xml配置文件

    在这个案例中,我们可能会用到一个自定义组件来展示图片广告,这个组件可能继承自`mx:Canvas`或`s:Group`,并包含一个或多个`mx:Image`组件来显示图片,以及可能的导航按钮(如左右箭头)用于切换图片。 3. **数据...

Global site tag (gtag.js) - Google Analytics