DIY.JS

Appearance

Stage 舞台类 ​

Stage 类是整个画布的容器和管理器。

构造函数 ​

typescript
constructor(drawer: HTMLElement)

属性 ​

基础属性 ​

  • _elem: HTMLElement - 舞台元素
  • _shapes: Shape[] - 图形列表
  • _scale: number - 缩放比例
  • _dpr: number - 设备像素比

状态控制 ​

  • _loop: boolean - 是否循环渲染
  • _mode: 'auto' | 'event' - 渲染模式
  • _limit: boolean - 是否限制边界
  • _stop: boolean - 是否停止渲染
  • _isMoving: boolean - 是否正在移动
  • _multiActive: boolean - 是否允许多选
  • _useBuffer: boolean - 是否使用缓冲
  • _stack: boolean - 是否使用堆栈

配置项 ​

  • config: { maxWidth: number, maxHeight: number, sensitivity: number, minRotatable: number, themeColor: string, activeColor: string, showOutline: boolean } - 舞台配置

方法 ​

初始化 ​

  • _init(): void - 初始化舞台
  • _initBound(): void - 初始化边界
  • _initStyle(): void - 初始化样式
  • _initCanvas(): void - 初始化画布

事件处理 ​

  • on(event: string | string[], listener: Function, ignore?: boolean): void - 添加事件监听
  • off(event: string | string[], listener: Function): void - 移除事件监听
  • emit(event: string, ...args: any[]): Promise<void> - 触发事件

图形管理 ​

  • add(shape: Shape, zIndex?: number): Promise<Shape> - 添加图形
  • remove(shape: Shape | string, flag?: boolean): boolean - 移除图形
  • get(name: string): Shape | null - 获取图形
  • clear(): void - 清空舞台
  • active(shape: Shape): void - 激活图形
  • enableMultiActive(): void - 启用多选
  • disableMultiActive(): void - 禁用多选

视图操作 ​

  • setOffset(offset: {x: number, y: number}): void - 设置偏移
  • resetOffset(): void - 重置偏移
  • scale(zoom: number): void - 设置缩放
  • getScale(): number - 获取缩放比例
  • setElementStyle(style: object): void - 设置元素样式

模型管理 ​

  • getModel(): any - 获取模型
  • renderModel(): void - 渲染模型
  • addModel(shape: Shape): void - 添加模型
  • getModelShapes(flag?: boolean, index?: number | string): Shape[] | Shape | null - 获取模型图形
  • setModel(shape: Shape): void - 设置模型
  • clearModel(): void - 清空模型

视图管理 ​

  • clearView(): void - 清空视图
  • setView(shape: Shape): Promise<void> - 设置视图
  • getViewBound(): any - 获取视图边界
  • getView(): any - 获取视图

快照和序列化 ​

  • r(snapshot?: any): void - 渲染快照
  • alter(snapshot: any, flag?: boolean): Promise<void> - 修改快照
  • undo(): void - 撤销操作
  • redo(): void - 重做操作
  • snap(flag?: boolean): any - 创建快照
  • clearSnap(): void - 清空快照
  • snapTest(): void - 测试快照
  • toJson(): string - 转换为JSON
  • loadJson(json: string | object, param?: object): Promise<void> - 加载JSON
  • loadJsonWithSnap(json: string | object, param?: object): Promise<void> - 加载带快照的JSON

其他功能 ​

  • bound(): any - 获取边界
  • dpr(): number - 获取设备像素比
  • shapes(flag?: boolean, index?: number | string): Shape[] | Shape | null - 获取图形
  • getActive(): Shape | null - 获取当前激活的图形
  • getIndex(shape: Shape): number - 获取图形索引
  • canMultiActive(): boolean - 是否可以多选
  • getColorBound(screen: any, flag?: boolean): any - 获取颜色边界
  • createCanvas(w: number, h: number, append?: boolean, styles?: object): any - 创建画布
  • reset(): void - 重置舞台
  • hiddenOutline(): void - 隐藏轮廓
  • showOutline(): void - 显示轮廓
  • canShowOutline(): boolean - 是否可以显示轮廓

状态管理 ​

  • undo(): void - 撤销操作
  • redo(): void - 重做操作
  • snap(flag?: boolean): any - 创建快照