图形 Graphics

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

Demo

安装

使用 NPM

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

在浏览器中

<script src="https://unpkg.com/@eva/plugin-renderer-graphics@1.1.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()）在绘制时使用。

endFill ()

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

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

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

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

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

lineTo (x, y)

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

moveTo (x, y)

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

quadraticCurveTo (cpX, cpY, toX, toY)

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

clear ()

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

closePath ()

关闭当前路径。

预设图形

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

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

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

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

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

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

drawCircle (x, y, radius)

绘制一个圆。

drawEllipse (x, y, width, height)

绘制一个椭圆。

drawPolygon (path)

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

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

drawRect (x, y, width, height)

绘制一个矩形。

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

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

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

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