RSS

Basic Shape: A Triangular Path

11 Jun

The icon we are drawing has three major components:

Background:
A triangle with rounded corners, a gradient fill, and a subtle shadow.

Inner Border:
A smaller triangle border inside of the background.

Exclamation Point:
A bang character “!” inside the center of the icon.

Since both JavaScript and ActionScript support paths, we will use paths to define our shapes. Let us start with the background. It is a triangle consisting of three points.

Javascript

context.beginPath();
context.moveTo(canvasWidth/2 - x, this.padding);	
context.lineTo((canvasWidth + this.width)/2 + gamma, this.padding + this.height - gamma);	
context.lineTo((canvasWidth - this.width)/2, this.padding + this.height + this.innerBorder);
context.lineTo(canvasWidth/2 - x, this.padding);
context.closePath();

Actionscript 3

var trianglePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
trianglePath.moveTo(canvasWidth/2 - x, padding);			
trianglePath.lineTo((canvasWidth + iconWidth)/2 + gamma, padding + iconHeight - gamma);			
trianglePath.lineTo((canvasWidth - iconWidth)/2, padding + iconHeight + innerBorder);
trianglePath.lineTo(canvasWidth/2 - x, padding);
Advertisements
 
Leave a comment

Posted by on June 11, 2011 in Action Script3, HTML 5

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: