介绍: 鼠标变成图章,点击后,在图片对应位置加盖公章功能。
如图所示:
源代码:
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/cdn@3.1.9/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>
)
}
}