Рисование повернутого прямоугольника

Question

Я понимаю, что это может быть больше математической проблемой.

Чтобы нарисовать линии для моих прямоугольников, мне нужно найти их углы. У меня есть центр прямоугольника в (х, у) с определенной ширины и высоты.

Чтобы найти синие точки на не повернутом прямоугольнике сверху (угол = 0) Это

UL = (x-Width/2),(y+height/2)
UR = (x+Width/2),(y+height/2)
LR = (x+Width/2),(y-height/2)
LL = (x-Width/2),(y-height/2)

Как мне найти точки, если угол не равен 0?

Заранее спасибо.

---

Обновление: хотя на моем изображении (0,0) в качестве центральной точки, скорее всего, центральная точка не будет в этом месте.

Answer 1

Сначала преобразуйте центральную точку в 0,0

X '= X-x

Y '= Y-y

Затем поверните на угол A

X '' = (X-x) * cos A - (Y-y) * sin A

Y '' = (Y-y) * cos A + (X-x) * sin A

Снова преобразуйте центральную точку обратно в x, y

X '' '= (X-x) * cos A - (Y-y) * sin A + x

Y '' '= (Y-y) * cos A + (X-x) * sin A + y

Следовательно, вычислите для всех 4 точек (X, Y) следующее преобразование

X '' '= (X-x) * cos A - (Y-y) * sin A + x

Y '' '= (Y-y) * cos A + (X-x) * sin A + y

где x, y - центральные точки прямоугольника, а X, Y - угловые точки Вы не правильно определили даже угловые точки, когда Угол равен 0, как я дал в комментариях.

После замены вы получите

UL  =  x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
UR  =  x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A
BL =   x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
BR  =  x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A

Я думаю, что это подходит вашему решению.

Answer 2

Если «тета» - это угол поворота против часовой стрелки, то матрица вращения:

| cos(theta)  -sin(theta) |
| sin(theta)   cos(theta) |

т.е.

x' = x.cos(theta) - y.sin(theta)
y' = x.sin(theta) + y.cos(theta)

Если точка вращения не находится в начале координат, вычтите центр вращения из исходных координат, выполните вращение, как показано выше, а затем снова добавьте центр вращения.

Есть примеры других преобразований в http://en.wikipedia.org/wiki/Transformation_matrix

Answer 3

Матрица вращения (это становится часто задаваемыми вопросами)

Answer 4

См. 2D Вращение .

q = initial angle, f = angle of rotation.

x = r cos q 
y = r sin q

x' = r cos ( q + f ) = r cos q cos f - r sin q sin f 
y' = r sin ( q + w ) = r sin q cos f + r cos q sin f

hence:
x' = x cos f - y sin f
y' = y cos f + x sin f

Answer 5

Один из самых простых способов сделать это - определить местоположение точки до поворота, а затем применить преобразование координат. Поскольку он центрирован на (0,0), это просто случай использования:

x '= x cos (тета) - y sin (тета)

y '= y cos (тета) + x sin (тета)

Answer 6

используйте это .... У меня получилось ...

 ctx.moveTo(defaults.x1, defaults.y1);

    // Rotation formula
    var x2 = (defaults.x1) + defaults.lineWidth * Math.cos(defaults.rotation * (Math.PI / 180));
    var y2 = (defaults.y1) + defaults.lineWidth * Math.sin(defaults.rotation * (Math.PI / 180));

    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 90) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 90) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineWidth * Math.cos((defaults.rotation + 180) * (Math.PI / 180));
    y2 = (y2) + defaults.lineWidth * Math.sin((defaults.rotation + 180) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 270) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 270) * (Math.PI / 180));