Холст, множественный прямоугольник, вращение

Question

У меня есть CanVas, в который я добавляю Sevral Rectangles.I могу добавить текст в прямоугольник, который выбран сейчас. Я также реализую Sevral Другие функции в выбранном прямоугольнике, как Drag Them, Resize them.But Теперь моя задача состоит в том, чтобы повернуть прямоугольник, который выбран сейчас. Может ли кто-нибудь предложить, как это сделать, чтобы мой изменяющий размер функционал также работал с вращением одновременно. Я хочу сделать это в JavaScript.

Answer 1

Сохранить прямоугольник определения в JavaScript объекты & ставят Прямоугольник-объекты в массиве:

var rects=[]; 
rects.push({ 
    x:50,y:50, 
    w:50,h:35, 
    color:'green', 
    angle:0,deltaAngle:(Math.PI*2)/60, 
    scale:100,scaleDirection:1} 
); 
rects.push({ 
    x:150,y:50, 
    w:50,h:35, 
    color:'blue', 
    angle:0,deltaAngle:(Math.PI*2)/60, 
    scale:100,scaleDirection:1} 
); 

Затем вы можете сделать прямоугольники с вашими прообразами (перемещение, вращение, масштабирование) в наличии для следующего цикла :

Iterate массив и сделать каждый прямоугольник: for(var i=0; i<rects.length; i++)

• Сохранить untr ansformed context state.
• Перевести в центр прямоугольника. Происхождение [0,0] теперь находится в центральной точке прямоугольника.
• Шкала с заданным коэффициентом масштабирования.
• Повернуть на указанный угол.
• Нарисуйте прямоугольник. Поскольку начало координат находится в центре прямоугольника, смещение рисунка на -width/2, -height/2.
• Восстановить контекст к его нетрансформированному состоянию.

Иллюстрации результатов:

[Дополнение: получить угол мыши]

Вы можете получить угол мыши против центральной точки любого Rect как это:

var dx=mouseX-centerX; 
var dy=mouseY-centerY; 
var radianAngle=Math.atan2(dy,dx);