mskalign-canvas/lib/src/shape/Shape.d.ts

一个用于图片标注的javascript库，基于canvas，简单轻量，支持矩形、多边形、点、折线、圆形。

import { Point, DragAxleType, AllShape } from "../types";
interface ShapeProp {
    type: number;
    [key: string]: any;
}
interface AngleReturn {
    angle: number;
    direction?: number;
    needDirection?: boolean;
}
export default class Shape {
    /** 坐标 */
    coor: Point[];
    /** 边线颜色 */
    strokeStyle: string;
    dataType?: string;
    /** 填充颜色 */
    fillStyle: string;
    /** 边线宽度 */
    lineWidth: number;
    initialVal: any;
    /** 1 矩形，2 多边形，3 点，4 折线，5 圆 */
    type: number;
    /** 形状名称  */
    name: string;
    /** 子组件列表 */
    components: any[];
    /** 当前图形是否子组件 */
    isComponent: boolean;
    /** 当前图形是否不允许按键删除 */
    isDisableDelByKey: boolean;
    /**
     * TODO:待优化
     * 关联的点的信息，实例化后会计算出关联关系 并存在 relativePoints 中
     *
     *  举例：relativeInfo: ["0-2-0", "1-2-1"], 其中的数字都是下标
     *  解释：
     * 1. 第1个组件与第3个组件的第1个点是关联的，当拖动第1个组件时，第3个组件的第1个点也会跟着移动
     * 2. 第2个组件与第3个组件的第2个点是关联的  当拖动第2个组件时，第3个组件的第2个点也会跟着移动
     * */
    relativeInfo?: string[][];
    relativePoints?: any[];
    relativeAuxLineIds?: string[];
    /** 当前是否隐藏  在截图时候还会出现 */
    hide: boolean;
    /** 当前是否隐藏  在截图时候不会出现 */
    hideInSnapshot: boolean;
    /** 当前是否可以操作 */
    disable: boolean;
    isEdit?: boolean;
    direction?: number;
    pixelSpacing: number;
    apex?: any;
    vertebra?: any;
    /** 当前是否为控制组合组件的子组件 */
    isCtrlShape: boolean;
    /** 当前是否处于活动状态 */
    active: boolean;
    /** 当前是否处于活动状态父组件的子组件 */
    activeComponent: boolean;
    /** 当前是否处于创建状态 */
    creating: boolean;
    /** 当前是否处于拖拽状态 */
    dragging: boolean;
    dragAxle: DragAxleType;
    isDash: boolean;
    /** 索引 */
    index: number;
    /** 唯一标识 */
    uuid: string;
    /** 标签文字颜色 */
    labelTextFillStyle: string;
    /** 标签 */
    label: string;
    /** 标签值 */
    labelValue?: string;
    labelCoor: Point;
    readonly: boolean;
    /** 是否隐藏标签 */
    hideLabel: boolean;
    /** 是否隐藏结果和label  */
    isHideResult: boolean;
    hideCtrlDots: boolean;
    /** 标签填充颜色 */
    labelFillStyle: string;
    /** 标签文字字体 */
    labelFont: string;
    /** 向上展示label */
    labelUp: boolean;
    labelRadius: number;
    angle?: number;
    distance?: number;
    mark?: string;
    remark?: string;
    dragPointAxle: string;
    /**
     * 获取辅助线或者辅助点的坐标
     */
    getAuxiliaryCoor?: (shapes: AllShape[]) => Point[];
    /**
     * 获取coor
     */
    getCoor?: (shapes: AllShape[], shape: AllShape) => Point[];
    /**
     * 获取角度
     */
    getAngle?: (shapes: AllShape[], shape: AllShape) => AngleReturn;
    /**
     * 获取线段长度角度
     */
    getDistance?: (shapes: AllShape[], shape: AllShape) => number;
    /**
     * 获取label及其位置坐标
     */
    getLabelAndCoor?: (shapes: AllShape[], shape: AllShape, components?: AllShape[]) => any;
    constructor(item: ShapeProp, index: number);
}
export {};