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',
    },
  ],
}