Масштабирование изображений в холсте HTML5

Question

У меня есть несколько объектов, представляющих изображение, которое я хочу нарисовать на холсте.Каждый объект имеет свойство X, Y, Scale, а также метод рендеринга, который передается объекту canvas.затем тег canvas передается методу рендеринга каждого объекта, и все они должны визуализироваться на холсте.

Проблема, с которой я столкнулся, заключается в том, что масштабирование выполняется с начала источника, а не с источникаобраз.Чтобы исправить это, я попробовал следующее:

canvas.translate(-this.X, -this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(this.X, this.Y);

Проблема с приведенным выше кодом заключается в том, что, похоже, у вас может быть только 1 перевод и 3-я строка, которая должна переместить объект обратно в егоисходная позиция становится переводом при вызове drawImage.Если я удаляю 3-ю строку, я получаю правильное начало масштабирования, но изображение перемещается в 0,0 и не отображается в правильном месте.

Как правильно выполнить этот тип масштабирования?

Answer 1

Попробуйте:

canvas.translate(this.X, this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(-this.X, -this.Y);

Но имейте в виду, что для этого вам понадобится много ctxt.save(); с и ctxt.restore(); с, если вы получили ширину и высоту изображений, которые вы могли бы простосделайте ctxt.drawImage(this.image, this.X, this.Y, this.Width*this.Scale, this.Height*this.Scale);, так как вам не нужно связываться со стеком состояний контекста, это может быть быстрее.

Edit:

Преобразования не влияют на источник.То, что происходит, - то, что они должны быть применены в обратном порядке .Помните, что эти методы являются просто ярлыками для укладки матриц в стеке преобразования.