MariaGurkina

Прежде всего, давайте рассмотрим, как работает центрированный поворот в Canvas. Когда вы вызываете translate для перемещения центра координат, затем поворачиваете canvas и рисуете изображение, оно будет поворачиваться относительно установленного центра.

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

Вот как можно модифицировать ваш код:

updateImageCanvas() {
    this.canvas.ctx.clearRect(0, 0, this.canvas.item.width, this.canvas.item.height);
    let setting = this.catalogItems[this.activeCatalogItem].setting;

    // Сохраняем текущее состояние контекста
    this.canvas.ctx.save();

    // Рассчитываем новые координаты для центрированного поворота
    let centerX = setting.product.x + setting.product.width / 2;
    let centerY = setting.product.y + setting.product.height / 2;

    // Применяем трансформации
    this.canvas.ctx.translate(centerX, centerY);
    this.canvas.ctx.rotate((90 * Math.PI) / 180);
    
    // Отрисовываем изображение
    this.canvas.ctx.drawImage(
        setting.product.canvasImage, 
        -setting.product.width / 2, 
        -setting.product.height / 2, 
        setting.product.width, 
        setting.product.height
    );

    // Восстанавливаем состояние контекста
    this.canvas.ctx.restore();

    this.printImageSetting();
}

В этом коде save и restore используются для сохранения и восстановления состояния контекста, чтобы изменения, внесенные translate и rotate, не влияли на другие части кода.

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