在javascript中创建可调整大小/拖动/旋转视图

我一直在尝试在Javascript中创建如下内容：

如您所见，可以拖动、旋转和调整容器的大小。大多数事情都可以正常工作，但当容器旋转时，容器的大小调整会产生奇怪的输出

我预计这种情况会发生：

相反，我得到的是：

以下是完整的代码：

或者

var-box=document.getElementById（“box”）；
var-boxWrapper=document.getElementById（“包装盒”）；
变量initX、initY、mousePressX、mousePressY、initW、initH、initRotate；
函数元素（x，y）{
boxWrapper.style.left=x；
boxWrapper.style.top=y；
}
函数大小调整（w，h）{
box.style.width=w+‘px’；
box.style.height=h+‘px’；
boxWrapper.style.width=w；
boxWrapper.style.height=h；
}
函数getCurrentRotation（el）{
var st=window.getComputedStyle（el，null）；
var tm=st.getPropertyValue（“-webkit转换”）||
st.getPropertyValue（“-moz转换”）||
st.getPropertyValue（“-ms转换”）||
st.getPropertyValue（“-o-transform”）||
st.getPropertyValue（“转换”）
“无”；
如果（tm！=“无”）{
var values=tm.split（“（”）[1]。split（“）”）[0]。split（“，”）；
var angle=Math.round（Math.atan2（值[1]，值[0]）*（180/Math.PI））；
返回（角度<0？角度+360：角度）；
}
返回0；
}
功能旋转盒（度）{
boxWrapper.style.transform=`rotate（${deg}deg）`；
}
//拖架
addEventListener（'mousedown'，函数（事件）{
if（event.target.className.indexOf（“点”）>-1）{
返回；
}
initX=this.offsetLeft；
initY=this.offsetTop；
mousePressX=event.clientX；
mousePressY=event.clientY；
函数eventMoveHandler（事件）{
重新定位元素（initX+（event.clientX-mousePressX）+“px”，
initY+（event.clientY-mousePressY）+“px”）；
}
addEventListener（'mousemove'，eventMoveHandler，false）；
window.addEventListener（'mouseup'，function（）{
removeEventListener（'mousemove'，eventMoveHandler，false）；
}，假）；
}，假）；
//完成拖动支持
//手柄调整大小
var rightMid=document.getElementById（“rightMid”）；
var leftMid=document.getElementById（“leftMid”）；
var topMid=document.getElementById（“topMid”）；
var bottomMid=document.getElementById（“bottom-mid”）；
var leftTop=document.getElementById（“左上”）；
var rightop=document.getElementById（“右上”）；
var rightBottom=document.getElementById（“右下”）；
var leftBottom=document.getElementById（“左下”）；
函数resizeHandler（事件，left=false，top=false，xResize=false，yResize=false）{
initX=boxWrapper.offsetLeft；
initY=boxWrapper.offsetTop；
mousePressX=event.clientX；
mousePressY=event.clientY；
initW=box.offsetWidth；
initH=box.offsetHeight；
initRotate=getCurrentRotation（boxWrapper）；
函数eventMoveHandler（事件）{
var wDiff=event.clientX-mousePressX；
var hDiff=event.clientY-mousePressY；
var newW=initW，newH=initH，newX=initX，newY=initY；
如果（调整大小）{
如果（左）{
newW=initW-wDiff；
newX=initX+wDiff；
}否则{
newW=initW+wDiff；
}
}
if（yResize）{
如果（顶部）{
newH=initH-hDiff；
newY=initY+hDiff；
}否则{
newH=initH+hDiff；
}
}
调整大小（newW，newH）；
重新定位元素（newX，newY）；
}
addEventListener（'mousemove'，eventMoveHandler，false）；
window.addEventListener（'mouseup'，function（）{
removeEventListener（'mousemove'，eventMoveHandler，false）；
}，假）；
}
addEventListener（'mousedown'，e=>resizeHandler（e，false，false，true，false））；
addEventListener（'mousedown'，e=>resizeHandler（e，true，false，true，false））；
addEventListener（'mousedown'，e=>resizeHandler（e，false，true，false，true））；
addEventListener（'mousedown'，e=>resizeHandler（e，false，false，false，true））；
addEventListener（'mousedown'，e=>resizeHandler（e，true，true，true））；
addEventListener（'mousedown'，e=>resizeHandler（e，false，true，true））；
addEventListener（'mousedown'，e=>resizeHandler（e，false，false，true，true））；
addEventListener（'mousedown'，e=>resizeHandler（e，true，false，true，true））；
//手柄旋转
var rotate=document.getElementById（“rotate”）；
rotate.addEventListener（'mousedown'，函数（事件）{
//if（event.target.className.indexOf（“点”）>-1）{
//返回；
// }
initX=this.offsetLeft；
initY=this.offsetTop；
mousePressX=event.clientX；
mousePressY=event.clientY；
var arrow=document.querySelector（“#框”）；
var arrowRects=arrow.getBoundingClientRect（）；
var arrowX=arrowRects.left+arrowRects.width/2；
变量arrowY=arrowRects.top+arrowRects.height/2；
函数eventMoveHandler（事件）{
var angle=Math.atan2（event.clientY-arrowY，event.clientX-arrowX）+Math.PI/2；
旋转盒（角度*180/数学π）；
}
addEventListener（'mousemove'，eventMoveHandler，false）；
window.addEventListener（'mouseup'，function（）{
removeEventListener（'mousemove'，eventMoveHandler，false）；
}，假）；
}，假）；
调整大小（300200）；
重新定位元件（100100）
.box{
背景色：#00BCD4；
位置：相对位置；
用户选择：无；
}
.包装盒{
位置：绝对位置；
变换原点：中心；
用户选择：无；
}
多特先生{
高度：10px；
宽度：10px；
背景色：#1E88E5；
位置：绝对位置；
边界半径：100px；
边框：1px纯白；
用户选择：无；
}
.dot:悬停
.box {
    transform: translate(-50%, -50%);
}
.box-wrapper {
    transform-origin: top left; /* changed from `center center` */
}

if (xResize) {
    if (left) {
        newW = initW - wDiff;
    } else {
        newW = initW + wDiff;
    }
    newX += 0.5 * wDiff;
}
if (yResize) {
    if (top) {
        newH = initH - hDiff;
    } else {
        newH = initH + hDiff;
    }
    newY += 0.5 * hDiff;
}

var initRadians = initRotate * Math.PI / 180;
var cosFraction = Math.cos(initRadians);
var sinFraction = Math.sin(initRadians);
//...
var wDiff = (event.clientX - mousePressX);
var hDiff = (event.clientY - mousePressY);
var rotatedWDiff = cosFraction * wDiff + sinFraction * hDiff;
var rotatedHDiff = cosFraction * hDiff - sinFraction * wDiff;
//...
if (xResize) {
    if (left) {
        newW = initW - rotatedWDiff;
    } else {
        newW = initW + rotatedWDiff;
    }
    //...
}
if (yResize) {
    if (top) {
        newH = initH - rotatedHDiff;
    } else {
        newH = initH + rotatedHDiff;
    }
    //...
}


if (xResize) {
   //...
   newX += 0.5 * rotatedWDiff * cosFraction;
   newY += 0.5 * rotatedWDiff * sinFraction;
}
if (yResize) {
   //...
   newX -= 0.5 * rotatedHDiff * sinFraction;
   newY += 0.5 * rotatedHDiff * cosFraction;
}

const minWidth = 40;
const minHeight = 40;
//...
if (xResize) {
    if (left) {
        newW = initW - rotatedWDiff;
        if (newW < minWidth) {
          newW = minWidth;
          rotatedWDiff = initW - minWidth;
        }
    } else {
        newW = initW + rotatedWDiff;
        if (newW < minWidth) {
          newW = minWidth;
          rotatedWDiff = minWidth - initW;
        }
    }
    //..
}
if (yResize) {
    if (top) {
        newH = initH - rotatedHDiff;
        if (newH < minHeight) {
          newH = minHeight;
          rotatedHDiff = initH - minHeight;
        }
    } else {
        newH = initH + rotatedHDiff;
        if (newH < minHeight) {
          newH = minHeight;
          rotatedHDiff = minHeight - initH;
        }
    }
    //...
}

window.addEventListener('mouseup', function() {
    window.removeEventListener('mousemove', eventMoveHandler, false);
}, false);

window.addEventListener('mouseup', function eventEndHandler() {
    window.removeEventListener('mousemove', eventMoveHandler, false);
    window.removeEventListener('mouseup', eventEndHandler, false);
}, false);