Source: animate/mixins/Graphics.js

animate/mixins/Graphics.js

  1. import * as core from '../../core';
  2. const Graphics = core.Graphics;
  3. /**
  4. * Mixins for the PIXI.Graphics class.
  5. * @memberof PIXI
  6. * @class Graphics
  7. */
  8. const p = Graphics.prototype;
  9. /**
  10. * Shortcut for `drawCommands`.
  11. * @method PIXI.Graphics#d
  12. * @param {Array} commands The commands and parameters to draw
  13. * @return {PIXI.Graphics}
  14. */
  15. /**
  16. * Execute a series of commands, this is the name of the short function
  17. * followed by the parameters, e.g., `["f", "#ff0000", "r", 0, 0, 100, 200]`
  18. * @method PIXI.Graphics#drawCommands
  19. * @param {Array} commands The commands and parameters to draw
  20. * @return {PIXI.Graphics}
  21. */
  22. p.drawCommands = p.d = function(commands) {
  23. var currentCommand, params = [],
  24. i = 0;
  25. while (i <= commands.length) {
  26. var item = commands[i++];
  27. if (item === undefined || this[item]) {
  28. if (currentCommand) {
  29. this[currentCommand].apply(this, params);
  30. params.length = 0;
  31. }
  32. currentCommand = item;
  33. } else {
  34. params.push(item);
  35. }
  36. }
  37. return this;
  38. };
  39. /**
  40. * Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified
  41. * since the fill or stroke was last set.
  42. * @method PIXI.Graphics#c
  43. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  44. **/
  45. p.c = p.closePath;
  46. /**
  47. * Alias for `addHole`
  48. * @method PIXI.Graphics#h
  49. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  50. **/
  51. p.h = p.addHole;
  52. /**
  53. * Shortcut to `moveTo`.
  54. * @method PIXI.Graphics#m
  55. * @param {Number} x The x coordinate the drawing point should move to.
  56. * @param {Number} y The y coordinate the drawing point should move to.
  57. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls).
  58. **/
  59. p.m = p.moveTo;
  60. /**
  61. * Shortcut to `lineTo`.
  62. * @method PIXI.Graphics#l
  63. * @param {Number} x The x coordinate the drawing point should draw to.
  64. * @param {Number} y The y coordinate the drawing point should draw to.
  65. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  66. **/
  67. p.l = p.lineTo;
  68. /**
  69. * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). For detailed
  70. * information, read the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-quadraticcurveto">
  71. * whatwg spec</a>. A tiny API method "qt" also exists.
  72. * @method PIXI.Graphics#q
  73. * @param {Number} cpx
  74. * @param {Number} cpy
  75. * @param {Number} x
  76. * @param {Number} y
  77. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  78. **/
  79. p.q = p.quadraticCurveTo;
  80. /**
  81. * Shortcut to `bezierCurveTo`.
  82. * @method PIXI.Graphics#b
  83. * @param {Number} cp1x
  84. * @param {Number} cp1y
  85. * @param {Number} cp2x
  86. * @param {Number} cp2y
  87. * @param {Number} x
  88. * @param {Number} y
  89. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  90. **/
  91. p.b = p.bezierCurveTo;
  92. /**
  93. * Shortcut to `beginFill`.
  94. * @method PIXI.Graphics#f
  95. * @param {Uint} color The hex color value (e.g. 0xFFFFFF)
  96. * null will result in no fill.
  97. * @param {Number} [alpha=1] The alpha value of fill
  98. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  99. **/
  100. p.f = p.beginFill;
  101. /**
  102. * Shortcut to `lineStyle`.
  103. * @method PIXI.Graphics#s
  104. * @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to
  105. * null will result in no stroke.
  106. * @param {Number} [thickness=1] The thickness of the stroke
  107. * @param {Number} [alpha=1] The alpha value from 0 (invisibile) to 1 (visible)
  108. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  109. **/
  110. p.s = p.lineStyle;
  111. /**
  112. * Shortcut to `drawRect`.
  113. * @method PIXI.Graphics#dr
  114. * @param {Number} x
  115. * @param {Number} y
  116. * @param {Number} w Width of the rectangle
  117. * @param {Number} h Height of the rectangle
  118. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  119. **/
  120. /**
  121. * Shortcut to `drawRect`.
  122. * @method PIXI.Graphics#r
  123. * @param {Number} x
  124. * @param {Number} y
  125. * @param {Number} w Width of the rectangle
  126. * @param {Number} h Height of the rectangle
  127. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  128. **/
  129. p.dr = p.drawRect;
  130. /**
  131. * Shortcut to `drawRoundedRect`.
  132. * @method PIXI.Graphics#rr
  133. * @param {Number} x
  134. * @param {Number} y
  135. * @param {Number} w Width of the rectangle
  136. * @param {Number} h Height of the rectangle
  137. * @param {Number} radius The corner radius
  138. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  139. **/
  140. p.rr = p.drawRoundedRect;
  141. /**
  142. * Shortcut to `drawRoundedRect`.
  143. * @method PIXI.Graphics#rc
  144. * @param {Number} x
  145. * @param {Number} y
  146. * @param {Number} w Width of the rectangle
  147. * @param {Number} h Height of the rectangle
  148. * @param {Number} radiusTL The top left corner radius
  149. * @param {Number} radiusTR The top right corner radius
  150. * @param {Number} radiusBR The bottom right corner radius
  151. * @param {Number} radiusBL The bottom left corner radius
  152. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  153. **/
  154. p.rc = p.drawRoundedRect;
  155. /**
  156. * Shortcut to `drawCircle`.
  157. * @method PIXI.Graphics#dc
  158. * @param {Number} x x coordinate center point of circle.
  159. * @param {Number} y y coordinate center point of circle.
  160. * @param {Number} radius Radius of circle.
  161. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  162. **/
  163. p.dc = p.drawCircle;
  164. /**
  165. * Shortcut to `arc`.
  166. * @method PIXI.Graphics#ac
  167. * @param {Number} x
  168. * @param {Number} y
  169. * @param {Number} radius
  170. * @param {Number} startAngle Measured in radians.
  171. * @param {Number} endAngle Measured in radians.
  172. * @param {Boolean} anticlockwise
  173. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  174. **/
  175. p.ar = p.arc;
  176. /**
  177. * Shortcut to `arcTo`.
  178. * @method PIXI.Graphics#at
  179. * @param {Number} x1
  180. * @param {Number} y1
  181. * @param {Number} x2
  182. * @param {Number} y2
  183. * @param {Number} radius
  184. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  185. **/
  186. p.at = p.arcTo;
  187. /**
  188. * Shortcut to `drawEllipse`.
  189. * @method PIXI.Graphics#de
  190. * @param {Number} x [description]
  191. * @param {Number} y [description]
  192. * @param {Number} width [description]
  193. * @param {Number} height [description]
  194. */
  195. p.de = p.drawEllipse;
  196. /**
  197. * Placeholder method for a linear fill. Pixi does not support linear fills,
  198. * so we just pick the first color in colorArray
  199. * @method PIXI.Graphics#lf
  200. * @param {Array} colorArray An array of CSS compatible color values @see `f`
  201. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  202. **/
  203. p.lf = function(colorArray) {
  204. // @if DEBUG
  205. console.warn("Linear gradient fills are not supported");
  206. // @endif
  207. return this.f(colorArray[0]);
  208. };
  209. /**
  210. * Placeholder method for a radial fill. Pixi does not support radial fills,
  211. * so we just pick the first color in colorArray
  212. * @method PIXI.Graphics#rf
  213. * @param {Array} colorArray An array of CSS compatible color values @see `f`
  214. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  215. **/
  216. p.rf = function(colorArray) {
  217. // @if DEBUG
  218. console.warn("Radial gradient fills are not supported");
  219. // @endif
  220. return this.f(colorArray[0]);
  221. };
  222. /**
  223. * Placeholder method for a `beginBitmapFill`. Pixi does not support bitmap fills.
  224. * @method PIXI.Graphics#bf
  225. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  226. **/
  227. p.bf = function() {
  228. // @if DEBUG
  229. console.warn("Bitmap fills are not supported");
  230. // @endif
  231. return this.f(0x0);
  232. };
  233. /**
  234. * Placeholder method for a `setStrokeDash`. Pixi does not support dashed strokes.
  235. * @method PIXI.Graphics#sd
  236. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  237. **/
  238. p.sd = function() {
  239. // @if DEBUG
  240. console.warn("Dashed strokes are not supported");
  241. // @endif
  242. return this;
  243. };
  244. /**
  245. * Placeholder method for a `beginBitmapStroke`. Pixi does not support bitmap strokes.
  246. * @method PIXI.Graphics#bs
  247. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  248. **/
  249. p.bs = function() {
  250. // @if DEBUG
  251. console.warn("Bitmap strokes are not supported");
  252. // @endif
  253. return this;
  254. };
  255. /**
  256. * Placeholder method for a `beginLinearGradientStroke`. Pixi does not support gradient strokes.
  257. * @method PIXI.Graphics#ls
  258. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  259. **/
  260. p.ls = function() {
  261. // @if DEBUG
  262. console.warn("Linear gradient strokes are not supported");
  263. // @endif
  264. return this;
  265. };
  266. /**
  267. * Placeholder method for a `beginRadialGradientStroke`. Pixi does not support gradient strokes.
  268. * @method PIXI.Graphics#rs
  269. * @return {PIXI.Graphics} The Graphics instance the method is called on (useful for chaining calls.)
  270. **/
  271. p.rs = function() {
  272. // @if DEBUG
  273. console.warn("Radial gradient strokes are not supported");
  274. // @endif
  275. return this;
  276. };