Skip to main content

图形 Graphics

Graphics 组件为 GameObject 提供了绘制图形的能力。

Demo

安装

使用 NPM

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

在浏览器中

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

使用

无需参数,将会返回一个 graphics 挂载 component 实例上,调用 graphics 属性上的方法即可绘制图形

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()
}

绘制方法

beginFill (color, alpha)

指定一个简单的单色填充,随后调用其他 Graphics 方法 (例如:lineTo()drawCircle())在绘制时使用。

NameTypeDefaultDescription
colornumber0optional 填充的颜色
alphanumber1optional 填充的 Alpha

endFill ()

对自上一次调用 beginFill() 方法以来添加的线条和形状应用填充。

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

指定用于随后调用 Graphics 方法的线样式,例如:lineTo()方法 或 drawCircle()方法

NameTypeDefaultDescription
widthnumber0optional 画线的宽度,将更新对象存储的样式
colornumber0x0optional 绘制线条的颜色,将更新对象存储的样式
alphanumber1optional 绘制线条的 Alpha,将更新对象存储的样式
alignmentnumber0.5optional 绘制线的对齐方式(0 = 内部,0.5 = 居中,1 = 外部)
nativebooleanfalseoptional 如果为 true,则将使用 LINES 来代替 TRIANGLE_STRIP 绘制线条

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

指定用于随后调用 Graphics 方法的线样式,例如:lineTo()方法或 drawCircle()方法

NameTypeDefaultDescription
widthnumber0optional 画线的宽度,将更新对象存储的样式
colornumber0x0optional 绘制线条的颜色,将更新对象存储的样式
alphanumber1optional 绘制线条的 Alpha,将更新对象存储的样式
alignmentnumber0.5optional 绘制线的对齐方式(0 = 内部,0.5 = 居中,1 = 外部)
nativebooleanfalseoptional 如果为 true,则将使用 LINES 来代替 TRIANGLE_STRIP 绘制线条

lineTo (x, y)

使用当前线样式从当前绘图位置到 (x, y )绘制一条线; 然后将当前图形位置设置为 (x, y)。

NameTypeDescription
xnumber要绘制到的 X 坐标
ynumber要绘制到的 Y 坐标

moveTo (x, y)

将当前图形位置移动到 x,y。

NameTypeDescription
xnumber要移动到的 X 坐标
ynumber要移动到的 Y 坐标

quadraticCurveTo (cpX, cpY, toX, toY)

计算二次贝塞尔曲线的点,然后绘制它。 基于: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c

NameTypeDescription
cpXnumber控制点 x
cpYnumber控制点 y
toXnumber目的点 x
toYnumber目的点 y

clear ()

清除绘制到此 Graphics 对象的图形,并重置填充和线条样式设置。

closePath ()

关闭当前路径。

预设图形

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

圆弧方法创建圆弧/曲线(用于创建圆或圆的一部分)。

NameTypeDefaultDescription
cxnumber圆心的 x 坐标
cynumber圆心的 y 坐标
radiusnumber圆的半径
startAnglenumber起始角度,以弧度为单位(0 是圆弧的 3 点位置)
endAnglenumber终止角度,以弧度为单位
anticlockwisebooleanfalseoptional 指定图形是逆时针还是顺时针。 false 是默认值,表示顺时针,而true表示逆时针。

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

arcTo()方法在画布上的两个切线之间创建弧/曲线。

NameTypeDescription
x1number圆弧的第一个切点的 x 坐标
y1number圆弧的第一个切点的 y 坐标
x2number圆弧末端的 x 坐标
y2number圆弧末端的 y 坐标
radiusnumber圆弧半径

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

计算贝塞尔曲线的点,然后绘制它。

NameTypeDescription
cpXnumber控制点 x
cpYnumber控制点 y
cpX2number第二控制点 x
cpY2number第二控制点 y
toXnumber目的点 x
toYnumber目的点 y

drawCircle (x, y, radius)

绘制一个圆。

NameTypeDescription
xnumber圆心的 X 坐标
ynumber圆心的 Y 坐标
radiusnumber圆的半径

drawEllipse (x, y, width, height)

绘制一个椭圆。

NameTypeDescription
xnumber椭圆中心的 X 坐标
ynumber椭圆中心的 Y 坐标
widthnumber椭圆的半宽
heightnumber椭圆的半高

drawPolygon (path)

使用指定的路径绘制多边形。

NameTypeDescription
pathnumber[] | Array.<{x,y}>用于构造多边形的路径数据。

drawRect (x, y, width, height)

绘制一个矩形。

NameTypeDescription
xnumber矩形左上角的 X 坐标
ynumber矩形左上角的 Y 坐标
widthnumber矩形的宽度
heightnumber矩形的高度

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

绘制一个带有圆角/斜角的矩形。

NameTypeDescription
xnumber矩形左上角的 X 坐标
ynumber矩形左上角的 Y 坐标
widthnumber矩形的宽度
heightnumber矩形的高度
radiusnumber矩形角度的半径

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

用任意数量的点画一个星形。

NameTypeDefaultDescription
xnumber星的中心 X 位置
ynumber星的中心 Y 位置
pointsnumber星星的点数必须 > 1
radiusnumber星星的外半径
innerRadiusnumberoptional 点之间的内半径,默认为radius的一半
rotationnumber0optional 星星自转的弧度,其中 0 为垂直