DIY.JS

Appearance

Shape 基础图形类 ​

Shape 是所有图形对象的基类，提供了基本的属性和方法。

构造函数 ​

typescript
abstract constructor(config: object)

属性 ​

位置和标识 ​

  • x: number | null - 图形的X坐标
  • y: number | null - 图形的Y坐标
  • name: string | null - 图形的名称
  • type: string - 图形类名称
  • zIndex: number - 图层顺序

状态控制 ​

  • fixed: number | null - 是否固定图层，复制数字代表固定在哪一层
  • actived: boolean - 是否处于激活状态，也就是被选中的状态

样式属性 ​

  • rotateRadius: number - 当前旋转半径
  • rotateAroundCenter: boolean - 是否围绕中心点旋转
  • blendMode: string - 混合模式
  • strokeStyle: string - 描边样式
  • fillStyle: string - 填充样式
  • fillRule: string - 填充规则
  • outline: boolean - 是否显示非透明区域的轮廓

交互控制 ​

  • canMove: boolean - 是否可移动
  • canRotate: boolean - 是否可旋转
  • canScale: boolean - 是否可缩放
  • canUp: boolean - 是否可上移
  • canRemove: boolean - 是否可删除
  • canClick: boolean - 是否可点击
  • canActive: boolean - 是否可激活
  • canExport: boolean - 是否可导出
  • canSort: boolean - 是否可排序
  • canDo: boolean - 是否可执行操作
  • canFlip: boolean - 是否可翻转

方法 ​

初始化和配置 ​

  • set(config: object): void - 设置图形的属性，传递一个对象代表需要更新的所有属性

渲染和状态 ​

  • render(): void - 手动触发渲染
  • save(): object - 保存当前状态，返回包含图形当前状态数据的对象
  • restore(snap: object): void - 恢复状态

事件处理 ​

  • emit(event: string, data: any): Promise<void> - 触发事件
  • on(event: string | string[], listener: Function): void - 添加事件监听
  • off(event: string | string[], listener: Function): void - 移除事件监听
  • removeAlllistener(event: string): void - 移除所有监听器

导出和序列化 ​

  • export(param?: object): Promise<Blob | string> - 导出图形，参数可参考图片导出的文档
  • toJson(config?: object): string - 导出为JSON
  • relative(): object - 获取相对位置信息（单位为%号）

激活状态管理 ​

  • active(): void - 激活图形
  • deactivate(flag?: boolean): void - 取消激活
  • toggle(): boolean - 切换激活状态

位置和边界 ​

  • getRotateCoords(): Array<{x: number, y: number}> - 获取旋转坐标
  • getRotateBound(): Bound - 获取旋转边界
  • ColorBound(): object - 获取颜色边界，也就是当前图形在画布上非透明区域的x,y,w,h，返回屏幕坐标和通过DPR放大之后的坐标

层级管理 ​

  • getIndex(): number - 获取当前图层
  • moveIndex(target: number, action?: boolean, force?: boolean): number - 移动到指定图层
  • moveTop(action?: boolean): number - 移动到顶层
  • moveBottom(action?: boolean): number - 移动到底层
  • forward(action?: boolean): number - 前移一层
  • backward(action?: boolean): number - 后移一层

上下文和舞台 ​

  • stage(): Stage - 获取所属舞台
  • getContext(): any - 获取渲染上下文
  • bindContext(context: any): void - 绑定渲染上下文

其他操作 ​

  • tap(coords: Array<{x: number, y: number}>): boolean - 图形Tap事件处理
  • up(coords: Array<{x: number, y: number}>): void - 图形点击结束后事件的处理
  • destroy(flag?: boolean): void - 销毁图形，从舞台中移除
  • props(options?: object): object - 获取图形当前状态的数据对象