alex-canvas-image v2.3.1

alex-canvas-image

// pnpm i alex-canvas-image

import CanvasImage from 'alex-canvas-image'

const optBoard = new CanvasImage(canvas, imageUrl)

type CtxConfig = Record<string, unknown> & {
  font?: number
  isTextCenter?: boolean
  isTextStroke?: boolean
  isFill?: boolean
}
// Record canvas画笔配置

绘制类型: 'circle' | 'line' | 'polygon' | 'rect' | 'text'

// circle 圆形
interface CircleData {
  point: [number, number] // 圆形中心点---原图坐标
  radius: number // 圆-半径
}

// LineType 线
type LineType = [number, number][]

// RectType 矩形
interface RectType {
  x: number // 原图坐标
  y: number
  width: number
  height: number
}

// TextType 文字
type TextType = {
  text: string,
  point: [number, number]
}

// 静态绘制
optBoard.graphDraw('circle', CircleData, CtxConfig)

// 手绘
optBoard.draw('circle', CtxConfig): Promise<CircleData>
  
// 取消手绘
  // 取消全部-all
	// 取消当前
  // 取消固定哪一个-GraphType['type']
optBoard.cancel('all' | GraphType['type'])

// 销毁实例
optBoard.destroy()

// 当前绘制数据
optBoard.data

// resize
optBoard.resize

// 设置全局画笔配置
optBoard.setCtxConfig

// 设置层级
optBoard.setZoom(2)

// 设置位置
optBoard.setPosition([0, 0], 'center' | 'start' | [number, number])