react-svg-image-board/dist/js/components/SvgImageBoard/index.d.ts

A react component. can drawing svg element to image board.

import * as React from 'react';
import './styles/index.scss';
export declare enum BoardMode {
    /**
     * 显示模式
     */
    ReadOnly = 0,
    /**
     * 编辑模式
     */
    Edit = 1
}
export declare enum ShapeTypeEnum {
    Rectangle = 0,
    Line = 1,
    Circle = 2,
    Polyline = 3,
    polygon = 4
}
export interface Point {
    x: number;
    y: number;
}
export interface Size {
    width: number;
    height: number;
}
export interface Rectangle extends Point, Size {
}
export interface Line {
    startPoint: Point;
    endPoint: Point;
}
export interface Circle {
    originalPoint: Point;
    r: number;
}
export interface Ellipse {
    originalPoint: Point;
    rx: number;
    ry: number;
}
export interface Multipoint {
    points: Point[];
}
export declare type ShapeType = Rectangle | Line | Circle | Ellipse | Multipoint;
export interface Shape<T = ShapeType> {
    key?: any;
    type: ShapeTypeEnum;
    shape: T;
    tag?: any;
}
export interface SvgImageBoardProps {
    imageUrl: string;
    mode: BoardMode;
    initShapes?: Array<Shape<ShapeType>>;
    onLoad?: (board: SvgImageBoard) => void;
    onDeletedShape?: (shape: Shape<ShapeType>) => void;
    onCreatedShape?: (shape: Shape<ShapeType>) => void;
    onUpdatedShape?: (shape: Shape<ShapeType>) => void;
    /**
     * 每次缩放的比例
     */
    scaleNum?: number;
    /**
     * 最大缩放比例
     */
    maxScale?: number;
    /**
     * 最小缩放比例
     */
    minScale?: number;
    shapeClassName?: string;
    drawShapeType?: ShapeTypeEnum;
}
interface SvgImageBoardPropsState {
    uploading: boolean;
    imageUrl: string;
    imageSize: Size;
    currentEditIndex: number;
    shapes: Array<Shape<ShapeType>>;
}
export declare class SvgImageBoard extends React.Component<SvgImageBoardProps, SvgImageBoardPropsState> {
    private _isMouseDown;
    private _mouseTarget?;
    private _mouseDownPostion;
    private _lastMousePosition;
    private mainBoxRef;
    private mapscaleControlRef;
    private drawRectRef;
    static defaultProps: {
        scaleNum: number;
        maxScale: number;
        minScale: number;
        shapeClassName: string;
        drawShapeType: ShapeTypeEnum;
    };
    constructor(props: SvgImageBoardProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    private resize;
    preLoadImage: (imageUrl: string) => void;
    private setImageDefaultRatio;
    private onkeydown;
    private mainMouseDown;
    private mainMouseMove;
    private mainMouseUp;
    private mainMouseWheel;
    /**
     * 设置缩放比例
     * @zoomScale 缩放比例
     * @scalePoint 缩放中心点
     */
    setZoomScale: (zoomScale: number, scalePoint?: Point) => void;
    /**
     * 设置原始缩放比例
     */
    setOriginalScale: () => void;
    private ResetTransform;
    private setDrawRect;
    /**
     * 获取编辑的数据
     */
    getData: () => Shape<ShapeType>[];
    render(): JSX.Element;
}
export default SvgImageBoard;