当前位置：首页 > news >正文

flex教程：一个虚线画法实例

news 来源：原创 2024/6/2 16:58:46

本文用到两个文件：dashLine.mxml 和 MyDashLine.as

dashLine.mxml调用MyDashLine.as

1、dashLine.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="myInit();">

<mx:Script>

   <![CDATA[

     private function myInit():void{

         var myDashLine:MyDashLine = new MyDashLine();

         this.addChild(myDashLine.myInit(2, 0xFF0000, 0.9, 100, 100, 600, 500, 5, 30, 25));

         this.addChild(myDashLine.myInit(2, 0xFF00FF, 0.3, 100, 500, 600, 100, 10, 30, 25));

     }



   ]]>

</mx:Script>

</mx:Application>

2、MyDashLine.as

package{

import flash.display.Graphics;

import flash.display.Sprite;

import flash.geom.Point;

import mx.core.UIComponent;

public class MyDashLine extends UIComponent{

        private var lines:Sprite = new Sprite();

        private var component:UIComponent = new UIComponent();



   public function MyDashLine(){

      lines = new Sprite();

      component = new UIComponent();

   }



        /*myInit()函数参数注解：

         * 1、shuliang    虚线的条数

         * 2、lineColor   虚线的颜色

         * 3、lineAlpha   虚线的alpha值

         * 4、fromX       虚线起始点的x轴的值

         * 5、fromY       虚线起始点的y轴的值

         * 6、toX         虚线末点的x轴的值

         * 7、toY         虚线末点的y轴的值

         * 8、pointWidth 单个点的厚度

         * 9、pointLength 单个点的长度

         * 10、twoPointDistance 两个点之间的间隔

         *

        */

        public function myInit(shuliang:Number, lineColor:uint, lineAlpha:Number, fromX:Number, fromY:Number, toX:Number, toY:Number, pointWidth:Number, pointLength:Number, twoPointDistance:Number):UIComponent{

            drawDashed(lines.graphics, lineColor, lineAlpha, new Point(fromX, fromY), new Point(toX, toY), pointWidth, pointLength, twoPointDistance);

            return component;

        }



        private function drawDashed(graphics:Graphics, lineColor:uint, lineAlpha:Number, p1:Point, p2:Point, pointWidth:Number, pointLength:Number, twoPointDistance:Number):void{

            graphics.lineStyle(pointWidth, lineColor, lineAlpha);

            var max:Number = Point.distance(p1, p2);

            var dis:Number = 0;

            var p3:Point;

            var p4:Point;

            while(dis < max){

                p3 = Point.interpolate(p2, p1, dis / max);

                dis += pointLength;

                if(dis > max){

                    dis = max;

                }

                p4 = Point.interpolate(p2, p1, dis / max);

                lines.graphics.moveTo(p3.x, p3.y);

                lines.graphics.lineTo(p4.x, p4.y);

                dis += twoPointDistance;

           }

           component.addChild(lines);

        }



}

}