For dynamically drawing content PixiJS has a Graphics display object with a drawing API. This allows us to draw 2D graphics with commands similar to the 2D canvas API. The graphics object needs to be added to the stage like any display object.
let graphic = new PIXI.Graphics();
stage.addChild(graphic);You can set the line style of the shapes you draw by calling lineStyle(), passing in the line width and the color. You can also pass in a fill color by calling beginFill().
We can now draw on our graphics object using drawing commands, like drawCircle(), which takes the x, y, and radius of the circle to be drawn. We then need to call endFill() to apply our fill to the shape.
graphic.lineStyle(5, 0x00ff00);
graphic.beginFill(0xff0000);
graphic.drawCircle(0, 0, 100);
graphic.endFill();PixiJS has many methods for simple shapes just like drawCircle(). drawEllipse() takes the x and y position of the ellipse as well as the radial width and radial height. drawRect() takes the x and y positions as well as the width and height of the rectangle to be drawn. drawRoundedRect() takes the x and y position, as well as the width and height of the rectangle, along with the radius of the corners. drawStar() takes the number of points, the radius, the size of the inner radius and finally the rotation of the star in radians.
graphic.drawCircle(0, 0, 100);
graphic.drawEllipse(200, 200, 50, 100);
graphic.drawRect(100, 100, 200, 50);
graphic.drawRoundedRect(100, 100, 200, 50, 10);
grpahic.drawStar(5, 200, 50, 0.5);PixiJS also has some useful methods for drawing arbitrary shapes. drawShape() allows you to pass in a PixiJS shape object to be drawn, which can be defined like new PIXI.Circle(100, 100, 200). drawPolygon() takes an array of PIXI.Point() objects. These take an x and y value. The array of points then define the points of the polygon.
graphic.drawShape(new PIXI.Circle(100, 100, 200));
graphic.drawPolygon([
new PIXI.Point(100, 100),
new PIXI.Point(100, 200),
new PIXI.Point(200, 200)
]);You can also draw lines and polygons with classic drawing commands like moveTo(), which moves the current drawing position to the x and y position. Similarly, lineTo() draws a line from the current drawing position to the defined x and y. closePath() can be used to close the shape from the current drawing position to the initial position.
graphic.moveTo(100, 100);
graphic.lineTo(200, 300);
graphic.closePath();There are also a number of ways to draw curves. quadraticCurveTo() draws a curve by taking four parameters the first two are the x and y positions of the control point and the x and y position of the destination point. bezierCurveTo() takes six parameters, three sets of x and y coordinates. Two control points of the curve and finally the destination point.
graphic.quadraticCurveTo(200, 200, 100, 100);
graphic.bezierCurveTo(-200, 200, -200, 100, -100, 0);PixiJS also has some special methods for drawing arcs. arcTo() takes five parameters. The first four are two sets of x and y coordinates. The position of the start of the arc and the position of the end of the arc. The last parameter is the radius of the arc between the two points. The arc() method works a little different, it takes up to 6 parameters. The first two are the center x and y position of the arc. Then the radius of the arc. Next the start and end angle in radians. Finally, a boolean of whether you want the arc to go clockwise or counterclockwise.
graphic.arcTo(100, 200, 700, 200, 100);
graphic.arc(100, 100, 50, 0, Math.PI);