图形 Graphics

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

Demo

安装

使用 NPM

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

在浏览器中

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

使用

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

  1. import { Game, GameObject } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics'
  4. const game = new Game({
  5. systems: [
  6. new RendererSystem({
  7. canvas: document.querySelector('#canvas'),
  8. width: 750,
  9. height: 1000
  10. }),
  11. new GraphicsSystem()
  12. ]
  13. })
  14. const outter = new GameObject('container', {
  15. position: {
  16. x: 200,
  17. y: 500
  18. },
  19. size: {
  20. width: 300,
  21. height: 24
  22. }
  23. })
  24. const progress = new GameObject('container', {
  25. position: {
  26. x: 3,
  27. y: 3
  28. }
  29. })
  30. const outterGraphics = outter.addComponent(new Graphics())
  31. outterGraphics.graphics.beginFill(0xde3249, 1)
  32. outterGraphics.graphics.drawRoundedRect(0, 0, 300, 24, 12)
  33. outterGraphics.graphics.endFill()
  34. const progressGraphics = progress.addComponent(new Graphics())
  35. let i = 0
  36. setInterval(() => {
  37. setProgress(i++)
  38. }, 100)
  39. outter.addChild(progress)
  40. game.scene.addChild(outter)
  41. function setProgress(progress) {
  42. if (progress > 100) return
  43. const width = Math.max(12, (296 * progress) / 100)
  44. progressGraphics.graphics.clear()
  45. progressGraphics.graphics.beginFill(0x000000, 1)
  46. progressGraphics.graphics.drawRoundedRect(0, 0, width, 18, 9)
  47. progressGraphics.graphics.endFill()
  48. }

绘制方法

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
pathArray. | 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 为垂直