Drawing a dashed line with actionscript

[rrh]

So, I can specify some things about my lines drawn with lineTo() and curveTo() using lineStyle()

But what if I want to draw a dashed line? There doesn't seem to be a parameter for that in the description of lineStyle()


For doing it the hard way, I've found this formula:
http://en.wikipedia.org/wiki/Bezier_....A9zier_curves

But each line segment is not of equal length, which I would want if I'm going to turn them into dashes.

[C.Bub]

one way would be to cheat and draw a full line, then color it with blending colors, masking parts to match the background color and make it appear dashed.

this.createEmptyMovieClip("mcBackground",this.getNextHighestDepth());


colors = [0x000000, 0xFFFFFF];
alphas = [25,15];
ratios = [0,255];
matrix = {a:10, b:0, c:1, d:0, e:10, f:1, g:1, h:1, i:1};
spreadMethod = "reflect";
interpolationMethod = "linearRGB";
focalPointRatio =.9;

mcBackground.lineStyle(3);
mcBackground.lineGradientStyle("radial", colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);

mcBackground.moveTo(50,10);
mcBackground.lineTo(300,10);

not very easly costumisable.. you have to understand how the matrix works exactly and you have to play with it a lot before you get the hang of it.

[tcox]

I didn't solve your problem but I guess I can help illustrate it. I modified the c code on that wikipedia page a bit for flash and threw some draggable points in there for the curve. Ugly code but you'll get the idea, copy/paste this:

function PointOnCubicBezier(cp, t)
{
    var ax, bx, cx;
    var ay, by, cy;
    var tSquared, tCubed;
    var result = {};

    /* calculate the polynomial coefficients */

    cx = 3.0 * (cp[1].x - cp[0].x);
    bx = 3.0 * (cp[2].x - cp[1].x) - cx;
    ax = cp[3].x - cp[0].x - cx - bx;
        
    cy = 3.0 * (cp[1].y - cp[0].y);
    by = 3.0 * (cp[2].y - cp[1].y) - cy;
    ay = cp[3].y - cp[0].y - cy - by;
        
    /* calculate the curve point at parameter value t */
        
    tSquared = t * t;
    tCubed = tSquared * t;
        
    result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
    result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
        
    return result;
}

function ComputeBezier(cp, numberOfPoints) {
    var curve = new Array(numberOfPoints);
    
    var dt;
    var i;

    dt = 1.0 / ( numberOfPoints - 1 );

    for( i = 0; i < numberOfPoints; i++)
        curve[i] = PointOnCubicBezier( cp, i*dt );
    
    return curve;
}

var points = 40;

var content;

function drawCurve() {
    
    content.clear();
    content = _root.createEmptyMovieClip("content", 0);

    var cp = [ 
        {x:p1._x,y:p1._y}, 
        {x:p2._x,y:p2._y}, 
        {x:p3._x,y:p3._y}, 
        {x:p4._x,y:p4._y} 
    ]

    curve = ComputeBezier(cp, points);

    for(var i=0;i<curve.length-1;i++) {
        content.lineStyle(1,0x00, i%2==0 ? 0 : 100);
        content.lineTo(curve[i+1].x, curve[i+1].y);
    }
}

function getBox(n,x,y,w,h,p,d) {
    var m = p.createEmptyMovieClip(n,d);
    m._x = x; 
    m._y = y;
    m.moveTo(-w/2,-h/2);
    m.beginFill(0xFF,100);
    m.lineTo(w/2,-h/2);
    m.lineTo(w/2,h/2);
    m.lineTo(-w/2,h/2);
    m.lineTo(-w/2,-h/2);
    m.endFill();
    return m;
}

var w = 10;
var h = 10;

p1 = getBox("p1",50,50,w,h,_root,1);
p2 = getBox("p2",50,250,w,h,_root,2);
p3 = getBox("p3",250,250,w,h,_root,3);
p4 = getBox("p4",250,50,w,h,_root,4);

p1.onPress = p2.onPress = p3.onPress = p4.onPress = startDr;

p1.onRelease = p1.onReleaseOutside = p2.onRelease = p2.onReleaseOutside = 
    p3.onRelease = p3.onReleaseOutside = p4.onRelease = p4.onReleaseOutside = stopDr;
    
function startDr() {
    this.onEnterFrame = drawCurve;
    this.startDrag();
}
function stopDr() {
    delete this.onEnterFrame;
    this.stopDrag();
}


drawCurve();

Guess you'd have to think about how to evenly parametrize the curve defined by the Bezier function. Probably not hard for those more math inclined, but I'd have to give it some thought.

Edit: somewhere in the middle of that you'll see a "points" variable. Modify that to modify the number of points determined and the smoothness of the line.

[rrh]

It looks like someone has dealt with this before: I'm going to try this script.

[preston]

you should just be able to use moveTo() when you want to create "space" between each line segment...

[rrh]

Originally Posted by preston

you should just be able to use moveTo() when you want to create "space" between each line segment...

But the trick is calculating the space's x and y values when it is on a curved line.

[preston]

touché good sir

[stesmi99]

this is not perfect and i've hardly tested it sorry too busy but i've made an AS3 class to draw boxes with dashed lines - feel free to use and adapt it to your needs. it probably could be modified and improved. it has no support for curves but can draw angled lines.

implement with

var $dashline = new Dashline();
$dashline.drawBox(x, y, w, h) OR drawLine(x1, y1, x2, y2, dashlength, gaplength);
addChild($dashline.sprite);

here it is...

package flashphotos {
	
	// © stesmi99 | (SENIORCREATIVE.COM) | Melbourne Australia
	/* Permission is hereby given to modify, edit and use this script in anyway you choose. Thanks, Steve Smith */
	
	import flash.display.*;
	
	public class Dashline extends Sprite {
		
		private var __container:Sprite;
		private static var __linewidth:Number;
		private static var __linecolour:Number;
		private static var __linealpha:Number;
		private static var __linehint:Boolean;
		private static var __linescale:String;
		private static var __linecaps:String;
		
		//	CONSTRUCTOR
		//	---------------------------------------
		function Dashline () {
			setvars();
			__container = new Sprite();
			__container.graphics.lineStyle(__linewidth, __linecolour, __linealpha, __linehint, __linescale, __linecaps); 
		}
		
		//	setvars
		//	----------------------
		private function setvars() : void {
			__linewidth 	= 1;
			__linecolour 	= 0xff0000;
			__linealpha 	= 1;
			__linehint 		= true;
			__linescale 	= "NORMAL";
			__linecaps 		= CapsStyle.NONE;
		}
		
		//	drawLine
		//	--------------------
		//	NOTE - the argument default parameters for dashlength and gaplength
		public function drawLine($startx:Number, $starty:Number, $endx:Number, $endy:Number, $dashlength:Number = 5, $gaplength:Number = 5) : void {
			
			var $length = Math.sqrt(($startx - $endx) * ($startx - $endx) + ($starty - $endy) * ($starty - $endy));
			var $angle = Math.atan(($endy - $starty) / ($endx - $startx));
			var $degrees = $angle * (180/Math.PI);
			var $steps = $length / ($dashlength + $gaplength);
			
			var $dashstepx = $dashlength * Math.cos($angle);
			if ($endx < $startx) $dashstepx *= -1;// THIS IS A BUG-KLUDGE TO FIX MINUS VALUE OF X IF ENDX IS LESS THAN STARTX
			
			var $dashstepy = $dashlength * Math.sin($angle);
			
			var $gapstepx = $gaplength * Math.cos($angle);
			if ($endx < $startx) $gapstepx *= -1; // THIS IS A BUG-KLUDGE TO FIX MINUS VALUE OF X IF ENDX IS LESS THAN STARTX
			
			var $gapstepy = $gaplength * Math.sin($angle);
			var $stepcount = 0;
			
			while (($stepcount++) < $steps) {
				
				var $dashstartx:Number = $startx + (($stepcount-1) * ($dashstepx + $gapstepx));
				var $dashstarty:Number = $starty + (($stepcount-1) * ($dashstepy + $gapstepy));
				
				var $dashendx:Number = $dashstartx + $dashstepx;
				var $dashendy:Number = $dashstarty + $dashstepy;
				
				__container.graphics.moveTo($dashstartx, $dashstarty);
				__container.graphics.lineTo($dashendx, $dashendy);
			}
		
		}

		//	drawBox
		//	----------------------------
		public function drawBox($startx:Number, $starty:Number, $w:Number, $h:Number) : void {
			drawLine($startx, $starty, $startx + $w, $starty);
			drawLine($startx + $w, $starty, $startx + $w, $starty + $h);
			drawLine($startx + $w, $starty + $h, $startx, $starty + $h);
			drawLine($startx, $starty + $h, $startx, $starty);
		}
	
	
		// 	GETTER & SETTER METHODS
		//	-----------------------
		public function get sprite() : Sprite { return __container; }
		
	}
	
	
}

stesmi99

[pleomax00]

Hey, try this:

public function dashedline (g:Graphics, x1:Number, y1:Number, x2:Number, y2:Number):void {
			var slope:Number = (y2-y1)/(x2-x1);
			var odd:Boolean = true;
			var lastX:Number = x1;
			var lastY:Number = slope * x1;
			for ( var x:Number = x1 ; x <= x2 ; x = x+5 ) {
				var y:Number = slope * x;
				if ( odd ) {
					g.moveTo (lastX, lastY);
					g.lineTo (x, y);
				}
				lastX = x;
				lastY = y;
				odd = !odd;
			}
		}