zkqh-canvas-select-one 2.32.3

package/lib/index.d.ts

@@ -0,0 +1,438 @@
+import Rect from "./shape/Rect";
+import Polygon from "./shape/Polygon";
+import Dot from "./shape/Dot";
+import EventBus from "./EventBus";
+import Line from "./shape/Line";
+import Circle from "./shape/Circle";
+import Grid from "./shape/Grid";
+import Brush from "./shape/Brush";
+import Eraser from "./shape/Eraser";
+import Ellipse from "./shape/Ellipse";
+export type Point = [number, number];
+export type AllShape = Rect | Polygon | Dot | Line | Circle | Grid | Brush | Eraser | Ellipse;
+declare enum Shape {
+    None = 0,
+    Rect = 1,
+    Polygon = 2,
+    Dot = 3,
+    Line = 4,
+    Circle = 5,
+    Grid = 6,
+    Brush = 7,
+    Eraser = 8,
+    Ellipse = 9
+}
+export default class CanvasSelect extends EventBus {
+    /** 当前版本 */
+    version: string;
+    /** 只读模式，画布不允许任何交互 */
+    lock: boolean;
+    /** 只读模式，仅支持查看 */
+    readonly: boolean;
+    /** 最小矩形宽度 */
+    MIN_WIDTH: number;
+    /** 最小矩形高度 */
+    MIN_HEIGHT: number;
+    /** 最小圆形半径 */
+    MIN_RADIUS: number;
+    /** 多边形最大点数 */
+    MAX_POLYGON_POINTS: number;
+    /** 边线颜色 */
+    strokeStyle: string;
+    /** 填充颜色 */
+    fillStyle: string;
+    /** 边线宽度 */
+    lineWidth: number;
+    /** 当前选中的标注边线颜色 */
+    activeStrokeStyle: string;
+    /** 当前选中的标注填充颜色 */
+    activeFillStyle: string;
+    /** 控制点边线颜色 */
+    ctrlStrokeStyle: string;
+    /** 控制点填充颜色 */
+    ctrlFillStyle: string;
+    /** 控制点半径 */
+    ctrlRadius: number;
+    /** 是否隐藏标签 */
+    hideLabel: boolean;
+    /** 标签背景填充颜色 */
+    labelFillStyle: string;
+    /** 标签字体 */
+    labelFont: string;
+    /** 标签文字颜色 */
+    textFillStyle: string;
+    /** 标签字符最大长度，超出使用省略号 */
+    labelMaxLen: number;
+    /** 画布宽度 */
+    WIDTH: number;
+    maxPolygonPoint: number;
+    /** 画布高度 */
+    HEIGHT: number;
+    /** XY十字坐标 */
+    crossX: Line;
+    crossY: Line;
+    crossStroke: string;
+    /** 开启十字辅助 */
+    showCross: boolean;
+    /** 开启矩形旋转控制点 */
+    showRotation: boolean;
+    canvas: HTMLCanvasElement | undefined;
+    ctx: CanvasRenderingContext2D | null | undefined;
+    /** 所有标注数据 */
+    dataset: AllShape[];
+    offScreen: HTMLCanvasElement | undefined;
+    offScreenCtx: CanvasRenderingContext2D | null | undefined;
+    magnifierCanvas: HTMLCanvasElement | undefined;
+    magnifierCtx: CanvasRenderingContext2D | undefined;
+    isMagnifierVisible: boolean;
+    magnifierPosition: Point | "auto";
+    /** 记录锚点距离 */
+    remmber: number[][];
+    /** 记录鼠标位置 */
+    mouse: Point;
+    /** 记录背景图鼠标位移 */
+    remmberOrigin: number[];
+    /** 0 不创建，1 矩形，2 多边形，3 点，4 折线，5 圆，6 网格 */
+    createType: Shape;
+    /** 控制点索引 */
+    ctrlIndex: number;
+    /** 背景图片 */
+    image: HTMLImageElement;
+    /** 图片原始宽度 */
+    IMAGE_ORIGIN_WIDTH: number;
+    /** 图片缩放宽度 */
+    IMAGE_WIDTH: number;
+    /** 图片原始高度 */
+    IMAGE_ORIGIN_HEIGHT: number;
+    /** 图片缩放高度 */
+    IMAGE_HEIGHT: number;
+    /** 原点x */
+    originX: number;
+    /** 原点y */
+    originY: number;
+    /** 缩放步长 */
+    scaleStep: number;
+    /** 滚动缩放 */
+    scrollZoom: boolean;
+    private timer;
+    /** 最小touch双击时间 */
+    dblTouch: number;
+    /** 记录touch双击开始时间 */
+    dblTouchStore: number;
+    /** 这个选项可以帮助浏览器进行内部优化 */
+    alpha: boolean;
+    /** 专注模式 */
+    focusMode: boolean;
+    /** 触控缩放时记录上一次两点距离 */
+    scaleTouchStore: number;
+    /** 当前是否为双指触控 */
+    isTouch2: boolean;
+    isMobile: boolean;
+    /** 向上展示label */
+    labelUp: boolean;
+    private isCtrlKey;
+    /** 自定义ctrl快捷键 KeyboardEvent.code */
+    ctrlCode: string;
+    /** 网格右键菜单 */
+    gridMenuEnable: boolean;
+    /** 网格选中背景填充颜色 */
+    gridSelectedFillStyle: string;
+    /** 画笔大小 */
+    brushSize: number;
+    /** 画笔颜色 */
+    brushStokeStyle: string;
+    /** 橡皮擦大小 */
+    eraserSize: number;
+    /** 标注坐标 (以背景图片左上角为原点) */
+    position: number[];
+    /**
+     * @param el Valid CSS selector string, or DOM
+     * @param src image src
+     */
+    constructor(el: HTMLCanvasElement | string, src?: string | HTMLImageElement);
+    /** 当前当前选中的标注 */
+    get activeShape(): any;
+    /** 当前缩放比例 */
+    get scale(): number;
+    /** 图片最小边尺寸 */
+    get imageMin(): number;
+    /** 图片原始最大边尺寸 */
+    get imageOriginMax(): number;
+    /** 创建放大镜容器 */
+    createMagnifierCanvas(): void;
+    /** 创建放大镜 */
+    createMagnifier(x: number, y: number): void;
+    /** 更新放大镜 */
+    updateMagnifier(x: number, y: number): void;
+    /** 销毁放大镜 */
+    private destroyMagnifier;
+    getImageDataFromCanvas(canvas: HTMLCanvasElement, [x, y, width, height]: [number, number, number, number]): ImageData | undefined;
+    /** 合成事件 */
+    mergeEvent(e: TouchEvent | MouseEvent): {
+        mouseX: number;
+        mouseY: number;
+        mouseCX: number;
+        mouseCY: number;
+        altKey: boolean;
+        button: number;
+        buttons: number;
+        clientX: number;
+        clientY: number;
+        ctrlKey: boolean;
+        layerX: number;
+        layerY: number;
+        metaKey: boolean;
+        movementX: number;
+        movementY: number;
+        offsetX: number;
+        offsetY: number;
+        pageX: number;
+        pageY: number;
+        relatedTarget: EventTarget | null;
+        screenX: number;
+        screenY: number;
+        shiftKey: boolean;
+        x: number;
+        y: number;
+        getModifierState(keyArg: string): boolean;
+        initMouseEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null): void;
+        detail: number;
+        view: Window | null;
+        which: number;
+        initUIEvent(typeArg: string, bubblesArg?: boolean, cancelableArg?: boolean, viewArg?: Window | null, detailArg?: number): void;
+        bubbles: boolean;
+        cancelBubble: boolean;
+        cancelable: boolean;
+        composed: boolean;
+        currentTarget: EventTarget | null;
+        defaultPrevented: boolean;
+        eventPhase: number;
+        isTrusted: boolean;
+        returnValue: boolean;
+        srcElement: EventTarget | null;
+        target: EventTarget | null;
+        timeStamp: DOMHighResTimeStamp;
+        type: string;
+        composedPath(): EventTarget[];
+        initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
+        preventDefault(): void;
+        stopImmediatePropagation(): void;
+        stopPropagation(): void;
+        NONE: 0;
+        CAPTURING_PHASE: 1;
+        AT_TARGET: 2;
+        BUBBLING_PHASE: 3;
+    } | {
+        mouseX: number;
+        mouseY: number;
+        mouseCX: number;
+        mouseCY: number;
+        altKey: boolean;
+        changedTouches: TouchList;
+        ctrlKey: boolean;
+        metaKey: boolean;
+        shiftKey: boolean;
+        targetTouches: TouchList;
+        touches: TouchList;
+        detail: number;
+        view: Window | null;
+        which: number;
+        initUIEvent(typeArg: string, bubblesArg?: boolean, cancelableArg?: boolean, viewArg?: Window | null, detailArg?: number): void;
+        bubbles: boolean;
+        cancelBubble: boolean;
+        cancelable: boolean;
+        composed: boolean;
+        currentTarget: EventTarget | null;
+        defaultPrevented: boolean;
+        eventPhase: number;
+        isTrusted: boolean;
+        returnValue: boolean;
+        srcElement: EventTarget | null;
+        target: EventTarget | null;
+        timeStamp: DOMHighResTimeStamp;
+        type: string;
+        composedPath(): EventTarget[];
+        initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
+        preventDefault(): void;
+        stopImmediatePropagation(): void;
+        stopPropagation(): void;
+        NONE: 0;
+        CAPTURING_PHASE: 1;
+        AT_TARGET: 2;
+        BUBBLING_PHASE: 3;
+    };
+    private handleLoad;
+    private handleContextmenu;
+    private handleMousewheel;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleDblclick;
+    private handleKeydown;
+    private handleKeyup;
+    /** 初始化配置 */
+    initSetting(): void;
+    /** 初始化事件 */
+    initEvents(): void;
+    /**
+     * 添加/切换图片
+     * @param source 图片链接或图片对象
+     */
+    setImage(source: string | HTMLImageElement): void;
+    /**
+     * 设置数据
+     * @param data Array
+     */
+    setData(data: AllShape[]): void;
+    /**
+     * 判断是否在标注实例上
+     * @param mousePoint 点击位置
+     * @returns
+     */
+    hitOnShape(mousePoint: Point): [number, AllShape];
+    /**
+     * 判断鼠标是否在背景图内部
+     * @param e MouseEvent
+     * @returns 布尔值
+     */
+    isInBackground(e: MouseEvent | TouchEvent): 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 半径
+     * @param needScale 是否为圆形点击检测
+     * @returns 布尔值
+     */
+    isPointInCircle(point: Point, center: Point, r: number): boolean;
+    /**
+     * 判断是否在折线内
+     * @param point 坐标
+     * @param coor 区域坐标
+     * @returns 布尔值
+     */
+    isPointInLine(point: Point, coor: Point[]): boolean;
+    /**
+     * 绘制矩形
+     * @param shape 标注实例
+     * @returns
+     */
+    drawRect(shape: Rect, sub?: Record<string, any>): void;
+    /**
+     * 绘制多边形
+     * @param shape 标注实例
+     */
+    drawPolygon(shape: Polygon): void;
+    /**
+     * 绘制点
+     * @param shape 标注实例
+     */
+    drawDot(shape: Dot): void;
+    /**
+     * 绘制圆
+     * @param shape 标注实例
+     */
+    drawCirle(shape: Circle): void;
+    /**
+     * 绘制椭圆
+     * @param shape 标注实例
+     */
+    drawEllipse(shape: Ellipse): void;
+    /**
+     * 绘制折线
+     * @param shape 标注实例
+     */
+    drawLine(shape: Line): void;
+    /**
+     * 绘制网格
+     * @param shape 标注实例
+     * @returns
+     */
+    drawGrid(shape: Grid): void;
+    /**
+     * 绘制画笔路径
+     * @param shape 形状
+     */
+    drawBrushPath(shape: Brush): void;
+    /**
+     * 绘制橡皮擦路径
+     * @param coor 折线坐标
+     * @param shape 形状
+     */
+    drawEraserPath(shape: Eraser): void;
+    /** 清除画布 */
+    clearBrush(): void;
+    /**
+     * 绘制控制点
+     * @param point 坐标
+     */
+    drawCtrl(point: Point, color?: string): void;
+    /**
+     * 绘制控制点列表
+     * @param shape 标注实例
+     */
+    drawCtrlList(shape: Rect | Polygon | Line | Circle | Ellipse): void;
+    /**
+     * 绘制label
+     * @param point 位置
+     * @param label 文本
+     */
+    drawLabel(point: Point, shape: AllShape): void;
+    /**
+     * 更新画布
+     */
+    update(): void;
+    /**
+     * 通过索引删除指定形状
+     * @param index number
+     */
+    deleteByIndex(index: number): void;
+    /**
+     * 通过uuid删除指定形状
+     * @param index string
+     */
+    deleteByUuid(uuid: string): void;
+    /**
+     * 计算缩放步长
+     */
+    calcStep(flag?: string): void;
+    /**
+     * 缩放
+     * @param type true放大5%，false缩小5%
+     * @param center 缩放中心 center|mouse
+     * @param pure 不绘制
+     */
+    setScale(type: boolean, byMouse?: boolean, pure?: boolean): void;
+    /**
+     * 适配背景图
+     */
+    fitZoom(): void;
+    /**
+     * 设置专注模式
+     * @param type {boolean}
+     */
+    setFocusMode(type: boolean): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+    /**
+     * 重新设置画布大小
+     */
+    resize(): void;
+}
+export {};

package/lib/shape/Brush.d.ts

@@ -0,0 +1,9 @@
+import Shape from './Shape';
+import { Point } from '../index';
+export default class Brush extends Shape {
+    type: number;
+    coor: Point[];
+    brushSize: number | undefined;
+    brushStokeStyle: string | undefined;
+    constructor(data: any, index: number, base: any);
+}

package/lib/shape/Circle.d.ts

@@ -0,0 +1,7 @@
+import Shape from './Shape';
+export default class Circle extends Shape {
+    type: number;
+    radius: number;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[][];
+}

package/lib/shape/Dot.d.ts

@@ -0,0 +1,5 @@
+import Shape from './Shape';
+export default class Dot extends Shape {
+    type: number;
+    constructor(item: any, index: number, base: any);
+}

package/lib/shape/Ellipse.d.ts

@@ -0,0 +1,11 @@
+import Shape from "./Shape";
+export default class Ellipse extends Shape {
+    type: number;
+    radiusX: number;
+    radiusY: number;
+    rotation: number;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[][];
+    get boundingBox(): any[][];
+    isPointInEllipse(pointX: number, pointY: number): boolean;
+}

package/lib/shape/Eraser.d.ts

@@ -0,0 +1,8 @@
+import Shape from './Shape';
+import { Point } from '../index';
+export default class Eraser extends Shape {
+    type: number;
+    coor: Point[];
+    eraserSize: number | undefined;
+    constructor(data: any, index: number, base: any);
+}

package/lib/shape/Grid.d.ts

@@ -0,0 +1,12 @@
+import Shape from './Shape';
+import Rect from './Rect';
+export default class Grid extends Shape {
+    type: number;
+    row: number;
+    col: number;
+    selected: number[];
+    selectedFillStyle: string | undefined;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[][];
+    get gridRects(): Rect[];
+}

package/lib/shape/Line.d.ts

@@ -0,0 +1,6 @@
+import Shape from './Shape';
+export default class Line extends Shape {
+    type: number;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[];
+}

package/lib/shape/Polygon.d.ts

@@ -0,0 +1,6 @@
+import Shape from './Shape';
+export default class Polygon extends Shape {
+    type: number;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[];
+}

package/lib/shape/Rect.d.ts

@@ -0,0 +1,12 @@
+import Shape from './Shape';
+export default class Rect extends Shape {
+    type: number;
+    /** 旋转角度（弧度） */
+    rotation: number;
+    /** 是否显示旋转控制点 */
+    showRotation: boolean | undefined;
+    constructor(item: any, index: number, base: any);
+    get ctrlsData(): any[][];
+    /** 获取矩形的中心点 */
+    get center(): [number, number];
+}

package/lib/shape/Shape.d.ts

@@ -0,0 +1,42 @@
+interface ShapeProp {
+    type: number;
+    [key: string]: any;
+}
+export default class Shape {
+    /** 标签 */
+    label: string;
+    /** 是否隐藏标签 */
+    hideLabel: boolean | undefined;
+    /** 坐标 */
+    coor: any[];
+    /** 边线颜色 */
+    strokeStyle: string | undefined;
+    /** 填充颜色 */
+    fillStyle: string | undefined;
+    /** 边线宽度 */
+    lineWidth: number | undefined;
+    /** 标签填充颜色 */
+    labelFillStyle: string | undefined;
+    /** 标签文字颜色 */
+    textFillStyle: string | undefined;
+    /** 标签文字字体 */
+    labelFont: string | undefined;
+    /** 标注类型 */
+    type: number | undefined;
+    /** 当前是否处于活动状态 */
+    active: boolean;
+    /** 当前是否处于创建状态 */
+    creating: boolean;
+    /** 当前是否处于拖拽状态 */
+    dragging: boolean;
+    /** 索引 */
+    index: number;
+    /** 唯一标识 */
+    uuid: string;
+    /** 向上展示label */
+    labelUp: boolean | undefined;
+    /** 隐藏标注 */
+    hide: boolean | undefined;
+    constructor(item: ShapeProp, index: number);
+}
+export {};

package/lib/tools.d.ts

@@ -0,0 +1 @@
+export declare function createUuid(): string;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "zkqh-canvas-select-one",
+  "version": "2.32.3",
+  "description": "一个用于图片标注的javascript库，基于canvas，简单轻量，支持矩形、多边形、点、折线、圆形、网格、画笔、橡皮擦",
+  "main": "lib/canvas-select.min.js",
+  "module": "lib/canvas-select.esm.js",
+  "types": "lib/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup -c -w",
+    "build": "cross-env NODE_ENV=production rollup -c"
+  },
+  "files": [
+    "/lib"
+  ],
+  "keywords": [
+    "canvas",
+    "marker",
+    "annotation",
+    "rect",
+    "polygon",
+    "dot",
+    "line",
+    "circle",
+    "grid",
+    "标注",
+    "矩形",
+    "多边形",
+    "点",
+    "折线",
+    "圆",
+    "网格",
+    "画笔",
+    "橡皮擦",
+    "电子围栏"
+  ],
+  "author": "heylight",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/parser": "^4.28.4",
+    "cross-env": "^7.0.3",
+    "rollup": "^4.29.1",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-serve": "^3.0.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "tslib": "^2.8.1"
+  }
+}