6

我正在围绕可变原点旋转 html5 画布中的对象。

如果用户单击新旋转的矩形中的给定点，我需要将返回的鼠标坐标围绕同一原点旋转回。

我做了一个非常快速的绘图，希望能更好地说明：

在此处输入图像描述

我基本上需要一个函数，它将实际单击的鼠标坐标作为 x 和 y 并将它们转换为旋转之前的对象位置。

var origin = {
        x: 100,
        y: 100
};

var angle = 45;

function transformCoordinates(x,y){

         //Perform calculation to transform coordinates

         return {
                 x : newx,
                 y : newy
         };
}

可用的变量将是旋转的变换原点和角度。以及画布上的鼠标单击坐标（相对于画布本身，0,0 是左上角等）

不幸的是，数学不是我的强项。希望有人可以提供帮助。

4

3 回答 3

5

有一种比你做的方法更优雅的方法来解决这个问题，但你需要知道如何进行矩阵乘法才能理解它。

可以context.currentTransform用来获取画布的变换矩阵。该矩阵表示由当前应用于上下文状态的所有缩放平移和旋转修改器产生的所有坐标修改。这是矩阵的文档。

要将内部坐标转换为屏幕坐标，请使用以下公式：

screen_X = internal_X * a + internal_Y * c + e;    
screen_Y = internal_X * b + internal_Y * d + f;
于 2013-01-25T12:40:16.137 回答
4

令人尴尬的是，我在提出问题后直接解决了这个问题。

如果其他人需要相同的功能，我是这样做的：

getTransformedCoords : function(coords){
    var self = this;
    var obj = self.activeObj;
    var angle = (obj.angle*-1) * Math.PI / 180;   
    var x2 = coords.x - obj.left;
    var y2 = coords.y - obj.top;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = x2*cos - y2*sin + obj.left; 
    var newy = x2*sin + y2*cos + obj.top;

    return {
        x : newx,
        y : newy
    };
},
于 2013-01-25T11:57:52.203 回答
2

我也在很长一段时间内搜索这种查询。在我的例子中，当用户在画布上单击鼠标时，我正在尝试在画布上显示一个点，即使在旋转之后也是如此。问题是，在上下文旋转后，错误显示的点。我采用了gordyr提供的方法。

我已经为我的代码库稍微修改了代码。我已将完整的代码库放在这里。

let model = {
    ctx: {},
    canvas: {},
    width: 500,
    height: 500,
    angleInRad: 0
};
function getTransformedCoords(coords) {
    var angle = (model.angleInRad * -1);
    var x2 = coords.x;
    var y2 = coords.y;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = Math.floor(x2 * cos - y2 * sin);
    var newy = Math.floor(x2 * sin + y2 * cos);

    return new Position(newx, newy);
}

再次感谢gordyr提供的代码。

于 2019-03-25T11:54:15.260 回答