• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5688
  • Last Modified:

Create custom shape in Flex

Hi Experts,

I want to create a custom shape, like different US states maps image in flex. How would I do this ? I have tried ImageMap from Flexlib. It is not what I wanted. I need some action script class which can create custom shape/polygon and result it as bitmap so that I can display that in flex.

Thanks
CK
0
chinu1310
Asked:
chinu1310
  • 7
  • 2
1 Solution
 
Gary BenadeCommented:
http://livedocs.adobe.com/flex/201/langref/flash/display/Graphics.html
package {
    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;
 
    public class GraphicsExample extends Sprite {
        private var size:uint         = 80;
        private var bgColor:uint      = 0xFFCC00;
        private var borderColor:uint  = 0x666666;
        private var borderSize:uint   = 0;
        private var cornerRadius:uint = 9;
        private var gutter:uint       = 5;
 
        public function GraphicsExample() {
            doDrawCircle();
            doDrawRoundRect();
            doDrawRect();
            refreshLayout();
        }
 
        private function refreshLayout():void {
            var ln:uint = numChildren;
            var child:DisplayObject;
            var lastChild:DisplayObject = getChildAt(0);
            lastChild.x = gutter;
            lastChild.y = gutter;
            for (var i:uint = 1; i < ln; i++) {
                child = getChildAt(i);
                child.x = gutter + lastChild.x + lastChild.width;
                child.y = gutter;
                lastChild = child;
            }
        }
 
        private function doDrawCircle():void {
            var child:Shape = new Shape();
            var halfSize:uint = Math.round(size / 2);
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawCircle(halfSize, halfSize, halfSize);
            child.graphics.endFill();
            addChild(child);
        }
 
        private function doDrawRoundRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRoundRect(0, 0, size, size, cornerRadius);
            child.graphics.endFill();
            addChild(child);
        }
 
        private function doDrawRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRect(0, 0, size, size);
            child.graphics.endFill();
            addChild(child);
        }
    }
}

Open in new window

0
 
chinu1310Author Commented:
Hi,

Thanks for that link. Actually I visited that link before. The only question I have is how do I create polygons using this class. I need to create different state's map images using flex. This only does rectangle,roundrect. Thats not what I am looking for.

Thanks
CK
0
 
Gary BenadeCommented:
graphics.beginFill(0xFF0000,0.5);
graphics.moveTo(10,10);
graphics.lineTo(100,50);
graphics.lineTo(100,150);
graphics.lineTo(70,70);
graphics.lineTo(10,10);
graphics.endFill();
0
Improve Your Query Performance Tuning

In this FREE six-day email course, you'll learn from Janis Griffin, Database Performance Evangelist. She'll teach 12 steps that you can use to optimize your queries as much as possible and see measurable results in your work. Get started today!

 
Gary BenadeCommented:
Need any more help on this?
0
 
chinu1310Author Commented:
Yeah man. Thanks for checking back . The ting I want is i want to create a custom polygon and add and event to that shape and display on the flex application. I did some research how cna i convert the vector grphics to display object but no success.

Can you do something like this for me ?

Thanks for checking back.
0
 
Gary BenadeCommented:

// save as mypolygon.as in a directory called mypolygon
package mypolygon
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class mypolygon extends Sprite
	{
		public function mypolygon()
		{
			super();
			draw();
			addEventListener( MouseEvent.CLICK, click);
		}
		private function click( e:MouseEvent):void
		{
			dispatchEvent( new Event('polyClick',true));
		}
		public function draw():void
		{
			this.graphics.beginFill(0xFF0000,0.5);
			this.graphics.moveTo(10,10);
			this.graphics.lineTo(100,50);
			this.graphics.lineTo(100,150);
			this.graphics.lineTo(70,70);
			this.graphics.lineTo(10,10);
			this.graphics.endFill();		
		}
	}
}
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mypolygon.mypolygon;
			private function init():void
			{			
				addEventListener('polyClick', polyClicked);
				var poly:mypolygon = new mypolygon();
				poly.name = "poly1";
				poly.x = 100;
				poly.y = 100;
				poly.width = 150;
				poly.height = 150;
				rawChildren.addChild( poly);							
				poly = new mypolygon();
				poly.name = "poly2";
				poly.x = 10;
				poly.y = 10;
				poly.width = 150;
				poly.height = 150;
				rawChildren.addChild( poly); 
			}
			private function polyClicked( e:Event):void
			{
				trace( 'poly ' + e.target.name + ' clicked');
			}
		]]>
	</mx:Script>
</mx:Application>

Open in new window

0
 
Gary BenadeCommented:
if you want hollow shapes change the code to:
		public function draw():void
		{
			//this.graphics.beginFill(0xFF0000,0.5);
			this.graphics.lineStyle(10);
			this.graphics.moveTo(10,10);
			this.graphics.lineTo(100,50);
			this.graphics.lineTo(100,150);
			this.graphics.lineTo(70,70);
			this.graphics.lineTo(10,10);
			//this.graphics.endFill();		
		}

Open in new window

0
 
Gary BenadeCommented:
Was that what you were looking for?
0
 
Gary BenadeCommented:
Need any more help on this?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Improved Protection from Phishing Attacks

WatchGuard DNSWatch reduces malware infections by detecting and blocking malicious DNS requests, improving your ability to protect employees from phishing attacks. Learn more about our newest service included in Total Security Suite today!

  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now