javascript - 旋转照片时可调整大小的照片在对角线而非 x 轴上展开

Question

我有可调整大小的照片，可以在拖动时调整大小。当没有旋转时，我通过获取 X 当前鼠标并拖动下一个 X 鼠标位置在 x 轴上展开。

我的照片也可以旋转，所以当照片旋转时，我不想通过鼠标在 x 轴上移动的像素来扩展照片，而是从照片旋转的对角线。有没有办法做到这一点？

https://jsfiddle.net/p1j9nys5/4/

我想要的是当我扩展第二个 div（旋转的）时，扩展是从箭头方向的对角线而不是 X 轴计算的。

<div class="container">
  <div class='img'>
    <div class="expand-btn">
      <span></span>
      <span></span>
    </div>
  </div>
</div>
<div class="container">
  <div class='img'>
    <div class="expand-btn">
      <span></span>
      <span></span>
    </div>
  </div>
</div>

const divs = [...document.getElementsByClassName('img')];
divs.forEach(div => {
    div.addEventListener('mousedown', startDrag);
});

let posX;
let posY;
let node;
function startDrag(e){
    node = e.currentTarget;
    posX = e.clientX;
    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', stopDrag);
}
function resize(e){
    const nextPosX = e.pageX;
    node.style.width = node.offsetWidth + (nextPosX - posX) + 'px';
    posX = nextPosX;
}
function stopDrag(e){
    document.removeEventListener('mousemove', resize);
    document.removeEventListener('mouseup', stopDrag);
}

.container{
  position: absolute;
  display: inline-block;
}
.container:nth-child(2){
  top: 160px;
  left: 50px;
  transform: rotate(-60deg);
}
.img{
  width: 100px;
  padding-bottom: 100%;
  background: blue;
}
.img div{
  top: 42.5%;
  right: 10%;
  width: 15%;
  height: 15%;
  position: absolute;
  transform: rotate(45deg);
}
div span{
  position: absolute;
  display: block;
}
div span:nth-child(1){
  height: 20%;
  width: 100%;
  background: red;
}
div span:nth-child(2){
  right: 0%;
  height: 100%;
  width: 20%;
  background: red;
}

标签： javascripthtmlcssrotationaxis