Graphics Graphics

The Graphics component provides GameObject with the ability to draw graphics.

Demo

Install

With NPM

npm i @eva/plugin-renderer @eva/plugin-renderer-graphics

In Browser

<script src="https://unpkg.com/@eva/plugin-renderer-graphics@1.2.x/dist/EVA.plugin.renderer.graphics.min.js"></script>

Usage

No parameters are needed, a graphics mounted component instance will be returned, and the graphics can be drawn by calling the method on the graphics property

import {Game, GameObject} from '@eva/eva.js'
import {RendererSystem} from '@eva/plugin-renderer'
import {Graphics, GraphicsSystem} from '@eva/plugin-renderer-graphics'
const game = new Game({
  systems: [
    new RendererSystem({
      canvas: document.querySelector('#canvas'),
      width: 750,
      height: 1000
    }),
    new GraphicsSystem()
  ]
})
const outter = new GameObject('container', {
  position: {
    x: 200,
    y: 500
  },
  size: {
    width: 300,
    height: 24
  }
})
const progress = new GameObject('container', {
  position: {
    x: 3,
    y: 3
  }
})
const outterGraphics = outter.addComponent(new Graphics())
outterGraphics.graphics.beginFill(0xde3249, 1)
outterGraphics.graphics.drawRoundedRect(0, 0, 300, 24, 12)
outterGraphics.graphics.endFill()
const progressGraphics = progress.addComponent(new Graphics())
let i = 0
setInterval(() => {
  setProgress(i++)
}, 100)
outter.addChild(progress)
game.scene.addChild(outter)
function setProgress(progress) {
  if (progress> 100) return
  const width = Math.max(12, (296 * progress) / 100)
  progressGraphics.graphics.clear()
  progressGraphics.graphics.beginFill(0x000000, 1)
  progressGraphics.graphics.drawRoundedRect(0, 0, width, 18, 9)
  progressGraphics.graphics.endFill()
}

Drawing method

beginFill (color, alpha)

Specify a simple single-color fill, and then call other Graphics methods (for example: lineTo() or drawCircle()) to use when drawing.

endFill()

Filling is applied to the lines and shapes added since the last call to the beginFill() method.

lineStyle ({ width, color, alpha, alignment, native })

Specify the line style used for subsequent calls to the Graphics method, for example: lineTo() method or drawCircle() method

lineStyle (width, color, alpha, alignment, native)

Specify the line style used for subsequent calls to the Graphics method, for example: lineTo() method or drawCircle() method

lineTo (x, y)

Use the current line style to draw a line from the current drawing position to (x, y); then set the current drawing position to (x, y).

moveTo (x, y)

Move the current graphic position to x,y.

quadraticCurveTo (cpX, cpY, toX, toY)

Calculate the points of the quadratic Bezier curve, and then draw it. Based on: [https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c\]([https://stackoverflow.com/questions/785097/how-do-](https://stackoverflow.com/questions/785097/how-do-) i-implement-a-bezier-curve-in-c)

clear()

Clear the graphics drawn to this Graphics object, and reset the fill and line style settings.

closePath()

Close the current path.

Preset graphics

arc (cx, cy, radius, startAngle, endAngle, anticlockwise)

The arc method creates an arc/curve (used to create a circle or part of a circle).

arcTo (x1, y1, x2, y2, radius)

The arcTo() method creates an arc/curve between two tangents on the canvas.

bezierCurveTo (cpX, cpY, cpX2, cpY2, toX, toY)

Calculate the points of the Bezier curve, and then draw it.

drawCircle (x, y, radius)

Draw a circle.

drawEllipse (x, y, width, height)

Draw an ellipse.

drawPolygon (path)

Use the specified path to draw the polygon.

drawRect(x, y, width, height)

Draw a rectangle.

drawRoundedRect(x, y, width, height, radius)

Draw a rectangle with rounded/beveled corners.

drawStar (x, y, points, radius, innerRadius, rotation)

Draw a star with any number of points.