javascript - 获取鼠标相对于旋转图像中心的位置

Question

我正在尝试编写一些代码，允许用户在 Canvas 上任意拖动图像、调整图像大小以及使用鼠标旋转图像。我的三 Angular 函数有问题。

所有兴趣点都相对于图像的中心。在下图中，鼠标位于绝对位置 850, 400(相对于 Canvas 的左上角)。由于没有旋转，我可以很容易地确定鼠标位于相对位置 250, 0(相对于图像的中心)。

我把图片旋转270°，鼠标放在原位置后，绝对值是600, 150。尽管相对位置与旋转前完全相同 (250, 0)。

给定图像中心点的绝对坐标、旋转和鼠标的绝对位置，如何确定鼠标相对于图像中心的变换后旋转坐标？

我已经尝试了很多事情，并试图从类似的 StackOverflow 问题中改编答案。我目前的尝试使用某人在 Gist 中发布的 Matrix 类。

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

Answer 1

我在 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};
}