Вращение и перевод изображения Javascript

avatar
Manas Tyagi
9 августа 2021 в 06:09
139
2
0

У меня есть 4 изображения, связанные друг с другом, которые образуют большое изображение. Моя задача — повернуть большое изображение на определенный угол, который вводит пользователь. Теперь, чтобы повернуть полное изображение, мне нужно повернуть меньшие соединенные изображения, а затем соответствующим образом преобразовать их, чтобы полные изображения выглядели повернутыми.

Но не удается правильно получить координаты перемещения. Пожалуйста, помогите мне с этим. Кроме того, если есть какой-либо другой способ сделать это, вы также можете сказать мне об этом.

Код можно найти здесь - https://jsfiddle.net/e4qp6btx/1/

document.getElementById("img1").style.transform = "translate(" + x + "px," + y + "px) rotate(" + angle + "deg)" ;

Редактировать - На самом деле я хочу вращать и переводить отдельные изображения, а не весь контейнер.

Источник
Rickard Elimää
9 августа 2021 в 06:12
0

Я бы просто перевернул контейнер.

Manas Tyagi
9 августа 2021 в 06:26
0

И как бы я это сделал? Можете ли вы помочь мне с кодом?

Ответы (2)

avatar
Rickard Elimää
9 августа 2021 в 17:48
0

Второе решение.

По умолчанию вращение происходит от центра изображения. Вы можете изменить это, установив transform-orgin. Следующий CSS заставит изображения вращаться так, как они должны, поэтому вам не нужно их переводить. Вероятно, вам следует Франкенштейн объединить два моих ответа, потому что вам едва ли нужен какой-либо код для работы вашего rotateImage().

#img1 {
  transform-origin: bottom right;
}

#img2 {
  transform-origin: bottom left;
}

#img4 {
  transform-origin: top right;
}

#img3 {
  transform-origin: top left;
}

Обратите внимание: вы перепутали позиции #img4 и #img3, где #img4 стоит перед #img3, следовательно, эти изображения имеют перепутанные источники преобразования.

Дополнительный бонус:

Я считаю расточительным устанавливать одно и то же значение для четырех разных элементов, поэтому я предлагаю использовать переменную CSS для .container, чтобы сохранить значение поворота для всех изображений. Было бы проще тестировать разные значения в Инспекторе, если бы вы делали это так.

CSS

.container {
  --image-rotation: 0deg;

  width:500px;
  height:500px;
  padding: 50px;
}

img {
  width:100%;
  height:100%;
  
  transform: rotate(var(--image-rotation));
}

Javascript

 rotateImage() {
    const imgContainer = document.querySelector('.container');
    let angle = document.getElementById('angle').value || 0; //angle to be rotated by
    angle = angle % 360 + 'deg';

    imgContainer.style.setProperty('--image-rotation', angle);
  }

https://jsfiddle.net/mg46dz7h/

Manas Tyagi
9 августа 2021 в 22:23
0

Привет, Рикард, спасибо за решение. Допустим, у вас есть несколько изображений, образующих большое изображение. В этом случае вы не сможете сделать это. В этом случае вам придется поворачивать каждое изображение и переводить его. Вы можете понять эту формулу перевода?

avatar
Rickard Elimää
9 августа 2021 в 06:46
0

Я бы просто выбрал контейнер и повернул его. Однако при попытке использовать Mac Firefox между изображениями меньшего размера были небольшие промежутки.

rotateImage() {
    var angle = document.getElementById('angle').value || 0; //angle to be rotated by
    angle = angle % 360 + 'deg';

    document.querySelector('.container').style.transform = `rotate(${angle})`;
}

Я бы также использовал CSS-переменную, чтобы установить угол, а затем обновить переменную вместо использования встроенного стиля для изменения значения transform: rotate.

Наконец, я бы дал контейнеру уникальный id.

Manas Tyagi
9 августа 2021 в 07:32
0

Привет, Рикард, решение, которое у тебя есть, было полезным, но я на самом деле не хочу вращать весь контейнер. Я действительно хочу вращать и переводить отдельные изображения.