react里面实现图片旋转效果

1.新建文件夹rotate.js

class RotateImg {
     
  constructor() {
     
      this.el = null;
  }
  init(cls) {
     
      this.el = document.getElementById(cls);
      // this.el = document.getElementsByClassName(cls)[0];
      return this;
  }
  DragStart() {
     
     this.el.onmousedown = (evt) => {
     
          var e = evt || window.event;

          var downX=e.pageX
          var downY=e.pageY

          this.DragIng();
          this.DragEnd(downX,downY)
      }
  }
  DragIng() {
     
      document.onmousemove = (evt) => {
     
          var e = evt || window.event;
      }
  }
  DragEnd(x,y) {
     
      document.onmouseup=(e) => {
     
          document.onmouseup = document.onmousemove = null;

          var upX=e.pageX
          var upY=e.pageY

          let disX=Math.abs(upX-x)
          let disY=Math.abs(upY-y)
          let z=Math.sqrt(disX*disX+disY*disY)

          let angle=Math.round(Math.asin(disY/z)/Math.PI*180)

          if(upX-x>0){
     
            this.el.style.transform=`rotate(${
       angle}deg)`
          }else{
     
            this.el.style.transform=`rotate(-${
       angle}deg)`
          }


      }
  }
}

export default new RotateImg()

2.使用

<button onClick={
     this.handleRotate}>图片旋转</button>

<Modal
    closable={
     false}
    destroyOnClose
    footer={
     null}
    onCancel={
     this.handleCancelRotate}
    onOk={
     this.handleOkRotate}
    visible={
     this.state.visibleRotate}
>
    <div id="rotateImg"
        style={
     {
     background:'url('+require('../../img/111.jpeg')+')',width:480,backgroundSize:'cover',height:600}}
    >

    </div>

3.index.js文件引入,调用

import Rotate from '../../js/rotate'

    handleRotate=()=>{
     
        this.setState({
     
            visibleRotate:true
        })

        setTimeout(()=>{
     
            Rotate.init('rotateImg').DragStart()
        },1000)
  }

Modal组件的背景颜色是白色的,最好设置为透明
效果如图：