rotation当画布的高度和宽度不同时的逻辑

当画布的大小不同时，在旋转应用于画布时，需要帮助才能获取画布XY坐标系oridantes。rotation当画布的高度和宽度不同时的逻辑

2014-09-26 sudhir patel

请澄清你的问题:-)你是什么意思通过'获取画布XY坐标'？注意：请记住，context.rotate（角度）旋转整个画布坐标系。如果在旋转和绘制之后，没有将画布恢复到默认坐标系，则任何新绘制仍将处于旋转空间中，因此您可以使用未旋转的坐标进行绘制，画布会为您旋转。但是......浏览器鼠标处理程序对画布旋转一无所知，所以即使画布仍然旋转，鼠标处理程序中的鼠标坐标也将处于未旋转的坐标中。 – markE 2014-09-26 16:48:38

那么如何用我的Canvas当前旋转状态来映射XY Co坐标的鼠标事件？ – 2014-09-29 12:15:17

我看到你的问题包括'数学'标签，但不包含代码，所以我会给你一个叙述性的数学解决方案。

问题

正如你已经发现，在浏览器的鼠标事件未旋转的空间，而不是旋转画布坐标返回clientX & clientY值。

的潜在解决方案

要跟踪画布的当前旋转状态，您可以使用仿射变换矩阵。仿射矩阵使用3x3矩阵的9个元素中的6个来保存关于所有画布变换的累积信息：旋转，平移，缩放等。该矩阵可以简单地由6个元素的数组表示。

var matrix=[ 1, 0, 0, 1, 0, 0 ];

canvas元素保留这样的变换矩阵，但不幸的是（意外地）它的变换矩阵是隐藏的。

有效解决

所以另外，每次上下文发出命令转型的时候，你可以镜像这种改变在变换矩阵中您维护自己。这样，无论您对画布做了多少次旋转等操作，矩阵都能“保存”当前的旋转状态。

然后，当您在未旋转空间中定义鼠标[x，y]时，可以使用该变换矩阵将该未旋转的鼠标坐标转换为旋转的画布空间。

// convert mouse coordinates to transformed canvas coordinates 
function tmPoint(matrix, mouseX, mouseY){ 
    return({ 
    canvasX: mouseX*matrix[0] + mouseY*matrix[2] + matrix[4], 
    canvasY: mouseX*m[1] + mouseY*matrix[3] + matrix[5] 
    }; 
}

如何对...

可以 '学习机' 上变换矩阵这里：

https://blog.safaribooksonline.com/2012/04/26/html5-canvas-games-tracking-transformation-matrices/

来源

2014-09-29 16:30:32 markE

rotation当画布的高度和宽度不同时的逻辑

回答

相关问题