图形 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()）在绘制时使用。

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)

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

drawRect (x, y, width, height)

绘制一个矩形。

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

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

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

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