Mike T. Henderson

Interactive Design & Art Direction

AS3 Draw Circle Class Version 2

Mar 21 2008

With version 2 of my draw.Circle class, I've included gradient control as well as more control on the stroke by adding parameters for pixelHinting, and scaleMode.

With these parameters set I can now call my class as follows:

import com.mikethenderson.draw.Circle;
var myCircle:Circle = new Circle({
radius : 100,
colors : [0x000000, 0x666666],
alphas : [1, 1],
ratios : [0, 255],
stroke : [1, 0x000000, 1]
});
addChild( myCircle );

The Complete List of Public Properties:

  1. radius:Number -- Radius of circle. (Default 25)
  2. stroke:Array -- [strokeWidth:Number, strokeColor:uint, strokeAlpha:Number(between 0-1)]. (Default none.)
  3. colors:Array -- Array of hex values. If one hex number, fill equals solid fill. If multiple hex numbers, fill defaults to linear gradient.
  4. alphas:Array -- Array of alpha numbers (between 0 and 1) for each hex value entered in colors array. Only valid on gradient fills.
  5. ratios:Array -- Array of ratio numbers (between 0 and 255) for each hex value entered in colors array. Only valid on gradient fills.
  6. gradientType:String -- GradientType.LINEAR or GradientType.RADIAL. (GradientType.LINEAR)
  7. gradientAngle:Number -- Degree of linear blend between 0 and 360. (Default 0)
  8. pixelHinting:Boolean -- A Boolean value that specifies whether to hint strokes to full pixels. (Default true)
  9. scaleMode:Sring
    • LineScaleMode.NONE (Default) -- Never scale the line thickness.
    • LineScaleMode.NORMAL -- Always scale the line thickness when the object is scaled (the default).
    • LineScaleMode.VERTICAL -- Do not scale the line thickness if the object is scaled vertically only. For example, consider the following circles, drawn with a one-pixel line, and each with the scaleMode parameter set to LineScaleMode.VERTICAL. The circle on the left is scaled vertically only, and the circle on the right is scaled both vertically and horizontally:
    • LineScaleMode.HORIZONTAL -- Do not scale the line thickness if the object is scaled horizontally only. For example, consider the following circles, drawn with a one-pixel line, and each with the scaleMode parameter set to LineScaleMode.HORIZONTAL. The circle on the left is scaled horizontally only, and the circle on the right is scaled both vertically and horizontally:
package com.mikethenderson.draw {
 
import flash.display.*;
import flash.geom.*;
 
public class Circle extends Shape {
 
// set parameters
private var _radius:Number;
private var _colors:Array;
private var _stroke:Array;
private var _gradientType:String;
private var _gradientAngle:Number;
private var _alphas:Array;
private var _ratios:Array;
private var _pixelHinting:Boolean;
private var _scaleMode:String;
 
// constructor
public function Circle( args:Object ) {
 
// when circle is created, automatically draw it
draw( args );
 
}
 
// draws circle based on set vars
private function draw( args:Object ):void {
 
// set defaults
_radius = ( args.radius != undefined ) ? args.radius : 25;
_stroke = ( args.stroke != undefined ) ? args.stroke : [0, 0x000000, 0];
_gradientType = ( args.gradientType == undefined && args.colors.length >= 2 || args.gradientType == GradientType.LINEAR  ) ? GradientType.LINEAR : GradientType.RADIAL;
_gradientAngle = ( args.gradientAngle != undefined ) ? args.gradientAngle * Math.PI/180 : 0;
_pixelHinting = ( args.pixelHinting != undefined ) ? args.pixelHinting : true;
_scaleMode = ( args.scaleMode != undefined) ? args.scaleMode : LineScaleMode.NORMAL;
 
// set alphas defaults
if (args.alphas == undefined &#038;&#038; args.colors.length >= 2 || args.colors.length >= 2 &#038;&#038; args.alphas.length < args.colors.length) {
try {
throw new Error("alphas array is either undefined, or does not have equal length to the colors array.");
}
catch ( errObject:Error ) {
trace("Error in Circle Class: " + errObject.message);
}
} else {
_alphas = args.alphas;
}
 
// set ratios defaults
if (args.ratios == undefined &#038;&#038; args.colors.length >= 2 || args.colors.length >= 2 &#038;&#038; args.ratios.length < args.colors.length) {
try {
throw new Error("ratios array is either undefined, or does not have equal length to the colors array.");
}
catch ( errObject:Error ) {
trace("Error in Circle Class: " + errObject.message);
}
} else {
_ratios = args.ratios;
}
 
// Set line Style
graphics.lineStyle( _stroke[0], _stroke[1], _stroke[2], _pixelHinting, _scaleMode );
 
// set up gradient matrix if applicable
if (args.colors.length >= 2) {
_colors = args.colors;
var matrix:Matrix = new Matrix();
matrix.createGradientBox( (_radius*2), (_radius*2), _gradientAngle, -_radius, -_radius );
graphics.beginGradientFill(_gradientType, _colors, _alphas, _ratios, matrix);
}
 
// set up solid fill applicable
if (args.colors.length < = 1) {
_colors = ( args.colors != undefined ) ? args.colors : [0x000000]
graphics.beginFill( _colors[0] );
}
 
graphics.drawCircle( 0, 0, _radius );
graphics.endFill();
}
 
}
 
}
1 Posted under: Drawing API

One Response

Leave a Reply