@Artalor

Как реализовать поворот треугольника за курсором мыши?

Всем привет ребята, помогите решить задачу:
Нужно отобразить равнобедренный треугольник по центру экрана и он должен своим вершинным углом поворачиваться за курсором мыши, центр вращения - центр масс треугольника, написать нужно на чистом js, хотя бы какую-то подсказку, как я понимаю это работа с canvas
  • Вопрос задан
  • 2412 просмотров
Решения вопроса 2
yellow79
@yellow79
Senior Software Engineer
Рисуете треугольник, не важно в чём, хоть на канвасе, хоть PNG-шку вставьте. Далее, на onmousemove вычисляете угол между центром страницы, начальным положением вершины треугольника и положением мыши, ну и после задаёте вашему треугольнику свойство transform: rotate(Ndeg); где N полученный угол
Ответ написан
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
как я понимаю это работа с canvas

Совсем не обязательно. Треугольник можно вставить как картинку (формат SVG будет хорошим выбором), расположить его абсолютным/фиксированным позиционированием в нужном месте, а дальше к нему применять CSS-трансформацию "rotate". Пример того, как следить за мышкой и применять трансформации есть вот тут.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
QSem
@QSem
о себе?!
Я Вот так сделал:

Создал блочный елемент с id "triangle"

И в JS следующее:

var triangle = document.getElementById('triangle');

function getTriangleCenter() {
var x = triangle.offsetLeft + 50; // (50 + 50) / 2
var y = triangle.offsetTop + 65; // 130 / 2
return {
x: x,
y: y
};
}

document.addEventListener('mousemove', function(e) {
var triangleCenter = getTriangleCenter();
var angle = Math.atan2(e.clientX - triangleCenter.x, -(e.clientY - triangleCenter.y)) * (180 / Math.PI);

triangle.style.transform = 'rotate(' + angle + 'deg)';
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы