在一个点周围旋转画布并获得新的x,y offest

Question

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

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

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

提前致谢!

Answer 1

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

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

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

该演示首先使用画布的内部平移和旋转来旋转矩形.然后,我们用纯数学才能到同一点,我们已经计算出正确的新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)所限定的初始角验证印刷x和y.

UPDATE

看来我错过了一句话:新偏移范围 ...我们对此深感抱歉,但你可以做什么,而不是要计算距离,每个角落吧.

这会给你绑定的外部界限,你只是"混搭"使用最小和最大的距离值角落基地.

这里有新的演示

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