Question

我试图在HTML5画布上操纵一个简单的矩形。这样做的Javascript就在这里：

var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, windowWidth, windowHeight);

var halfWidth = (iconWidth / 2);
var halfHeight = (iconHeight / 2);

var centreX = x + halfWidth;
var centreY = y + halfHeight;

ctx.fillStyle = "#FF0000";
ctx.translate(centreX, centreY);
ctx.rotate(rotationDegree * Math.PI / 180);
ctx.fillRect(-halfWidth, -halfHeight, iconWidth, iconHeight);

ctx.translate(-centreX, -centreY);

当我增加y时，我可以看到矩形沿着屏幕移动，如果我旋转矩形，它会旋转并沿着新的轨迹移动;然而，为了阻止矩形离开屏幕，我进行了基本的边界检查，这只是没有工作（矩形在屏幕上移动，而且是＃34;弹跳＆＃34;它没有到达边缘

作为一项实验，我尝试了以下内容：

var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, windowWidth, windowHeight);

var halfWidth = (iconWidth / 2);
var halfHeight = (iconHeight / 2);

var centreX = x + halfWidth;
var centreY = y + halfHeight;

ctx.save();

ctx.fillStyle = "#FF0000";
ctx.translate(centreX, centreY);
ctx.rotate(rotationDegree * Math.PI / 180);
ctx.fillRect(-halfWidth, -halfHeight, iconWidth, iconHeight);

//        ctx.translate(-centreX, -centreY);
ctx.restore();

这样可行，但旋转不再引导矩形。我的结论是旋转功能旋转画布，但然后将其保留为新的旋转形式（如在笔下旋转一张纸）。所以，我遇到的错误是旋转没有被重置;然而，除了边界检查，这个＆＃34;窃听＆＃34;行为是我实际上的目标。

有没有办法从画布2d上下文获取绝对位置，考虑到旋转，即使我将画布留在其旋转的＃34;州，我可以进行边界检查吗？

Here is a fiddle of the site.

Answer 1

要将点从局部空间（变换空间）转换为屏幕空间，请创建一个矩阵，该矩阵是上下文变换的阴影（副本），然后将该点与该矩阵相乘

<head>
//
//
<link rel="stylesheet" type="text/css" href="/dist/tablesaw.css" media="screen and (max-width: 767px)">
//
//
</head>

使用

function getTransformToScreen(x,y,rotation,posX,posY){
    var xAx = Math.cos(rotation);  // x axis x
    var xAy = Math.sin(rotation);  // x axis y
    // the equivalent to 
    // ctx setTransform(xAx, xAy ,-xAy, xAx, posX, posY);
    // second two values (y Axis) is at 90 deg of x Axis if it is
    // not at 90 (skewed) then you need to calculate the skewed axis (y axis) direction
    return {
        x : x * xAx - y * xAy + posX,
        y : x * xAy + y * xAx + posY
    }
}

HTML5捕获旋转和翻译后的绝对位置

1 个答案: