HTML5 Рисование с холстом, поворот линии?

Question

Работа над проектом с открытым исходным кодом, в котором у нас есть поворот холста HTML5, работающий для изображений и текста, - но я не могу понять, что отличает нас от фигур.

Исходный файл: https://github.com/kageurufu/FaceMaker/blob/master/js/facemaker.render.js

Line 239:

case FM.ShapeTypes.square: 
    case FM.ShapeTypes.line: 
    //As far as I can tell, a line is just a rect, and a square is really a rect 
    if (layer.shape_opt === 0) { 
     c.fillRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height)); 
    } else { 
     c.strokeRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height)); 
    } 

Это работает, чтобы сделать ширину динамическая линия предоставленные переменные: X, Y, ширина, высота.

Однако у нас есть переменная вращения, равная 0..360, и если> 0, ее необходимо применить. Для изображений и шрифтов, мы вращать холст, как это в строке 298:

c.save(); 
c.translate(x, y); 
c.rotate(rotation * (Math.PI/180)); 
// draw here 
c.restore(); 

Однако ... Я не могу понять, как сделать это с помощью линий. Здесь я прочитал другие связанные вопросы, но не понимаю, как настроить происхождение фигуры.

Answer 1

Чтобы повернуть линию вокруг центральной точки:

1. Вычислить ограничительную рамку линии: Minx, MinY, Maxx, MAXY

2. Перевести на ограничительной рамки центральной точки: перевод (Minx + (Maxx-Minx)/2, Miny + (Maxy-Miny)/2)

3. Поворот по желанию

4. Очистить с помощью первого невращающегося &, затем перевешивая холст.