Flex painting dotted line

2010-06-07  来源:本站原创  分类:Flash  人气:219 

Personal blog: Wolf Dreams --- love Ukraine and housing

Today's project needs, need to draw dotted lines, see later about API, AS API is not related to its implementation so, check back a bit in the online information, the whole dotted line using the mouse to draw the stuff.

Flex code (for performance purposes):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="absolute" xmlns:line="cyou.line.*"
                    initialize="init()"
                    >
        <mx:Script>
                <![CDATA[
                   import cyou.line.DrawLine;
                   private var isDrawing:Boolean=false;
                   private var startP:Point=new Point();
           private function drawLine(event:MouseEvent):void{
              if(!isDrawing){
                 // First click start recording start point  , Start line drawing
                 startP.x=event.localX;
                 startP.y=event.localY;
                 isDrawing=true;
              }else{
                 isDrawing=false;
              }
           }
           private function moveMouse(event:MouseEvent):void{
               if(isDrawing){
                  panel.graphics.clear();
                  var endP:Point=new Point(event.localX,event.localY);
                  var dl:DrawLine=new DrawLine();
                  dl.freeDraw(startP,endP,panel.graphics);
               }
           }
                ]]>
        </mx:Script>
        <mx:VBox width="100%" height="100%" click="drawLine(event)" mouseMove="moveMouse(event)"/>
</mx:Application>

Here is the core code (AS):

package cyou.line
{
        import flash.display.Graphics;
        import flash.geom.Point;
        public class DrawLine
        {
                public function DrawLine()
                {
                }
                public function freeDraw(fP:Point,tP:Point,g:Graphics):void {
             g.lineStyle(5,0x000000,1);
             if(!fP){
                 fP=new Point(0,0);
             }
             if(!tP){
                 tP=new Point(0,0);
             }  

             var solidLength:Number=10;
             var brokenLength:Number=10;  

             var lineAngle:Number;
             lineAngle = Math.atan2(tP.y - fP.y,tP.x - fP.x);  

             var xSolidLength:Number=solidLength*Math.cos(lineAngle);
             var ySolidLength:Number=solidLength*Math.sin(lineAngle);  

             var xBrokenLength:Number=brokenLength*Math.cos(lineAngle);
             var yBrokenLength:Number=brokenLength*Math.sin(lineAngle);  

             var forwardFlag:Boolean=true;
             if(tP.x<fP.x){
                 forwardFlag=false;
             }
             var tempP:Point=new Point(fP.x,fP.y);
             var tempToP:Point=new Point(tP.x,tP.y);  

             // When the line is a solid line of time
             var lineType:String="solid";  

             while(checkIn(tempP.x,tP.x,forwardFlag)){
                 g.beginFill(0x555555);
                 if(lineType=="solid"){
                     tempToP.x=tempP.x+xSolidLength;
                     tempToP.y=tempP.y+ySolidLength;
                     g.moveTo(tempP.x, tempP.y);
                     g.lineTo(tempToP.x, tempToP.y);
                     lineType="space";
                 }else{
                     tempToP.x=tempP.x+xBrokenLength;
                     tempToP.y=tempP.y+yBrokenLength;
                     g.moveTo(tempToP.x, tempToP.y);
                     lineType="solid";
                 }
                 tempP.x=tempToP.x;
                 tempP.y=tempToP.y;
                 g.endFill();
             }
         }  

         private function checkIn(x:Number,toX:Number,forwardFlag:Boolean):Boolean{
             var result:Boolean=true;
             if(forwardFlag){// Forward
                 if(x<toX){
                 }else{
                     result=false;
                 }
             }else{
                 if(x>toX){
                 }else{
                     result=false;
                 }
             }
             return result;
         }
        }
}

In fact, painting the dotted line is a first draw a text message, and then move along the end to leave a blank moment, and then followed by drawing a solid line, has been so repeated, until the painting to finish up.

The effect is as follows:

Flex painting dotted line

相关文章
  • Flex painting dotted line 2010-06-07

    Personal blog: Wolf Dreams --- love Ukraine and housing Today's project needs, need to draw dotted lines, see later about API, AS API is not related to its implementation so, check back a bit in the online information, the whole dotted line using the

  • IText painting dotted line problem 2010-07-26

    Recently in the output PDF file with IText, their first time to do, so do not know many things, especially the layout is very complex. Dotted line in the picture with IText a lot of time to go online to find information not found. Finally in java Tut

  • flex the dotted line - in the update 2010-07-12

    package view { import flash.geom.Point; import mx.core.UIComponent; public class DottedLine extends UIComponent { private var _endPoint:Point;// End point coordinates private var _startPoint:Point;// Starting point-coordinates private var _lineSize:N

  • flex draw dotted line 2010-06-30

    Transfer: http://dxm1986.javaeye.com/blog/686288

  • AS3 drawing a dotted line. Zebra 2011-05-03

    package cn.lite3.utils { import flash.display.BlendMode; import flash.display.Graphics; import flash.geom.Point; /** * www.lite3.cn * [email protected] * @author lite3 */ public class GraphicsUtil { /** * Draw Zebra * * @param graphics * @param beginPoint

  • dotted line + arrow flex End 2010-07-12

    package view { import flash.geom.Point; import mx.core.UIComponent; public class GraphCavas extends UIComponent { private var _endPoint:Point;// End point coordinates private var _startPoint:Point;// Starting point-coordinates private var _lineSize:N

  • Image link to the dotted line 2010-10-21

    Photo by point, will see a dotted edges in the picture, in which to provide a method to remove the dotted rectangle. <style type="text/css"> a{ display:block; position:relative; font-size:1em; overflow:hidden; LEFT: 20px; WIDTH: 334px; TOP

  • HR into a dotted line 2010-10-30

    hr {background-color: # FFFFFF; border-color:-moz-use-text-color-moz-use-text-color # E0E0E0; border-style: none none dotted; border-width: medium medium 2px; color: # FFFFFF; height: 1px; margin: 1.5em 0;}

  • Flex DataGrid display line numbers 2010-12-07

    <? Xml version = "1.0" encoding = "utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout= "absolute"> <mx:DataGrid dataProvider="{ac}" "dg" rowCount= "15&q

  • Flash frame dotted line solutions 2009-11-13

    Since an anti-Microsoft browsers Security update After, Flash web pages began to appear dashed frame shows Example of a Object that is the way Flash tag call to open IE browser (Firefox does not this issue), Flash will have "click to activate and use

  • Remove the focus of the dotted line 2010-07-19

    The Internet to find the way, try the next one by one: Add a tag in <a> onFocus = "this.blur ()" statement: <a href="#"> try </ a> Method of stupid, but so is compatible with ie, ff. 2 add label in <a> hidefocus

  • Click the checkbox to remove the dotted line when 2011-01-11

    <li><label><input type="checkbox" value=""/> Baidu </label></li> <li><label><input type="checkbox" value=""/> The Google search engine </label></li> <li

  • A nice line script html 2010-05-14

    Some useful html line script [change] 2009-11-14 18:00 where the length of the line width requirements, but also a percentage; color is the color, size of course, is the thickness of the. align the provisions of the line position, left, right, center

  • AS in the painting line, Draw or Fill 2010-08-27

    Painting line is Flex and ActionScript development of the most common operation, it seems very simple and there's really nothing, especially when compared linear thickness of hours, even more so. However, a Draw or Fill, sometimes still need to be co

  • flex linechart draw dotted lines, some lines connected to the Y axis maximum value of problem-solving (the original) 2011-09-20

    The use of flex linechart, we often encounter strange problems. Of course, is the result after the user-defined. Problem now is the last mentioned, is drawing some lines while dotted lines connected to the Y axis maximum value of. And is a solid, puz

  • flex dashed arrows to move along the dotted lines + End 2010-07-12

    1. Dashed arrow direction package view.line { import flash.geom.Point; import mx.core.UIComponent; public class ArrowUI extends UIComponent { public static var CENTER:String = "CENTER"; public static var STARTPOINT:String = "STARTPOINT"

  • FLEX linechart break method (original) 2011-09-13

    Please indicate the source reproduced friends, thank you. Recently, there is a problem is the flex linechart disconnection problems. BUG phenomenon is that, before a line is off to a lower value than on. Then LINECHART off on their own, but there is

  • dashed curve and flex and other custom Datatip 2010-06-22

    Need to flex some of the recent components for data presentation, but do not find the right has been dashed, and recently found a dotted line and the other to do better rendering of the map data, the effect as shown below: Source on the map in annex

  • flex common type summary 2010-09-04

    [Size = x-small] [/ size] 1, as3 ebaylib http://code.google.com/p/as3ebaylib/2, as3youtubelib http://code.google.com/p/as3youtubelib/3, as3flickrlib http://code.google.com/p/as3flickrlib/4, Yahoo ASTRA Flash Components http://developer.yahoo.com/flas

  • The border line of table settings 2010-03-12

    <table cellspacing="0" cellpadding="8" width="600" border="0"> <tbody> <tr> <td width="220"> <table cellspacing="0" cellpadding="0" rules="cols" wid