Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 04-09-2007, 06:18 PM   #1
rrh
throw a trace() in there
 
Join Date: Dec 2006
Posts: 1,982
Default Drawing a dashed line with actionscript

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.
rrh is offline   Reply With Quote
Old 04-09-2007, 06:50 PM   #2
C.Bub
Registered User
 
Join Date: Aug 2005
Posts: 89
Default

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.

ActionScript Code:
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.

Last edited by C.Bub; 04-09-2007 at 06:54 PM.
C.Bub is offline   Reply With Quote
Old 04-09-2007, 07:53 PM   #3
tcox
Registered User
 
Join Date: Jul 2006
Posts: 368
Default

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:

ActionScript Code:
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.
tcox is offline   Reply With Quote
Old 04-10-2007, 02:43 AM   #4
rrh
throw a trace() in there
 
Join Date: Dec 2006
Posts: 1,982
Default

It looks like someone has dealt with this before: I'm going to try this script.
rrh is offline   Reply With Quote
Old 04-10-2007, 02:55 AM   #5
preston
hit or miss
 
Join Date: Feb 2007
Posts: 283
Default

you should just be able to use moveTo() when you want to create "space" between each line segment...
preston is offline   Reply With Quote
Old 04-10-2007, 03:52 AM   #6
rrh
throw a trace() in there
 
Join Date: Dec 2006
Posts: 1,982
Default

Quote:
Originally Posted by preston View Post
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.
rrh is offline   Reply With Quote
Old 04-10-2007, 04:39 AM   #7
preston
hit or miss
 
Join Date: Feb 2007
Posts: 283
Default

touché good sir
preston is offline   Reply With Quote
Old 11-03-2007, 03:08 AM   #8
stesmi99
seniorcreative.com.au
 
Join Date: Nov 2004
Location: Melbourne, Australia
Posts: 37
Default

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...

Code:
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
stesmi99 is offline   Reply With Quote
Old 08-30-2011, 12:39 PM   #9
pleomax00
Registered User
 
Join Date: Aug 2011
Posts: 1
Default Return to basics

Hey, try this:

Code:
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;
			}
		}
pleomax00 is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Line Continuation in Actionscript? gorilla2 ActionScript 1.0 (and below) 13 09-21-2011 02:57 AM
speed up line drawing... the_orn ActionScript 2.0 2 04-21-2006 08:31 AM
Drawing curved line scooper Simple Stuff (Newbies) 5 02-03-2006 03:21 AM
Dynamic Line Drawing Possible? JadedEvan ActionScript 1.0 (and below) 1 01-16-2003 05:10 AM
Drawing a line with ActionScript?? BeWare ActionScript 1.0 (and below) 5 02-01-2001 09:43 AM


All times are GMT. The time now is 12:33 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.