Вычислить 2D-поворот HTML-холста JavaScript
Реализовал холст, Рисуем там квадрат и получаем рассчитанные координаты,
На следующем рисунке вы можете увидеть рисунок:
Я вычисляю и получаю координаты верхней точки X и Y,
И для нужных мне нижних правых координат я добавляю высоту и ширину следующим образом:
{ upLeft: { x: position.x, y: position.y }, downRight: { x: position.x + position.width, y: position.y + position.height } },
Теперь я хочу получить те же размеры при повороте холста по или против часовой стрелки. Итак, у меня есть угол, и я пытаюсь вычислить его с помощью следующей функции:
function getRotatedCoordinates(cx, cy, x, y, angle) {
let radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (cos * (y - cy)) + (sin * (x - cx)) + cy;
return [nx, ny];
}
И я вызываю функцию через следующие аргументы и использую ее.
let newCoords = getRotatedCoordinates(0, 0, position.x, position.y, angle);
position.x = newCoords[0];
position.y = newCoords[1];
Итак, во-первых, я не уверен, что точки cx и cy верны, я всегда ввожу 0 для них обоих. Во-вторых, я не получаю желаемых результатов. Они меняются, но я почти уверен, что что-то не так с x и y, поэтому я предполагаю, что функция неправильная. Спасибо.
@ChrisG, спасибо, посмотрите, как я его использую, я меняю position.x и position.y в соответствии с тем, что я уже получаю от функции, так что проблема все еще есть.
@ChrisG Действительно, но только здесь не в моем собственном коде :).
@CBroe Я эту функцию не писал, другой функции для вычисления матрицы не нашел. Я предполагаю, что cx и cy являются начальной точкой координат, и поэтому я выбираю 0,0
Если вы поворачиваете холст вокруг его центральной точки (?), Но прямоугольник не имеет размер одно и тоже, как ваш холст - тогда вам, конечно, придется каким-то образом учитывать смещение прямоугольника относительно центральной точки холста.
Чтобы было ясно, как вы используете функцию, вы вращаете вектор положения вокруг начала координат. Этот код определенно изменит положение, пока угол не равен нулю, поэтому вопрос в том, как вы используете новые координаты. В сочетании с вашим первым фрагментом вы не вращаете прямоугольник, а просто перемещаетесь вокруг его верхнего левого угла. Чтобы повернуть прямоугольник, нужно повернуть все его углы.
@CBroe Это то, о чем я подумал, спасибо.
@ChrisG, верно, у меня вопрос, как мне повернуть все углы?
Вместо этого вы можете перемещать и вращать холст, если речь идет только о рисовании прямоугольника. Если вам действительно нужно изменить его координаты, вам нужен другой подход. Вот пример кода: jsfiddle.net/kyehsxm3
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот как бы я это сделал:
function getRectangeCoordinates(x, y, width, height, angle) {
let points = [ [x, y] ]
let radians = (Math.PI / 180) * angle;
x += Math.cos(radians) * width;
y += Math.sin(radians) * width;
points.push([x, y])
radians += Math.PI / 2
x += Math.cos(radians) * height;
y += Math.sin(radians) * height;
points.push([x, y])
radians += Math.PI / 2
x += Math.cos(radians) * width;
y += Math.sin(radians) * width;
points.push([x, y])
return points
}
let canvas = document.createElement("canvas");
canvas.width = canvas.height = 140
let ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
let coords = getRectangeCoordinates(20, 10, 120, 40, 15)
console.info(JSON.stringify(coords))
for (let i = 0; i < 4; i++) {
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 3, 0, 8);
ctx.moveTo(coords[i][0], coords[i][1]);
let next = (i + 1) % 4
ctx.lineTo(coords[next][0], coords[next][1]);
ctx.stroke();
}
ctx.strokeStyle = "red";
coords = getRectangeCoordinates(60, 40, 40, 50, 65)
for (let i = 0; i < 4; i++) {
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 5, 0, 8);
ctx.moveTo(coords[i][0], coords[i][1]);
let next = (i + 1) % 4
ctx.lineTo(coords[next][0], coords[next][1]);
ctx.stroke();
}
ctx.strokeStyle = "blue";
coords = getRectangeCoordinates(120, 3, 20, 20, 45)
for (let i = 0; i < 4; i++) {
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 2, 0, 8);
ctx.moveTo(coords[i][0], coords[i][1]);
let next = (i + 1) % 4
ctx.lineTo(coords[next][0], coords[next][1]);
ctx.stroke();
}В getRectangeCoordinates я возвращаю все углы прямоугольника, а параметры функции - это верхний левый угол (x, y), высота и ширина прямоугольника и последний угол.
Я рисую несколько прямоугольников разной формы и под разными углами, чтобы показать, как это выглядит.
Вычисления в функции представляют собой простую тригонометрию, вот визуальное представление, которое может помочь вам вспомнить это в следующий раз, когда оно вам понадобится:
конечно я использую результаты, спасибо, я изменю это