Изменяемые размеры фото при перетаскивании при повороте фотографии увеличиваются по диагонали, а не по оси - PullRequest
Новая
       17

Изменяемые размеры фото при перетаскивании при повороте фотографии увеличиваются по диагонали, а не по оси

1 голос
/ 30 января 2020

У меня есть фотографии с изменяемым размером, которые я изменяю при перетаскивании. Когда вращения нет, я расширяюсь по оси 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;
}
...