ant design pro 实现审核图片盖章功能

介绍： 鼠标变成图章，点击后，在图片对应位置加盖公章功能。

如图所示：

源代码：

import { Card, Modal} from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
const { confirm } = Modal;
@connect(({ project, loading }) => ({
    project: project,
    loading: loading.models.project,
}))
@Form.create()

export default class AidCheck extends Component {

    constructor(porps) {
        super(porps);
        this.state = {
            value: {
                files:[]
            },
            //后台需要数据
            pointerArr:[],
            //鼠标图案
            cursorImg:'url(https://cdn.jsdelivr.net/gh/moezx/[email protected]/img/Sakura/cursor/normal.cur), auto',
            //章图案
            chapterImg:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1523059142,3498552467&fm=26&gp=0.jpg'

        }
    }

    componentDidMount = () => {
        document.getElementById('img').style.cursor = this.state.cursorImg
    }


    handleSeal = () => {//盖章
      //提交pointerArr数据给后台
    }
    handCancelSeal = () => { //取消盖章
        let paras = document.getElementsByClassName('chapterImg');
        while (paras[0]) {
            paras[0].parentNode.removeChild(paras[0]);
        }
        this.setState({
            pointerArr:[]
        })
    }
    getPosition = (e,index)=>{
        e.persist()
        const { chapterImg } = this.state
        let x = e.clientX - e.target.x;
        let y = e.clientY - e.target.y;
        //或者
        //let x = Math.abs(currentE.clientX - currentE.target.x);
        //let y = Math.abs(currentE.clientY - currentE.target.y);
        let arr = []

        confirm({
            title: '确认在此处盖章嘛?',
            content: '',
            okText: '确认',
            cancelText: '取消',
            onOk:()=>{
                let IMG = document.createElement('img')
                IMG.src = chapterImg
                IMG.style.width = '130px'
                IMG.style.height = '130px'
                IMG.className = 'chapterImg'
                IMG.style.position = 'absolute'
                IMG.style.top = e.pageY - 180 +'px'
                IMG.style.left = x-40+'px' 
                //或者 
                //IMG.style.left = currentE.clientX - (currentE.target.offsetLeft + currentE.target.offsetWidth + 250 )+'px'
                document.getElementById('img').appendChild(IMG)
                arr.push({
                    index,
                    x,
                    y
                })
                this.setState({
                    pointerArr:arr
                })
            },
            onCancel() {
              console.log('Cancel');
            },
        });
        console.log(e,index ,x,y)
        console.log(x,y,'---')
    }

    render() {
        const { value} = this.state;
        return (
              <Card bordered={false} title="协议预览" style={{flex:1,marginLeft:'10px',position:'relative'}} id='img'>
                  {value.files.map((i,index)=><img src={i.sourceUrl} style={{ width: '595px', height: 'auto', display:'block'}} onClick={(e)=>this.getPosition(e,index)}/>)}
              </Card> 
        )
    }
}

备注：网抑云时间到了