Howdy mister JointStyle.MITER



5 Comments

Share







Do you like sharp border corners (miter ones)?
Well, i do, but adobe does not, probably… (watch the third square with JointStyle.MITER joints set)


ps: yeap, the issue can be fixed by setting the LineScaleMode.NORMAL, instead of the NONE, but what if i do need the NONE mode on?



Try it out yourself:


package 
{
	import flash.display.MovieClip;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.JointStyle;
	import flash.display.CapsStyle;
	import flash.display.LineScaleMode;
	import flash.events.Event;
	
	[SWF(width="400", height="400", frameRate="50")]
	public class MitterBug extends MovieClip
	{
		var inc:Boolean = true;
		var b:int = 1;
		var jointStyles:Array = [JointStyle.BEVEL, JointStyle.ROUND, JointStyle.MITER];	// MITTER's buggy
		
		public function MitterBug()
		{
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(event:Event = null):void
		{
			var n:int = jointStyles.length;
			for(var i = 0; i < n; ++i) addChild(new Shape());
			addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
		}

		private function redrawRect(g:Graphics, b:int, j:String, w:int, h:int):void
		{
			g.clear();
			g.lineStyle(b, 0, 1, true, LineScaleMode.NONE, CapsStyle.NONE, j);
			g.beginFill(0xff0000, 1);
			g.drawRect(0, 0, w, h);
			g.endFill();
		}
		
		private function onEnterFrameHandler(event:Event):void
		{
			if(b == 50) 	inc = false;	// increase 'til 50
			if(b == 0)		inc = true;		// decrease 'til 0
			
			if(inc) b++;
			else b--;
			
			var n:int = jointStyles.length;
			
			for(var i = 0; i < n; ++i)
			{
				var s:Shape = getChildAt(i) as Shape;
				s.rotation++;
				s.x = 200;
				s.y = 70 + i*120;
				redrawRect(s.graphics, b, jointStyles[i], 40, 40);
			}
		}
	}
}

5 Comments (+add yours?)

  1. Niels
    May 30, 2011 @ 10:46:59

    Interesting feature you found there :) I just ran into the weirdest thing with the draw API myself. I get a “warning” when compiling this code:

    import flash.display.Graphics;
    import flash.display.LineScaleMode;
    this.graphics.lineStyle(2,0,1,true, LineScaleMode.NORMAL);

    Do you have this same issue?

    (I posted a bug report and found my way around it, but thought it funny to come across this when I was just hacking around with the draw API myself :) )

  2. jloa
    May 30, 2011 @ 14:41:48

    Ran your code in flash ide cs5 under fp 10,3,181,14 debug — no warnings thrown.
    Yeah, the drawing api (the vector drawing api) is thought really weird with lots of anomalies (eg if not calling the graphics.clear() method before redrawing the graphics, this will lead to memory leaking etc i’ve got a whole collection of those :)

  3. Andras Csizmadia
    Jun 01, 2011 @ 13:06:27

    The following code fixes the glitch:
    s.cacheAsBitmap = true; // after line 52..

    Best,
    Andrew

  4. jloa
    Jun 02, 2011 @ 13:09:27

    Nope… It only fixes those buggy trails, yet the border renders incorrectly.

  5. shogun
    Jun 12, 2011 @ 01:12:52

    amazing and beautiful! You make me understand. I like the post.

Leave a Reply

Spam protection by WP Captcha-Free