React 实现拖动缩放和旋转效果

 用React框架实现了选择框的操作，可以通过4个点缩放框内的视频、文字、图片等内容，旋转后自动修订坐标点。

import React from 'react';
import ReactDOM from 'react-dom';

const rightDown = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "nw-resize",
    right: "-4px",
    bottom: "-4px"
}

const leftDown = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "ne-resize",
    left: "-4px",
    bottom: "-4px"
}

const rightUp = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "ne-resize",
    right: "-4px",
    top: "-4px"
}

const leftUp = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "nw-resize",
    left: "-4px",
    top: "-4px"
}

const right = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "e-resize",
    right: "-4px",
    top: "50%",
    marginTop: "-4px"
}

const left = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "e-resize",
    left: "-4px",
    top: "50%",
    marginTop: "-4px"
}

const up = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,
    fontSize: 0,
    cursor: "n-resize",
    top: "-4px",
    left: "50%",
    marginLeft: "-4px"
}

const down = {
    position: "absolute",
    background: "#000000",
    width: "10px",
    height: "10px",
    zIndex: 5,