Как увеличить и повернуть элемент в JavaScript (Электрон JS)

Question

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

Поворот и масштабирование.

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

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

Я новичок в JavaScript, и я надеюсь, что вы можете помочь. Заранее спасибо за помощь.

Вот мой код:

HTML

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background-image: url("../img/798161.jpg");
}

.nav-wrapper .brand-logo img{
  margin-top: 5px;
  height: 100px;
}

.avakio {
  width: 300px;
  height: 300px;
  background-image: url('../img/IMGRLGX115G_GD.png');
  background-size: 100%;
}

Функция поворота

(function ($) {
    'use strict';

    /**
     * Avakio element
     * @var object
     */
    var $avakio = $('.avakio');

    /**
     * Calculate mouse rotation relative to $avakio center
     * @param  int  mouse_x
     * @param  int  mouse_y
     */
    const radius = $avakio.outerWidth() / 2;
    const center_x = $avakio.offset().left + radius;
    const center_y = $avakio.offset().top + radius;

    function get_degrees(mouse_x, mouse_y) {

        const radians = Math.atan2(mouse_x - center_x, -(mouse_y - center_y));
        const degrees = Math.round((radians * (180 / Math.PI)));

        return degrees;
    }

    $avakio.on('mousedown', function (event) {

        // Calculate the mouse position in degrees
        const click_degrees = get_degrees(event.pageX, event.pageY);

        $(document).bind('mousemove', click_degrees, function (event) {
            // Calculate the mouse move position, removing starting point
            const degrees = get_degrees(event.pageX, event.pageY) - click_degrees;

            $avakio.css('transform', 'rotate(' + degrees + 'deg)');
        });
    });

    $(document).on('mouseup', function () {
        $(document).unbind('mousemove');
    });

})(jQuery);

Функция масштабирования

let zoomArr = [0.5, 0.75, 0.85, 0.9, 1, 1.2, 1.5];


var element = document.querySelector('.avakio');
let value = element.getBoundingClientRect().width / element.offsetWidth;

let indexofArr = 4;
handleChange = () => {
    let val = document.querySelector('#sel').value;
    val = Number(val)
    console.log('handle change selected value ', val);
    indexofArr = zoomArr.indexOf(val);
    console.log('Handle changes', indexofArr)
    element.style['transform'] = `scale(${val})`
}



document.querySelector("#zoom_in").addEventListener('click', () => {
    console.log('value of index zoomin is', indexofArr)
    if (indexofArr < zoomArr.length - 1) {
        indexofArr += 1;
        value = zoomArr[indexofArr];
        document.querySelector('#sel').value = value
        element.style['transform'] = `scale(${value})`
    }
})

document.querySelector('#zoom_out').addEventListener('click', () => {
    console.log('value of index  zoom out is', indexofArr)
    if (indexofArr > 0) {
        indexofArr -= 1;
        value = zoomArr[indexofArr];
        document.querySelector('#sel').value = value
        // console.log('scale value is',value)
        element.style['transform'] = `scale(${value})`
    }
})