diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index 1c92b2a..b9dcf3e 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -1,7 +1,7 @@ import { Container, Bounds } from '@pixi/display'; import { BLEND_MODES } from '@pixi/constants'; import { Texture } from '@pixi/core'; -import { Point, Rectangle, RoundedRectangle, Ellipse, Polygon, Circle, SHAPES } from '@pixi/math'; +import { Point, Rectangle, RoundedRectangle, Ellipse, Polygon, Circle, SHAPES, PI_2 } from '@pixi/math'; import { hex2rgb, rgb2hex } from '@pixi/utils'; import bezierCurveTo from './utils/bezierCurveTo'; import { Sprite } from '@pixi/sprite'; @@ -476,15 +476,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) { @@ -685,6 +685,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