Получение положения мыши относительно центра повернутого изображения - PullRequest
Новая
       37

Получение положения мыши относительно центра повернутого изображения

2 голосов
/ 29 мая 2019

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

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

enter image description here

После того, как я поверну изображение на 270 ° и поставлю мышь в то же положение, абсолютное значение будет 600, 150 .Относительное положение точно такое же, как и до поворота ( 250, 0 ).

enter image description here

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

Я перепробовал много вещей и попытался адаптировать ответы на аналогичные вопросы StackOverflow.Моя текущая попытка использует класс Matrix, который кто-то опубликовал в Gist. 

layerRelativePoint(x, y, layer){
    var radians = layer.rotation * (Math.PI/180);
    var matrix = new Matrix();
    matrix.translate(-layer.x, -layer.y);
    matrix.rotate(radians);
    var [x, y] = matrix.transformPoint(x, y);
    return {x, y};
}

Демо: https://plnkr.co/edit/T9XCfpZVlMWLMY67bOvW?p=preview

1 Ответ

1 голос
/ 30 мая 2019

Я нашел ответ на Math.se .

Вот реализация, которую я придумал: 

/**
 * Translate a point's absolute coordinates to it's coordinates 
 * relative to a possibly rotated center point
 * -------------------------------------------------------------
 * @param {number} absPointX - The absolute x ordinate of the point to translate
 * @param {number} absPointY - The absolute y ordinate of the point to translate
 * @param {number} centerX - The absolute x ordinate of the center point of rotation
 * @param {number} centerY - The absolute y ordinate of the center point of rotation
 * @param {number} rotationDegrees - The angle of rotation in degrees
 * @returns {x, y} - The translated point's coordinates
 */
function translatePoint(absPointX, absPointY, centerX, centerY, rotationDegrees=0) {
    // Get coordinates relative to center point
    absPointX -= centerX;
    absPointY -= centerY;

    // Convert degrees to radians
    var radians = rotationDegrees * (Math.PI / 180);

    // Translate rotation
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var x = (absPointX * cos) + (absPointY * sin);
    var y = (-absPointX * sin) + (absPointY * cos);

    // Round to nearest hundredths place
    x = Math.floor(x * 100) / 100;
    y = Math.floor(y * 100) / 100;

    return {x, y};
}
...