HTML5 Canvas вращает проблемы

Question

У меня есть элемент canvas, на котором я рисую несколько изображений и накладываю их на текст.К сожалению, проблема требует поворота некоторых из этих изображений и соответствующего текста.К этому добавилась проблема с тем, что на некоторых изображениях должен быть соответствующий цвет фона (изображения - это простые контуры столов для плана этажа)

Вот функция, которую я построил для обработки добавления одного стола кплан.У меня проблема в том, что при использовании поворота ни текст, ни цвета фона не отображаются, в то время как они отображаются правильно, если я не поворачиваю изображение, за исключением того, что они не поворачиваются, а фон fillRect () ориентирован на 90 градусов.выкл.

function redrawDesk(desk, ctx, color) {
    var rotate = desk.rotation == 90 || desk.rotation == 270;
    if (rotate) {
        ctx.save();
        ctx.rotate(Math.PI / 2);

        ctx.clearRect(desk.left, desk.top, desk.width, desk.height);
        ctx.restore()
    }

    var img = $("#desk_" + desk.rowID)[0];
    ctx.drawImage(img, desk.left, desk.top, desk.height, desk.width);

    var x = desk.left;
    var y = desk.top;
    var h = desk.height;
    var w = desk.width;

    if (rotate) {
        //ctx.save()
        ctx.rotate(Math.PI / 2);
        var tmp=x;
        x=y;
        y=tmp;
        tmp=h;
        h=w;
        w=tmp;
    }        
    ctx.textAlign = "center";

    ctx.fillText(desk.deskID, x + w / 2,y + h/ 2);
    if (color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, w, h);
    }
    //ctx.restore();
    if (rotate) {

        ctx.rotate(Math.PI / -2);
    }
}

Спасибо

Answer 1

Основная проблема в том, что вы определяете стол и текст как абсолютные координаты.

Определить объекты в локальной системе координат.Например, у стола есть высота и ширина, но нет позиции.Его ничья относительно себя (около 0,0)

const desk = {
    w : 10, h : 10,
    color : "blue",
    draw() {
       ctx.fillStyle = this.color;
       ctx.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
    }
};

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

function drawObj(obj, x, y) { // what to draw and where
    ctx.setTransform(1,0,0,1,x,y);  // Same as ctx.translate if 2D API is in default context
                                    // The means you do not have to use ctx.save and 
                                    // ctx.restore in this function
    obj.draw();  // draw desk
}    

Для полного преобразования это почти то же самое

function drawObj(obj, x, y, scale, rotate) { // rotate is in radians
    ctx.setTransform(scale, 0, 0, scale, x, y);  
    ctx.rotate(rotate);
    obj.draw();  
}    

Чтобы добавить текст, вы можете добавить его в качестве объекта на стол и нарисовать его в собственной локальной системе координат

desk.name = {
    text : "Desk",
    color : "black",
    font : "bold " + 20 + "px Calibri",
    draw() {  
        ctx.font = this.font;
        ctx.textAlign = "center";
        ctx.fillStyle = this.color;
        ctx.fillText(this.text, 0,0);
    }
};

Теперь вы можете нарисовать стол и имя, используя функцию рисования объекта

drawObj(desk,200, 200, 1, Math.PI / 2); // Draw at 200,200 rotated 90deg CW
drawObj(desk.name, 200, 200, 1, Math.PI / 2); // draw the text rotated same and centered over desk

// Or if the text should be above and not rotated
drawObj(desk.name, 200, 200 - 30, 1, 0);

Поскольку в вышеприведенных функциях используется setTransform, вам может понадобиться восстановить преобразование.Есть два способа сделать это.

ctx.resetTransform(); // Check browser support for this call

ctx.setTransform(1,0,0,1,0,0); // same as above just does it manaly

Answer 2

В моем коде я проверил, есть ли необходимость вращения. Если так, я установил перевод на холст, чтобы дать мне новую начальную точку: ctx.translate (x, y); Это позволило мне упростить настройки местоположения для размещения текста и цветов фона, что означает, что они отображаются правильно. Вот измененный код для сравнения с оригиналом:

if (rotate) {
    ctx.save();
    tmp = h;
    h = w;
    w = tmp;
    ctx.translate(x, y);
}
if (color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, w, h);
}
ctx.font = "bold " + w / 2 + "px Calibri";
ctx.textAlign = "center";
ctx.fillStyle = "#000";
var c=ctx.canvas;
ctx.rotate(Math.PI / -2);
ctx.fillText(desk.deskID, 0-h/2, w/2); //x + w / 2, y + h / 2);
ctx.restore();