Поворот изображения с контекстом холста

Question

я этот код

Allocate.prototype.Rotate = function() { 
var canvas = document.getElementById("underCanvas"); 
var context = canvas.getContext("2d"); 
canvas.width = canvas.width; 
context.lineWidth = "1"; 
context.save(); 
context.translate(this.drawStart.x + this.img.width * 0.5, 
       this.drawStart.y + this.img.height * 0.5); 
context.rotate(Math.Pi/2); 
context.translate(-(this.drawStart.x + this.img.width * 0.5), 
       -(this.drawStart.y + this.img.height * 0.5)); 
context.drawImage(this.img, this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h, this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h); 

context.rect(this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h); 
context.stroke(); 
context.restore(); 
} 

, что я думаю, этот метод класса выделить должен сделать - это нарисовать изображение (this.img) повернутого на 90 градусов внутри прямоугольника в. Что выходит: он рисует преобразованный прямоугольник, но изображение по-прежнему не вращается. Зачем?

Может ли кто-нибудь помочь мне выполнить это?

Этот код является частью класса. я делаю sorta web paint и хочу иметь возможность вращать выделенную область. Благодарю.

Answer 1

Вам нужно перевести перед поворотом, если вы хотите, чтобы повернуть изображение по ее центру (корректировать по мере необходимости):

/// first translate 
context.translate(this.drawStart.x + this.img.width * 0.5, 
        this.drawStart.y + this.img.height * 0.5); 

/// then rotate 
context.rotate(0.5 * Math.PI); /// 90 degrees 

/// then translate back 
context.translate(-(this.drawStart.x + this.img.width * 0.5), 
        -(this.drawStart.y + this.img.height * 0.5)); 

/// draw image 

Причина для того, чтобы не работать может быть несколько:

• Правильно ли загружено изображение (т. Е. Является обработчиком onload, используемым для того, чтобы изображение было доступно во время его рисования).
• Какие значения содержатся в свойствах и являются ли они действительными (то есть не определены и т. Д.)

Для поворота на работу вам необходимо выбрать точку поворота или поворот. Стержень обычно является центром изображения, который получается с использованием его половины ширины и высоты.

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

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

Прямоугольник должен быть нарисован с тем же преобразованием, которое, конечно же, применяется.