Posted By

adrianparr on 07/06/11


Tagged

class circle triangle rectangle Drawing Fill gradient as3 util rect stroke


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Shoobis


AS3 DrawingUtil Class


 / Published in: ActionScript 3
 

URL: http://bk4d.com/articles/as3-drawing-utility-class/

All credit for this class goes to Ben Kanizay (http://bk4d.com)

  1. /**
  2.  *
  3.  * DrawingUtil class
  4.  *
  5.  * Copyright (c) 2009 Ben Kanizay
  6.  * This software is released under the MIT License
  7.  *
  8.  */
  9.  
  10. package beekay.core.utils {
  11. import flash.display.LineScaleMode;
  12. import flash.display.GradientType;
  13. import flash.display.Graphics;
  14. import flash.display.SpreadMethod;
  15. import flash.display.Sprite;
  16. import flash.geom.Matrix;
  17.  
  18. /**
  19. * @author ben.kanizay
  20. */
  21. public class DrawingUtil {
  22.  
  23.  
  24. /*
  25. * Returns a rectangular sprite.
  26. *
  27. * @param width:Number the width of the rectangle
  28. * @param height:Number the height of the rectangle
  29. * @param fill:Object (optional) - An object containing fill properties - default is a solid 0x00FFFF fill and alpha of 1
  30. * @param stroke:Object (optional) - An object containing stroke properties - default is no stroke
  31. * @param ellipse:int (optional) the size of the rounded corners - default is 0
  32. *
  33. * @return Sprite
  34. *
  35. */
  36.  
  37. public static function drawRectSprite(width:Number, height:Number, fill:Object=null, stroke:Object=null, ellipse:int=0):Sprite {
  38.  
  39. var sprite:Sprite = new Sprite();
  40. var graphics:Graphics = sprite.graphics;
  41.  
  42. // check if we're drawing a stroke
  43. if (stroke != null) {
  44. var strokeObj:Object = getStroke(stroke);
  45. graphics.lineStyle(strokeObj.weight, strokeObj.colour, strokeObj.alpha, strokeObj.pixelHinting, strokeObj.scaleMode);
  46. }
  47.  
  48. // determine the fill type and properties
  49. if (fill != null && fill.colour != null && fill.colour is Array && fill.colour.length > 1) {
  50. // gradient
  51. var gradProps:Object = getGradient(fill);
  52. var gradMatrix:Matrix = new Matrix();
  53. gradMatrix.createGradientBox(width, height, gradProps.rotation, 0, 0);
  54. graphics.beginGradientFill(gradProps.type, gradProps.colours, gradProps.alphas, gradProps.ratios, gradMatrix, gradProps.Spread);
  55. }
  56. else {
  57. // solid
  58. var fillProps:Object = getSolid(fill);
  59. graphics.beginFill(fillProps.colour, fillProps.alpha);
  60. }
  61.  
  62. // rounded corners or not?
  63. if (ellipse > 0) {
  64. graphics.drawRoundRect(0, 0, width, height, ellipse);
  65. }
  66. else {
  67. graphics.drawRect(0, 0, width, height);
  68. }
  69.  
  70. graphics.endFill();
  71. return sprite;
  72. }
  73.  
  74.  
  75.  
  76.  
  77. /*
  78. * Returns a circular sprite.
  79. *
  80. * @param radius:int the radius of the circle
  81. * @param fill:Object (optional) - An object containing fill properties
  82. * @param stroke:Object (optional) - An object containing stroke properties
  83. *
  84. * @return Sprite
  85. *
  86. */
  87.  
  88. public static function drawCircSprite(radius:int, fill:Object=null, stroke:Object=null):Sprite {
  89. var sprite:Sprite = new Sprite();
  90. var graphics:Graphics = sprite.graphics;
  91.  
  92. // check if we're drawing a stroke
  93. if (stroke != null) {
  94. var strokeObj:Object = getStroke(stroke);
  95. graphics.lineStyle(strokeObj.weight, strokeObj.colour, strokeObj.alpha, strokeObj.pixelHinting, strokeObj.scaleMode);
  96. }
  97.  
  98. // determine the fill type and properties
  99. if (fill != null && fill.colour != null && fill.colour is Array && fill.colour.length > 1) {
  100. // gradient
  101. var gradProps:Object = getGradient(fill);
  102. var gradMatrix:Matrix = new Matrix();
  103. gradMatrix.createGradientBox(radius, radius, gradProps.rotation, 0, 0);
  104. graphics.beginGradientFill(gradProps.type, gradProps.colours, gradProps.alphas, gradProps.ratios, gradMatrix, gradProps.Spread);
  105. }
  106. else {
  107. // solid
  108. var fillProps:Object = getSolid(fill);
  109. graphics.beginFill(fillProps.colour, fillProps.alpha);
  110. }
  111.  
  112. graphics.drawCircle(0, 0, radius);
  113. graphics.endFill();
  114. return sprite;
  115. }
  116.  
  117.  
  118. /*
  119. * Returns a simple triangle shaped Sprite with equal sides.
  120. *
  121. * @param base:int the length of the triangle base (the other sides will be the same)
  122. * @param fill:Object (optional) - An object containing fill properties
  123. * @param stroke:Object (optional) - An object containing stroke properties
  124. *
  125. * @return Sprite
  126. *
  127. */
  128.  
  129. public static function drawTriSprite(base:int, fill:Object=null, stroke:Object=null) : Sprite {
  130. var height:Number = Math.sqrt((base*base)-((base/2)*(base/2)));
  131. var sprite:Sprite = new Sprite();
  132. var graphics:Graphics = sprite.graphics;
  133.  
  134. // check if we're drawing a stroke
  135. if (stroke != null) {
  136. var strokeObj:Object = getStroke(stroke);
  137. graphics.lineStyle(strokeObj.weight, strokeObj.colour, strokeObj.alpha, strokeObj.pixelHinting, strokeObj.scaleMode);
  138. }
  139.  
  140. // determine the fill type and properties
  141. if (fill != null && fill.colour != null && fill.colour is Array && fill.colour.length > 1) {
  142. // gradient
  143. var gradProps:Object = getGradient(fill);
  144. var gradMatrix:Matrix = new Matrix();
  145. gradMatrix.createGradientBox(base, height, gradProps.rotation, 0, 0);
  146. graphics.beginGradientFill(gradProps.type, gradProps.colours, gradProps.alphas, gradProps.ratios, gradMatrix, gradProps.Spread);
  147. }
  148. else {
  149. // solid
  150. var fillProps:Object = getSolid(fill);
  151. graphics.beginFill(fillProps.colour, fillProps.alpha);
  152. }
  153.  
  154. graphics.moveTo(0, height);
  155. graphics.lineTo(base/2, 0);
  156. graphics.lineTo(base, height);
  157. graphics.lineTo(0, height);
  158. graphics.endFill();
  159.  
  160. return sprite;
  161. }
  162.  
  163.  
  164.  
  165. ////////////////////////////////////////////////////////////////
  166. // HELPER METHODS
  167. ////////////////////////////////////////////////////////////////
  168.  
  169.  
  170. /*
  171. * Creates the stroke properties, using defaults for any null values
  172. */
  173. private static function getStroke(props:Object) : Object {
  174. var stroke:Object = {};
  175.  
  176. var strokeWeight:Number = (props.weight != null) ? props.weight : 1;
  177. var strokeColour:uint = (props.colour != null) ? props.colour : 0x000000;
  178. var pixelHinting:Boolean = (props.pixelHinting != null) ? props.pixelHinting : true;
  179. var scaleMode:String = (props.scaleMode != null) ? props.scaleMode : LineScaleMode.NONE;
  180. var strokeAlpha:Number = (props.alpha != null) ? props.alpha : 1;
  181.  
  182. stroke.weight = strokeWeight;
  183. stroke.colour = strokeColour;
  184. stroke.pixelHinting = pixelHinting;
  185. stroke.scaleMode = scaleMode;
  186. stroke.alpha = strokeAlpha;
  187.  
  188. return stroke;
  189. }
  190.  
  191.  
  192. /*
  193. * Creates the gradient fill properties, using defaults for any null values
  194. */
  195. private static function getGradient(fill:Object) : Object {
  196. var gradient:Object = {};
  197.  
  198. var gradColours:Array = [parseInt(fill.colour[0]), parseInt(fill.colour[1])];
  199. var gradAlphas:Array = (fill.alpha is Array) ? (fill.alpha.length > 1) ? [fill.alpha[0], fill.alpha[1]] : [fill.alpha[0], fill.alpha[0]] : (fill.alpha != null) ? [fill.alpha, fill.alpha] : [1, 1];
  200. var gradType:String = (fill.gradientType != null) ? fill.gradientType : GradientType.LINEAR;
  201. var gradSpread:String = (fill.spreadMethod != null) ? fill.spreadMethod : SpreadMethod.PAD;
  202. var gradRatios:Array = (fill.ratios is Array && fill.ratios.length > 1) ? [fill.ratios[0], fill.ratios[1]] : [0, 255];
  203. var gradRotation:Number = (fill.rotation != null) ? fill.rotation : 0;
  204.  
  205. gradient.colours = gradColours;
  206. gradient.alphas = gradAlphas;
  207. gradient.type = gradType;
  208. gradient.spread = gradSpread;
  209. gradient.ratios = gradRatios;
  210. gradient.rotation = gradRotation;
  211.  
  212. return gradient;
  213. }
  214.  
  215.  
  216. /*
  217. * Creates the solid fill properties, using defaults for any null values
  218. */
  219. private static function getSolid(fill:Object) : Object {
  220. var solid:Object = {};
  221.  
  222. var fillAlpha:Number = (fill.alpha == null) ? 1 : (fill.alpha is Array) ? fill.alpha[0] : fill.alpha;
  223. var fillColour:uint = (fill.colour != null) ? (fill.colour is Array) ? parseInt(fill.colour[0]) : parseInt(fill.colour) : 0x00FFFF;
  224.  
  225. solid.alpha = fillAlpha;
  226. solid.colour = fillColour;
  227.  
  228. return solid;
  229. }
  230.  
  231. }
  232. }
  233.  
  234.  
  235. // USAGE EXAMPLES
  236.  
  237. // a 200x200 black square:
  238. // var box1:Sprite = DrawingUtil.drawRectSprite(200, 200, {colour:0x000000});
  239.  
  240. // a 200x200 square with a linear gradient from grey to black:
  241. // var box2:Sprite = DrawingUtil.drawRectSprite(200, 200, {colour:[0xCCCCCC, 0x000000]});
  242.  
  243. // and 200x200 black square with a grey 2px grey stroke
  244. // var box3:Sprite = DrawingUtil.drawRectSprite(200, 200, {colour:0x000000}, {weight:2, colour:0xCCCCCC});
  245.  
  246. // the same as above but with rounded corners set to 20
  247. // var box4:Sprite = DrawingUtil.drawRectSprite(200, 200, {colour:0x000000}, {weight:2, colour:0xCCCCCC}, 20);
  248.  
  249. // and the black square with rounded corners but no stroke
  250. // var box5:Sprite = DrawingUtil.drawRectSprite(200, 200, {colour:0x000000}, null, 20);

Report this snippet  

You need to login to post a comment.