canvas-to-mark/dist/index.d.ts

一个小范围使用的canvas图片标注小工具

import Rect from './shape/Rect';
import Polygon from './shape/Polygon';
import Dot from './shape/Dot';
import { Point } from './Types';
import EventBus from './EventBus';
export default class CanvasToMark extends EventBus {
    lock: boolean;
    MIN_WIDTH: number;
    MIN_HEIGHT: number;
    strokeStyle: string;
    fillStyle: string;
    activeStrokeStyle: string;
    ctrlFillStyle: string;
    ctrlRadius: number;
    pointRadius: number;
    labelFillStyle: string;
    labelFontSize: number;
    labelFontColor: string;
    labelMaxLen: number;
    rollScal: boolean;
    WIDTH: number;
    HEIGHT: number;
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    dataset: Array<Rect | Polygon | Dot>;
    offlineCanvas: HTMLCanvasElement;
    offlineCtx: CanvasRenderingContext2D;
    remmber: number[][];
    movePoint: Point;
    remmberOrigin: number[];
    createType: number;
    ctrlIndex: number;
    image: HTMLImageElement;
    imageLoaded: false;
    IMAGE_ORIGIN_WIDTH: number;
    IMAGE_WIDTH: number;
    IMAGE_ORIGIN_HEIGHT: number;
    IMAGE_HEIGHT: number;
    originX: number;
    originY: number;
    scaleStep: number;
    zoomCenter: 'canvasCenter' | 'mouse';
    canStart: Promise<any>;
    constructor(el: HTMLCanvasElement | string, imgSrc?: string);
    get activeShape(): Rect | Polygon | Dot;
    get scale(): number;
    /**
     * 初始化
     */
    initScreen(): void;
    /**
     * 添加/切换图片
     * @param url 图片链接
     */
    setImage(url: string): void;
    /**
     * 设置数据
     * @param data Array
     */
    setData(data: any[]): Promise<void>;
    /**
     * 判断是否在标注实例上
     * @param mousePoint 点击位置
     * @returns
     */
    hitOnShape(mousePoint: Point): [number, Rect | Polygon | Dot];
    /**
     * 判断鼠标是否在背景图内部
     * @param e MouseEvent
     * @returns 布尔值
     */
    isInBackground(e: MouseEvent): boolean;
    /**
     * 判断是否在矩形内
     * @param point 坐标
     * @param coor 区域坐标
     * @returns 布尔值
     */
    isPointInRect(point: Point, coor: Point[]): boolean;
    /**
     * 判断是否在多边形内
     * @param point 坐标
     * @param coor 区域坐标
     * @returns 布尔值
     */
    isPointInPolygon(point: Point, coor: Point[]): boolean;
    /**
     * 判断是否在圆内
     * @param point 坐标
     * @param center 圆心
     * @param r 半径
     * @returns 布尔值
     */
    isPointInCircle(point: Point, center: Point, r: number): boolean;
    /**
     * 绘制矩形
     * @param shape 标注实例
     * @returns
     */
    drawRect(shape: Rect): void;
    /**
     * 绘制多边形
     * @param shape 标注实例
     */
    drawPolygon(shape: Polygon): void;
    /**
     * 绘制点
     * @param shape 标注实例
     */
    drawDot(shape: Dot): void;
    /**
     * 绘制控制点
     * @param point 坐标
     */
    drawCtrl(point: Point): void;
    /**
     * 绘制控制点列表
     * @param shape 标注实例
     */
    drawCtrlList(shape: Rect | Polygon): void;
    /**
     * 绘制label
     * @param point 位置
     * @param label 文本
     */
    drawLabel(point: Point, label?: string, labelFillStyle?: string): void;
    /**
     * 绘制背景图片
     */
    paintImage(): void;
    clear(): void;
    /**
     * 更新画布
     */
    update(): void;
    /**
     * 删除指定实例
     * @param index number
     */
    deleteByIndex(index: number): void;
    /**
     * 计算缩放步长
     * @param init 是否为init
     */
    calcStep(init?: boolean): void;
    /**
     * 缩放
     * @param type true放大，false，缩小
     * @param e 事件对象
     */
    setScale(type: boolean, e?: MouseEvent): void;
    /**
     * 适配背景图
     */
    fitZoom(): void;
    /**
     * 获取dom距离页面顶部、左侧距离
     */
    getElementTop(elem: HTMLElement): {
        pageLeft: number;
        pageTop: number;
    };
}