`
ttong547785026
  • 浏览: 5981 次
  • 性别: 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实现的军标箭头库

    分别用ArcGIS Flex API和SuperMap Flex API实现的军标箭头库,有需要源码的可回复邮箱索取。

    arcgis flex 动态标绘

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

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

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

    FLEX ActionScript超强仿visio画线功能

    拷贝别人做的一个画线的demo,没有使用任何第三方的东西,任意指定两点,可以画直线,折线,可以设置箭头,锚点,线的粗细,线的颜色,功能强大; 开发时间有点仓促,难免有BUG,欢迎大家批评指正。

    react-archer:React在React元素之间绘制箭头:fountain_pen:

    React弓箭手 :bow_and_arrow: 在React中的DOM元素之间绘制箭头 :fountain_pen:安装npm install react-archer --save或yarn add react-archer例子 import { ArcherContainer , ArcherElement } from 'react-archer' ...

    flex做的工作流在线编辑器小例子

    不包括工程,是我项目中的一个在线编辑器的源码,完全是我个人做的东西,可以扩展成工作流的在线编辑器,我目前只在里边提供了基本的功能,主要包括拖拽算法,删除,画带箭头的关系线,里边是一个mxml文件,一个后台...

    LeadingEndStudy:前端自学项

    div箭头和气泡210306 JavaScript语句210306 CSS变量&CSS常见动画合集210307 阴影,渐变,滤镜210308 文字特效210309 解决父元素高度坍塌塌陷问题210310 表单美化210311 实用css小集锦210312 Emmet210313 布局练习...

    web前端面试指南和高频考题解析,大厂员工整理,pdf和md版本都

    - `flex`布局 - 如何实现居中对齐? - 理解语义化 - CSS3 动画 - 重绘和回流,变量类型 - JS 的数据类型分类和判断 - 值类型和引用类型 - 原型与原型链(继承) - 原型和原型链定义 - 继承写法 - 作用域和闭包 ...

    基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果

    10. **布局与定位**:通过 `display` 属性(如 `block`, `inline-block`, `flex`, `grid` 等)和 `position` 属性(如 `static`, `relative`, `absolute`, `fixed`),可以控制菜单项的排列方式和相对位置,实现下拉...

    LearningJS

    学习JS蓬松的鸟参照的Flappy Bird,...旋转,变换原点秒针角度骤变问题第三天:CSS变量知识盲区变量CSS变量 CSS变量第4天:阵列有氧运动第1天 Array.prototype下的一级用法第五天:Flex Panel Gallery flex布局 CSS的

    css样式代码

    `.arrow::after`是伪元素,用于画出45度角的箭头,利用`content: ""`创建一个空的内容,然后通过`border`属性设置线条,最后用`transform: rotate(45deg)`旋转元素以形成箭头形状。 `.center`类用于居中显示元素,...

    用Flash软件制作贪吃蛇的游戏的设计原理.docx

    开发环境通常是Adobe Flash或Flex,它们提供了图形界面供开发者设计和编辑动画。运行环境一般是指支持Flash Player的浏览器或设备,确保游戏可以在不同平台上流畅运行。而编程语言是ActionScript,它有三种版本:AS1...

    arm-html5-opera-tv:“为电视创建高性能HTML5应用程序”的测试用例-ARM Workshop

    style=inline&anim=tile&n=100&txt&img&s=10&back -动画图块,图块数= 100,布局:内嵌块,在此重复10步使用箭头键滚动。 单击灰色的'info'元素(带有JSON conf)以开始测试动画。 试运行假定从位置0开始。conf ...

    Javascript知识点汇总.pdf

    4. **常用布局结构**:包括浮动布局(使用`float`属性)、定位布局(`position`属性)、Flex布局(`display: flex`)和Grid布局(`display: grid`)。 5. **编写习惯**:保持代码整洁,合理使用注释,遵循语法规则...

    小程序实现展开/收起的效果示例

    这里,我们将标题设置为一个Flex布局,并对内容部分应用`overflow: hidden`和`text-overflow: ellipsis`来实现内容的收起效果。具体样式如下: ```less .container { .title { display: flex; flex-direction: ...

    flexslider.js实现移动端轮播

    directionNav: false, // 是否显示左右导航箭头 pauseOnHover: true // 鼠标悬停时暂停轮播 }); }); ``` 这只是一个基本的flexslider.js轮播实现,实际使用时可以根据项目需求进行更复杂的定制,如添加动画效果...

    HTML与CSS面试题.docx

    ES6的新特性包括const、let、解构赋值、promise、箭头函数、扩展运算符、对象简写等。 CSS部分: 1. 盒模型宽度/高度计算: 盒模型宽度(高度同宽度)= 内容宽度+内边距+边框。可以使用box-sizing:border-box;来让...

    面试题总(奚奚).docx

    5. **居中布局**:水平居中可以通过设置`margin: 0 auto`实现,垂直居中可以用`display: flex`配合`align-items: center`或`vertical-align: middle`、`line-height`、`table-cell`等方法。 6. **CSS选择器**:包括...

    面试牛逼攻略

    ES6引入了let、const、箭头函数、Promise等新特性;原型链是JavaScript继承的核心,通过__proto__属性连接;call、apply、bind都用于改变函数调用的上下文,但方式不同;AOP常用于添加日志、事务管理等横切关注点;...

Global site tag (gtag.js) - Google Analytics