@wings-j/canvas v3.3.0

Canvas 工具。

安装

npm install @wings-j/canvas

示例

引入：

import Canvas from '@wings-j/canvas'

静态方法：

let width = Canvas.calcTextWidth('Test')

初始化：

let canvas = new Canvas(document.createElement('canvas'))

画曲线：

canvas.pathCurve([
  [0, 0],
  [1, 1]
])
canvas.stroke()

暂用绘画参数：

canvas.saveStore({ strokeStyle: 'skyblue' }, () => {
  canvas.pathCurve([])
  canvas.stroke()
})

离屏缓冲：

let canvas = new Canvas(document.createElement('canvas'), { buffer: true })

canvas.pathCurve([
  [0, 0],
  [1, 1]
])
canvas.stroke()

canvas.update() // 将离屏canvas更新到真canvas

API

静态方法

计算文本宽度

calcTextWidth(text: string, size?: number, family?: string): number

参数

• text：文本
• size：字体尺寸
• family：字体族

返回

• 宽度

以宽度剪裁文本

sliceTextByWidth(text: string, size?: number, family?: string): void

参数

• text：文本
• size：字体尺寸
• family：字体族

以宽度分割文本

splitTextByWidth(text: string, size?: number, family?: string): void

参数

• text：文本
• size：字体尺寸
• family：字体族

构造方法

constructor(canvas: HTMLCanvasElement, { buffer = false }: { buffer?: boolean } = {})

参数

• canvas：HTMLCanvasElement
• buffer：缓冲

成员变量

• element: HTMLCanvasElement：构造函数的传入对象
• context: CanvasRenderingContext2D：绘画环境
• wrap: [number, number, number, number]：包围框

成员方法

更新

将离屏内容更新到画布，仅buffer=true时有效。

update(): void

填充

fill(): void

轮廓

stroke(): void

保存恢复

saveRestore(params: DrawParam, action: (context: CanvasRenderingContext2D) => {}): void

参数

• params：绘画参数
• action：操作。传入绘画环境

获取鼠标位置

getMousePosition(clientX: number, clientY: number): void

参数

• clientX：鼠标在浏览器的位置 X
• clientY：鼠标在浏览器的位置 Y

画文字

drawText(text: string, x: number, y: number, width: number, lineHeight: number): void

参数

• text：文本
• x：位置 X
• y：位置 Y
• width：宽度
• lineHeight：行高

路径曲线

pathCurve(points: Point[], a?: number, b?: number): void

参数

• points：点集
• a：参数 a
• b：参数 b