图片标记编辑器

简介

基于PIXI而封装的图片标记编辑器。

使用

引入PIXI

在项目中引入 PIXI 库

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

安装

npm install seasun-mark-editor --save

React 项目中使用

import {useRef, useEffect} from 'react';
import {ImageMarkEditor} from "seasun-mark-editor";

export const MarkEditor = (props) => {
    const {image} = props;
    const {width, height} = image;
    const containerRef = useRef(null);

    useEffect(() => {
        const options = {
            width,
            height,
            image,
        };
        const imageMarkEditor = new ImageMarkEditor(options);

        containerRef.current.appendChild(imageMarkEditor.view);

        return () => {
            imageMarkEditor.destroy();
        }
    }, []);

    return (<div ref={containerRef} className='canvas-container'></div>);
}

API

Class ImageMarkEditor

图片标记编辑器类

import {ImageMarkEditor} from 'seasun-mark-editor'

const image = new Image();
image.addEventListener("load", () => {
    const {width, height} = image;
    const editor = new ImageMarkEditor({
        width,
        height,
        image,
    })
    editor.on('selected', (data) => {
        // console.log("selected", data)
    })
    editor.on('updated', (data) => {
        // console.log('updated', data);
    })

    document.body.prepend(editor.view)
})
image.src = ImageData;

属性

| 属性名 | 属性描述 | |------|----------| | view | canvas元素 |

方法

| 方法名 | 方法描述 | |-------------------------------------------|-----------| | addMark(data:{x, y, width, height, text}) | 新增标记 | | removeMark(name):boolean | 删除标记 | | setMark(data:{name,text}}) | 设置标记 | | getMark():any[] | 获取标记 | | destroy() | 销毁编辑器 | | on() | 注册侦听事件 | | off() | 移除侦听事件 |

事件

| 事件名 | 事件描述 | |----------|---------| | selected | 选中标记的事件 | | updated | 更新标记的事件 |