Solved

Create custom shape in Flex

Posted on 2007-11-27
9
5,656 Views
Last Modified: 2008-07-21
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
Comment
Question by:chinu1310
  • 7
  • 2
9 Comments
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20366348
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
 
LVL 14

Author Comment

by:chinu1310
ID: 20367422
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
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20371549
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
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20439804
Need any more help on this?
0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 14

Author Comment

by:chinu1310
ID: 20452108
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
 
LVL 19

Accepted Solution

by:
Gary Benade earned 500 total points
ID: 20455546

// 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
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20455555
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
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20498375
Was that what you were looking for?
0
 
LVL 19

Expert Comment

by:Gary Benade
ID: 21568885
Need any more help on this?
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Looping thru 2 dim array 2 589
Querying XML Data Type 4 545
Flex/Air App seeing online status of client from an admin user 1 378
Adobe Experience Manager 4 185
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
This article shows gives you an overview on SQL Server 2016 row level security. You will also get to know the usages of row-level-security and how it works
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Many functions in Excel can make decisions. The most simple of these is the IF function: it returns a value depending on whether a condition you describe is true or false. Once you get the hang of using the IF function, you will find it easier to us…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now