shot-web-screen/dist/types/index.d.ts

截屏、截图插件、capture screen

import { OPTION, CUTBOXINFO, TEXTPOSITIONINFO, POSITIONINFO, TEXTRENDERINFO, RENDERINFO, JUDGERESULT } from './types/index';
import drawCutBox from './common/cutBox';
import './css/index.css';
declare class captureScreen {
    captureDom: HTMLElement | null;
    saveCallback: Function | null;
    zIndex: number;
    drawWidth: number;
    drawHeight: number;
    image: HTMLCanvasElement | HTMLImageElement | null;
    toolData: Array<any>;
    activeTool: string;
    cutBoxInfo: CUTBOXINFO | null;
    toolsBox: HTMLElement | null;
    optionBox: HTMLElement | null;
    options: OPTION;
    canvasDom: HTMLCanvasElement | null;
    imageCanvas: HTMLCanvasElement | null;
    ctx: CanvasRenderingContext2D | null;
    id: number;
    renderCutBox: drawCutBox | null;
    clickX: number;
    clickY: number;
    startPoistion: CUTBOXINFO | POSITIONINFO | TEXTPOSITIONINFO | null;
    judgeResult: JUDGERESULT | undefined | null;
    operationData: TEXTRENDERINFO | RENDERINFO | CUTBOXINFO | null;
    operateStatus: string;
    drawingInfo: POSITIONINFO | TEXTPOSITIONINFO | null;
    constructor({ captureDom, isWebRtc, saveCallback, loadCallback, basicImage, zIndex }: {
        captureDom?: HTMLElement;
        isWebRtc?: boolean;
        saveCallback?: Function | null;
        loadCallback?: Function | null;
        basicImage?: HTMLImageElement | null;
        zIndex?: number;
    });
    initData(basicImage: HTMLImageElement | null, isWebRtc: boolean, loadCallback: Function | null): Promise<void>;
    /**
     * @func 基于画布大小生成剪裁框
     * @desc
     * @param {}
     * @return {}
     */
    generteCutBox(canvasDom: HTMLCanvasElement): void;
    /**
     * @func 渲染图形 包括截屏底图、剪裁框和工具栏绘制的图形（不包括马赛克）
     * @desc
     * @param {
     *  isSave 是否保存， 保存时需要取消剪裁框绘制，增加底图绘制
     *  selectId  选中的图形id
     *  editId 主要为文本提供
     * }
     * @return {}
     */
    renderGraph(isSave?: boolean, selectId?: number | undefined, editId?: number | undefined): void;
    /**
     * @func 添加事件监听操作 , 操作类型分为工具图形和剪裁框两类
     * @desc 思路
     *       在鼠标移动过程中，对所有图形位置与当前鼠标位置进行判断验证 （数据量大，可能存在性能问题）
     *       验证成功，改变鼠标指示器样式，同时在验证成功后，鼠标点击开启对应图形的移动操作
     *       鼠标抬起重置数据
     * @param {}
     * @return {}
     */
    addListener(canvasDom: HTMLCanvasElement): void;
    checkInsideText(mouseX: number, mouseY: number): TEXTRENDERINFO | false;
    /**
     * @func 处理鼠标点击事件
     * @desc
     * @param {}
     * @return {}
     */
    handleMousedown(e: MouseEvent): void;
    /**
     * @func 处理鼠标移动事件
     * @desc
     * @param {}
     * @return {}
     */
    handleMouseMove(e: MouseEvent, dom: HTMLElement): void;
    /**
     * @func 处理鼠标抬起事件
     * @desc
     * @param {}
     * @return {}
     */
    handleMouseUp(e: MouseEvent, dom: HTMLElement): void;
    /**
     * @func 处理不同操作工具的绘制过程，只包含鼠标点击事件处理与鼠标移动
     * @desc 鼠标点击主要用于初始化数据，鼠标移动用于收集数据与渲染图形
     * @param {}
     * @return {}
     */
    handleDrawingEvent(e: MouseEvent, eventType?: string): void;
    /**
     * @func 如果需要操作剪裁框时，纠正偏移量，使其最大偏移处于剪裁框内
     * @desc
     * @param {
     *   start 开始点
     *   move 移动点
     *   cutBoxInfo 剪裁框信息
     * }
     * @return {
     *  偏移量[offsetX,offsetY]
     * }
     */
    correctOffset(start: Array<number>, move: Array<number>, cutBoxInfo: CUTBOXINFO): Array<number>;
    updateToolsBox(isShow?: boolean): void;
    toolBoxClickEvent(e: MouseEvent): void;
    toolFunction(type: string): void;
    updateOptionsBox(): void;
    optionSizeClick(e: MouseEvent): void;
    optionColorClick(e: MouseEvent): void;
    checkIsRectInside(mouseX: number, mouseY: number): boolean;
    destory(): void;
}
export default captureScreen;