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

Question

[Artalor]

Всем привет ребята, помогите решить задачу:
Нужно отобразить равнобедренный треугольник по центру экрана и он должен своим вершинным углом поворачиваться за курсором мыши, центр вращения - центр масс треугольника, написать нужно на чистом js, хотя бы какую-то подсказку, как я понимаю это работа с canvas

Answer 1

[Andrey Tsvetkov]

Рисуете треугольник, не важно в чём, хоть на канвасе, хоть PNG-шку вставьте. Далее, на onmousemove вычисляете угол между центром страницы, начальным положением вершины треугольника и положением мыши, ну и после задаёте вашему треугольнику свойство transform: rotate(Ndeg); где N полученный угол

Comments

[Artalor]

А как вычислить этот угол, можете подсказать?

[Andrey Tsvetkov]

Как-то примерно так, но надо что-то придумать с переходом от 360 к 0 и обратно. Но я уверен, вы справитесь

function countAngle(e) {
    var x = e.clientX,
        y = e.clientY,
        height = window.innerHeight,
        width  = window.innerWidth,
        deltaX = x - width / 2,
        deltaY = y - height / 2,
        angle = Math.asin(deltaX / Math.sqrt(deltaY * deltaY + deltaX * deltaX)) * 180 / Math.PI;
    
    if (y > height / 2) {
        angle = 180 - angle;
    }
    console.log(angle);
}

Answer 2

[Ivan Bogachev]

как я понимаю это работа с canvas

Совсем не обязательно. Треугольник можно вставить как картинку (формат SVG будет хорошим выбором), расположить его абсолютным/фиксированным позиционированием в нужном месте, а дальше к нему применять CSS-трансформацию "rotate". Пример того, как следить за мышкой и применять трансформации есть вот тут.

Answer 3

[Дядя Ваня]

Я Вот так сделал:

Создал блочный елемент с 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)';
});