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: boolean | null - 是否固定图层
  • actived: boolean - 是否处于激活状态
  • clicked: 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 - 是否可翻转

方法 ​

初始化和配置 ​

  • init(): Promise<void> - 初始化图形
  • 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 - 移除所有监听器

变换操作 ​

  • move(coords: Array<{x: number, y: number}>, offset: {x: number, y: number}): boolean - 图形移动事件处理
  • scale(zoom: number, coords: Array<{x: number, y: number}>): void - 图形缩放事件处理
  • rotate(rad: number, coords: Array<{x: number, y: number}>): boolean - 图形旋转事件处理

导出和序列化 ​

  • export(param?: object): Promise<Blob | string> - 导出图形
  • toJson(config?: object): string - 导出为JSON
  • relative(): object - 获取相对位置信息

激活状态管理 ​

  • active(): void - 激活图形
  • deactivate(flag?: boolean): void - 取消激活
  • toggle(): boolean - 切换激活状态
  • _active(status: boolean, flag?: boolean): void - 内部激活处理

位置和边界 ​

  • getRotateCoords(): Array<{x: number, y: number}> - 获取旋转坐标
  • getRotateBound(): Bound - 获取旋转边界
  • ColorBound(): object - 获取颜色边界

层级管理 ​

  • 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 - 获取图形当前状态的数据对象