Skip to content

Canvas

画布对象,可以自由绘制、操作像素,或将其他图形直接绘制到 Canvas 上。

关键属性

width: number

画布高度。

height: number

画布宽度。

pixelRatio: number

画布分辨率, 默认使用当前设备分辨率。

smooth: boolean

是否平滑绘制图像, 默认为 true。

只读属性

canvas: ILeaferCanvas

跨平台的画布封装对象。

context: ICanvasContext2D

跨平台的 2d 上下文对象,同 HTML 的 Canvas.getContext('2d') 接口一致。

关键方法

draw ( )

draw(ui: UI | Group, offset?: IPointData , scale?: number | IPointData, rotation?: number)

绘制图形元素。

以元素的 inner 坐标 为基准进行绘制,暂时只支持2d类型的画布。

paint ( )

渲染画布。

通过 context 绘制的内容需要调用此方法进行渲染。

继承

Rect

API

Canvas

示例

使用 context 绘制

ts
import { Leafer, Canvas } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const canvas = new Canvas({ width: 800, height: 600 }) 
const { context } = canvas

context.fillStyle = '#FF4B4B'
context.beginPath()
context.roundRect(0, 0, 100, 100, 30)
context.arc(50, 50, 25, 0, Math.PI * 2)
context.fill('evenodd')

context.fillStyle = '#FEB027'
context.beginPath()
context.arc(50, 50, 20, 0, Math.PI * 2)
context.fill()

canvas.paint() // 更新渲染

leafer.add(canvas)

使用图形元素绘制

ts
import { Leafer, Canvas, Pen } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const canvas = new Canvas({ width: 800, height: 600 })
leafer.add(canvas)

const pen = new Pen()

pen.setStyle({ fill: { type: 'radial', stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }] } })
pen.roundRect(0, 0, 100, 100, 30)

pen.setStyle({ y: -5, fill: 'white' })
pen.moveTo(40, 30).bezierCurveTo(70, 30, 90, 60, 63, 80).quadraticCurveTo(50, 88, 40, 80).bezierCurveTo(10, 60, 50, 40, 40, 30)

canvas.draw(pen) 

Released under the MIT License.