diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 5b56f09..8083d2a 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,7 @@ import Sprite from '../sprites/Sprite'; import { Matrix, Point, Rectangle, RoundedRectangle, Ellipse, Polygon, Circle } from '../math'; import { hex2rgb, rgb2hex } from '../utils'; -import { SHAPES, BLEND_MODES } from '../const'; +import { SHAPES, BLEND_MODES, PI_2 } from '../const'; import Bounds from '../display/Bounds'; import bezierCurveTo from './utils/bezierCurveTo'; import CanvasRenderer from '../renderers/canvas/CanvasRenderer'; @@ -481,15 +481,15 @@ if (!anticlockwise && endAngle <= startAngle) { - endAngle += Math.PI * 2; + endAngle += PI_2; } else if (anticlockwise && startAngle <= endAngle) { - startAngle += Math.PI * 2; + startAngle += PI_2; } const sweep = endAngle - startAngle; - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / PI_2) * 40; if (sweep === 0) { @@ -690,6 +690,40 @@ } /** + * Draw a star shape with an abitrary number of points. + * + * @param {number} x - Center X position of the star + * @param {number} y - Center Y position of the star + * @param {number} points - The number of points of the star, must be > 1 + * @param {number} radius - The outer radius of the star + * @param {number} [innerRadius] - The inner radius between points, default half `radius` + * @param {number} [rotation=0] - The rotation of the star in radians, where 0 is vertical + * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls + */ + drawStar(x, y, points, radius, innerRadius, rotation = 0) + { + innerRadius = innerRadius || radius / 2; + + const startAngle = (-1 * Math.PI / 2) + rotation; + const len = points * 2; + const delta = PI_2 / len; + const polygon = []; + + for (let i = 0; i < len; i++) + { + const r = i % 2 ? innerRadius : radius; + const angle = (i * delta) + startAngle; + + polygon.push( + x + (r * Math.cos(angle)), + y + (r * Math.sin(angle)) + ); + } + + return this.drawPolygon(polygon); + } + + /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls