javascript - 围绕一个点旋转 Canvas 并获得新的 x,y 偏移量

Question

我正在使用 html5 Canvas 编写一个多点触控拼图游戏，您可以在其中围绕一个点旋转拼图。每件作品都有自己的 Canvas ，其边界框大小。当发生旋转时， Canvas 大小必须改变，我能够计算并且正在工作。我想不通的是，如果我要让它看起来围绕枢轴(第一个接触点)旋转，如何找到新的 x、y 偏移量。

这是一张图片，可以更好地解释我想要实现的目标。请注意，枢轴点并不总是中心，否则我可以将新边界和旧边界之间的差异减半。

所以我知道原始的 x、y、宽度、高度、旋转 Angular 、新边界(rotatedWidth、rotatedHeight)以及与原始对象相关的轴心 X、Y。我不知道如何获得新边界的 x/y 偏移量(使对象看起来围绕轴心点旋转)

提前致谢!

Answer 1

• 首先我们需要找到从轴心点到 Angular 的距离。
• 然后计算枢轴和 Angular 之间的 Angular
• 然后根据之前的 Angular +新的 Angular 计算出绝对 Angular 。
• 最后计算出新的 Angular 点。

^{下面演示的快照显示了从枢轴到 Angular 的一条线。
使用
旋转矩形时计算红点翻译。}

这是一个使用绝对 Angular 示例，但您可以轻松地将其转换为转换旧 Angular 和新 Angular 之间的差异。为简单起见，我将 Angular 保留为度数而不是弧度。

demo首先使用canvas内部的平移和旋转来旋转矩形。然后我们使用纯数学得出相同的结论，作为我们已经计算出正确的新 Angular x 和 y 点的证据。

/// find distance from pivot to corner
diffX = rect[0] - mx; /// mx/my = center of rectangle (in demo of canvas)
diffY = rect[1] - my;
dist = Math.sqrt(diffX * diffX + diffY * diffY); /// Pythagoras

/// find angle from pivot to corner
ca = Math.atan2(diffY, diffX) * 180 / Math.PI; /// convert to degrees for demo

/// get new angle based on old + current delta angle
na = ((ca + angle) % 360) * Math.PI / 180; /// convert to radians for function

/// get new x and y and round it off to integer
x = (mx + dist * Math.cos(na) + 0.5)|0;
y = (my + dist * Math.sin(na) + 0.5)|0;

最初，您可以通过查看它们与为矩形 (50, 100) 定义的初始 Angular 的值完全相同来验证打印的 x 和 y。

更新

似乎我错过了这个词:新边界的偏移量......对此感到抱歉，但你可以做的是计算到每个的距离> 转 Angular 。

这会给你边界的外部限制，你只需使用最小值和最大值“混合和匹配”基于这些距离值的 Angular 。

New Live demo here

新部分包含一个函数，可以为您提供 Angular 的 x 和 y:

///mx, my = pivot, cx, cy = corner, angle in degrees
function getPoint(mx, my, cx, cy, angle) {

    var x, y, dist, diffX, diffY, ca, na;

    /// get distance from center to point
    diffX = cx - mx;
    diffY = cy - my;
    dist = Math.sqrt(diffX * diffX + diffY * diffY);
    
    /// find angle from pivot to corner
    ca = Math.atan2(diffY, diffX) * 180 / Math.PI;
  
    /// get new angle based on old + current delta angle
    na = ((ca + angle) % 360) * Math.PI / 180;
    
    /// get new x and y and round it off to integer
    x = (mx + dist * Math.cos(na) + 0.5)|0;
    y = (my + dist * Math.sin(na) + 0.5)|0;
    
    return {x:x, y:y};
}

现在只需为每个 Angular 运行该函数，然后执行最小/最大值以找到边界:

/// offsets
c2 = getPoint(mx, my, rect[0], rect[1], angle);
c2 = getPoint(mx, my, rect[0] + rect[2], rect[1], angle);
c3 = getPoint(mx, my, rect[0] + rect[2], rect[1] + rect[3], angle);
c4 = getPoint(mx, my, rect[0], rect[1] + rect[3], angle);

/// bounds
bx1 = Math.min(c1.x, c2.x, c3.x, c4.x);
by1 = Math.min(c1.y, c2.y, c3.y, c4.y);
bx2 = Math.max(c1.x, c2.x, c3.x, c4.x);
by2 = Math.max(c1.y, c2.y, c3.y, c4.y);