image-marking

a image marking tool based on React

API

property	description	type	default
dataSource	数据源 data source	Array	[]
readOnly	是否只读 is read only or not	boolean	false
isDeleteConfirmOpen	是否开启删除确认框 have confirm when delete	boolean	true
deleteConfirm	删除确认框组件 delete confirm component	element	null
onChange	画布发生变化时的回调事件 canvas changed event	function	(event)=>{}
onContainerClick	容器单击事件 container click event	function	(event)=>{}
onContainerDblClick	容器双击事件 container double click event	function	(event)=>{}
onShapeClick	图形单击事件 shape lick event	function	()=>{element}
onShapeDblClick	图形双击事件 shape double click event	function	(element)=>{}
onShapesDelete	图形批量删除事件 shapes delete event	function	(elements)=>{}
onShapeMove	图形移动事件 shape move event	function	(event)=>{}
onShiftShapeClick	按住 shift 键情况下的单击事件 shift click event	function	(elements)=>{}
onGroup	组合事件 group event	function	(elements)=>{}
setShapeAttr	根据 shapeId 设置某个图形的属性 set shape attribute by shapeId	function	(selector, attributeObject)=>{}
getElementsActive	获取当前所有选中图形 get elements actived	function	()=>{}
select	根据选择器获取单个图形 get element by selector	function	(selector)=>{}
selectAll	根据选择器获取多个图形 get elements by selector	function	(selector)=>{}
highlightShapesBySelector	根据选择器高亮多个图形 highlight elements by selector	function	(selector)=>{}
getShapesData	获取当前画布数据 get data from canvas	function	()=>{}

DEMO

demo.jsx

import React, { Component } from 'react';
import ImageMarking from '../src/index';
import { DATA1, DATA2 } from './data';
import { Modal } from 'antd';

export default class Demo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: DATA2.shapes,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      // 根据 shapeId 设置某个图形的属性
      this.imageMarkingRef.setShapeAttr('[shape_id=id003]', {
        fill: 'lightblue',
      });

      // 获取当前所有选中图形
      const elementsActived = this.imageMarkingRef.getElementsActived();
      console.log('elementsActived', elementsActived);

      // 获取 ImageMarking 中的 snap 实例，可通过 snap 调用 Snapsvg API
      const snap = this.imageMarkingRef.snap;
      console.log('snap', snap);

      // 根据选择器获取单个图形
      const shape = this.imageMarkingRef.select('[shape_id=id002]');
      console.log('shape', shape);

      // 根据选择器获取多个图形
      const shapes = this.imageMarkingRef.selectAll(
        '[shape_id=id002],[shape_id=id001]'
      );
      console.log('shapes', shapes);

      // 根据选择器高亮多个图形
      const shapesHighlight = this.imageMarkingRef.highlightShapesBySelector(
        '[shape_id=id002],[shape_id=id001]'
      );
      console.log('shapesHighlight', shapesHighlight);

      // 获取当前画布数据
      const shapesData = this.imageMarkingRef.getShapesData();
      console.log('shapesData', shapesData);

      setTimeout(() => {
        this.setState(
          {
            dataSource: DATA1.shapes,
          },
          () => {
            console.log('data change done');
          }
        );
      }, 500);
    }, 1000);
  }

  onContainerClick(e) {
    console.log('onContainerClick', e);
  }

  onContainerDblClick(e) {
    console.log('onContainerDblClick', e);
  }

  onShapeClick(element) {
    // 获取图形ID shapeId
    const shapeId = element.node.getAttribute('shape_id');

    console.log('onShapeClick', shapeId, element);
  }

  onShapeDblClick(element) {
    // 获取图形ID shapeId
    const shapeId = element.node.getAttribute('shape_id');
    console.log('onShapeDblClick', shapeId, element);
  }

  onShapesDelete(elements) {
    const shapeIds = [];
    elements &&
      elements.forEach(element => {
        const shapeId = element.node.getAttribute('shape_id');
        shapeIds.push(shapeId);
      });

    console.log('onShapesDelete', shapeIds, elements);
  }

  onShiftShapeClick(elements) {
    const shapeIds = [];
    elements &&
      elements.forEach(element => {
        const shapeId = element.node.getAttribute('shape_id');
        shapeIds.push(shapeId);
      });
    console.log('onShiftClick', shapeIds, elements);
  }

  onShapeMove(e) {
    console.log('onShapeMove', e);
  }

  onChange = (data) => {
    console.log('onChange', data);
    this.setState({ dataSource: data });
  }

  onGroup(elements) {
    console.log('onGroup', elements);
  }

  render() {
    const { dataSource } = this.state;

    const deleteConfirm = (
      <Modal
        title="自定义删除"
        visible
        onOk={() => {
          this.imageMarkingRef.setDeleteConfirmVisible(false);
          this.imageMarkingRef.deleteShapesActived();
        }}
        onCancel={() => {
          this.imageMarkingRef.setDeleteConfirmVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        亲，确定删除吗？
      </Modal>
    );

    return (
      <div className="demo-container">
        <img
          className="demo-image"
          src="https://img.alicdn.com/tfs/TB1ICO3bA5E3KVjSZFCXXbuzXXa-800-533.png"
        />
        <ImageMarking
          className="custom-classname"
          ref={ref => {
            this.imageMarkingRef = ref;
          }}
          dataSource={dataSource}
          readOnly={false} // 是否只读
          isDeleteConfirmOpen // 是否开启删除确认框
          deleteConfirm={deleteConfirm} // 删除确认框组件
          onChange={this.onChange} // 画布发生变化时的回调事件
          onContainerClick={this.onContainerClick} // 容器单击事件
          onContainerDblClick={this.onContainerDblClick} // 容器双击时间
          onShapeClick={this.onShapeClick} // 图形单击事件
          onShapeDblClick={this.onShapeDblClick} // 图形双击事件
          onShapesDelete={this.onShapesDelete} // 图形批量删除事件
          onShapeMove={this.onShapeMove} // 图形移动事件
          onShiftShapeClick={this.onShiftShapeClick} // 按住 shift 键情况下的单击事件
          onGroup={this.onGroup} // 组合事件
        />
      </div>
    );
  }
}

data.js

export const DATA1 = {
  version: '3.10.1',
  flags: {},
  shapes: [{
    shape_id: 'id001',
    label: 'ql_1',
    line_color: null,
    fill_color: null,
    highlight: true,
    points: [
      [658, 280],
      [476, 273],
      [655, 422],
      [829, 294],
      [829, 294],
    ],
    shape_type: 'polygon',
  },
  {
    shape_id: 'id002',
    label: 'ql_2',
    line_color: null,
    fill_color: null,
    points: [
      [
        160,
        160,
      ],
      [
        200,
        200,
      ],
      [
        160,
        300,
      ],
      [
        217,
        216,
      ],

    ],
    shape_type: 'polyline',
  },
  {
    shape_id: 'id003',
    label: 'ql_1',
    line_color: null,
    fill_color: null,
    points: [
      [362, 101],
      [439, 264],
      [629, 121],
    ],
    shape_type: 'polygon',
  },
  ],
}

export const DATA2 = {
  version: '3.10.1',
  flags: {},
  shapes: [
    {
      shape_id: 'id003',
      label: 'ql_1',
      line_color: null,
      fill_color: null,
      points: [
        [362, 101],
        [439, 264],
        [629, 121],
      ],
      shape_type: 'polygon',
    },
  ],
}