相关疑难解决方法(0)

我开发了一个HTML5 Canvas应用程序,它涉及读取一个xml文件,该文件描述了我需要在画布上绘制的箭头,矩形和其他形状的位置.

XML布局示例:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

如果旋转对象,则涉及在围绕另一个点(左侧,顶部)旋转时计算点的位置(旋转后称为P的新位置).我试图想出一个通用函数/公式,我可以用来计算这个点P,但我的数学有点弱,我无法确定我想要使用的弧/正切公式.

你能帮我提出一个公式,我可以用它来计算旋转点P,既可以是正的也可以是负的？

在上面的例子中:点(14,446)是左,顶点和点(226,496)是物体的中点,当没有旋转时,点=(左+宽度/ 2,顶部+高度/ 2)和蓝色点是旋转时的中点.我知道如何计算点(14,446)和(226,496)之间的线长度,但不知道如何计算蓝点x,y位置 - BTW:此线的长度与蓝点之间的线相同(14446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

更新 - 已解决

我使用这篇文章中的公式解决了这个问题计算旋转的 HTML 元素的原点

原问题

这个问题是我之前的问题的延续： How to translate Mouse X,Y Coordinates to move HTML element inside a container, where container is rotation to some angle

这是一些背景知识，如果您没有阅读上一个链接：

我正在用 HTML/JS 制作一个纸牌游戏，为所有玩家显示实时视角。

对于 4 人桌，桌子以 0、90、180 和 270 度角旋转。

对于 6 人桌，桌子旋转成 6 面，分别为 0 度、60 度、120 度和 300 度。

上面的桌子和卡片的结构是这样的：

<gameTable style=”position: relative;”> 

<card style=”position: absolute; top: 1%, left: 1%;”></card> 

</gameTable> 

卡片是绝对位置，因此所有屏幕尺寸的移动都是一致的。

现在我正在制作一个功能，允许我在桌子上存储卡片设置并将它们保存为对象。我计算它们与当前玩家的偏移量并存储它们。

偏移意味着：

if Player = 0 degree, offsetY = 100 - card.top and OffsetX = 100 …