javascript – 围绕一个点旋转画布并获得新的x,y offest

我正在使用html5画布编写一个多点触控拼图,您可以在其中围绕一个点旋转棋子.每件作品都有自己的画布,大小与其边框相同.当旋转发生时,画布大小必须改变,我能够计算并且正在工作.我无法弄清楚的是,如果我想让它看起来围绕枢轴(第一个接触点)旋转,如何找到新的x,y偏移量.

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

所以我知道原始的x,y,宽度,高度,旋转角度,新边界(rotateWidth,rotatingHeight)以及与原始对象相关的轴X,Y.我无法弄清楚如何获得新边界的x / y偏移(使得看起来对象围绕枢轴点旋转)

提前致谢！

解决方法:

>首先,我们需要找到从枢轴点到角落的距离.
>然后计算枢轴和角落之间的角度
>然后根据前一个角度新角度计算绝对角度.
>最后计算新角落.

下面演示的快照显示了从枢轴到角落的线.
使用时旋转矩形时计算红点
翻译.

下面是一个使用绝对角度的示例,但您可以轻松地将其转换为转换旧角度和新角度之间的差异.为简单起见,我将角度保持为度数而不是弧度.

该演示首先使用画布的内部平移和旋转来旋转矩形.然后我们使用纯数学来得到与我们计算角的正确新x和y点的证据相同的点.

Live demo here

/// 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)定义的初始角完全相同的值来验证打印的x和y.

UPDATE

似乎我错过了这个词：新界限的偏移…抱歉,但你可以做的是改为计算到每个角落的距离.

这将为您提供边界的外部限制,您只需使用最小值和最大值“混合并匹配”这些距离值的角点.

New demo here

新部件包含一个功能,可以为您提供角落的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};
}

现在只是为每个角运行函数,然后执行最小/最大值来查找边界：

/// 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);

标签：javascript,canvas,html5-canvas,rotation,trigonometry
来源： https://codeday.me/bug/20190728/1565281.html