Skip to main content

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.

NameTypeDefaultDescription
colornumber0optional Fill color
alphanumber1optional Filled Alpha

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

NameTypeDefaultDescription |
widthnumber0optional The width of the line, the style of the object storage will be updated
colornumber0x0optional The color of the drawn line, the style of the object storage will be updated
alphanumber1optional Alpha of the drawn line, the style of the object storage will be updated
alignmentnumber0.5optional Alignment of the drawn line (0 = internal, 0.5 = center, 1 = external)
nativebooleanfalseoptional If true, LINES will be used instead of TRIANGLE_STRIP to draw lines

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

NameTypeDefaultDescription
widthnumber0optional The width of the line, the style of the object storage will be updated
colornumber0x0optional The color of the drawn line, the style of the object storage will be updated
alphanumber1optional Alpha of the drawn line, the style of the object storage will be updated
alignmentnumber0.5optional Alignment of the drawn line (0 = internal, 0.5 = center, 1 = external)
nativebooleanfalseoptional If true, LINES will be used instead of TRIANGLE_STRIP to draw lines

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).

NameTypeDescription
xnumberX coordinate to be drawn
ynumberY coordinate to be drawn

moveTo (x, y)

Move the current graphic position to x,y.

NameTypeDescription
xnumberX coordinate to move to
ynumberY coordinate to move to

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- i-implement-a-bezier-curve-in-c)

NameTypeDescription
cpXnumberControl point x
cpYnumberControl point y
toXnumberDestination point x
toYnumberDestination point y

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).

NameTypeDefaultDescription
cxnumberx coordinate of the center of the circle
cynumbery coordinate of the center of the circle
radiusnumberradius of the circle
startAnglenumberStarting angle, in radians (0 is the 3 point position of the arc)
endAnglenumberEnd angle, in radians
anticlockwisebooleanfalseoptional Specifies whether the graph is counterclockwise or clockwise. false is the default value, which means clockwise, and true means counterclockwise.

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

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

NameTypeDescription
x1numberThe x coordinate of the first tangent point of the arc
y1numberThe y coordinate of the first tangent point of the arc
x2numberx coordinate of the end of the arc
y2numbery coordinate of the end of the arc
radiusnumberArc radius

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

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

NameTypeDescription
cpXnumberControl point x
cpYnumberControl point y
cpX2numberSecond control point x
cpY2numberSecond control point y
toXnumberDestination point x
toYnumberDestination point y

drawCircle (x, y, radius)

Draw a circle.

NameTypeDescription
xnumberX coordinate of the center of the circle
ynumberY coordinate of the center of the circle
radiusnumberradius of the circle

drawEllipse (x, y, width, height)

Draw an ellipse.

NameTypeDescription
xnumberX coordinate of the center of the ellipse
ynumberY coordinate of the center of the ellipse
widthnumberHalf width of ellipse
heightnumberHalf height of ellipse

drawPolygon (path)

Use the specified path to draw the polygon.

NameTypeDescription
pathnumber[] | Array.<{x,y}>Path data used to construct polygons.

drawRect(x, y, width, height)

Draw a rectangle.

NameTypeDescription
xnumberX coordinate of the upper left corner of the rectangle
ynumberY coordinate of the upper left corner of the rectangle
widthnumberThe width of the rectangle
heightnumberThe height of the rectangle

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

Draw a rectangle with rounded/beveled corners.

NameTypeDescription
xnumberX coordinate of the upper left corner of the rectangle
ynumberY coordinate of the upper left corner of the rectangle
widthnumberThe width of the rectangle
heightnumberThe height of the rectangle
radiusnumberThe radius of the rectangle angle

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

Draw a star with any number of points.

NameTypeDefaultDescription
xnumberThe center of the star X position
ynumberCenter of the star Y position
pointsnumberThe number of stars must be> 1
radiusnumberThe outer radius of the star
innerRadiusnumberoptional The inner radius between points, the default is half of radius
rotationnumber0optional The radian of the star's rotation, where 0 is vertical