当前位置: 首页 > 知识库问答 >
问题:

javascript查找旋转矩形的中心

江永安
2023-03-14

使用Javascript和js库(limeJS),当用户点击某个点时,我绘制了一个矩形,然后矩形正在旋转并改变大小(只有宽度,高度是静态的),直到用户释放鼠标按钮。

(hm不能发布图像-需要10个信誉点-所以这里是图像链接http://d.pr/i/ksbq)

矩形由右上角(图像中的红点)旋转,大小和旋转是基于鼠标光标(蓝点)计算的。

最后,当用户松开鼠标按钮时,我要找到矩形的中心。

我可以做所有的(找到距离,旋转)和中心,但似乎我做了一些错误的中心当右上角(红点)y大于鼠标点(蓝点)y。我要做的是找到左下角,然后找到左上角:

var BOX_HEIGHT = 20;
// pos: upper right rectangle's position (red dot), mpos: mouse position (blue dot), rotation: rectangle's rotatio
test.GetCenter = function(pos, mpos, rotation)
{
    var dpos = {}, ret = {}, rot = (Math.abs(rotation) + 90) ;
    // find down left corner
    dpos.x = BOX_HEIGHT * Math.cos(rot * Math.PI / 180) + mpos.x;
    dpos.y = BOX_HEIGHT * Math.sin(rot * Math.PI / 180) + mpos.y;

    ret.x = Math.abs((pos.x + dpos.x) / 2);
    ret.y = Math.abs((pos.y + dpos.y) / 2);
    return ret;
}

共有1个答案

令狐宏伟
2023-03-14

在你描述的出现问题时的情况中,两个点的作用是颠倒的:你有下面的,想找上面的。添加一个if语句来检测此条件,并编写一个可以识别此反转的代码版本。

 类似资料:
  • 在我的应用程序中,用户在同一行上点两(可以是任何角度)。所以我有以下信息 > 点坐标 点B坐标 A 点和点 B 之间的距离 A 跨距离(从用户获取作为绘制其他点的输入) 角度(从点A和点B计算)。 根据此信息,另一个应用程序绘制四个点(矩形的顶点)。 我要做的是,我必须找到这四个点(矩形)的中心点,以便能够正确地绘制这四个点之间的矩形。 现在我可以画出以中心为点的矩形,这显然是不正确的。我应该用什

  • 我有两个矩形,其中一个是另一个的剪裁。现在我想围绕剪切矩形的中心旋转较大的矩形并调整x / y值。 如何计算旋转后的新x/y值? 我只想绕着小盒子的中心旋转大盒子的x/y。因此,较大盒子的x/y点相对于较小盒子的顶部/左侧点。我有小盒子的宽度和高度,所以我可以计算大盒子相对于小盒子中心的x/y点。旋转的角度以度为单位。旋转可以是任何角度,例如10度。

  • 我试着绕着它的中心旋转一个矩形。使用GraphicsContext ie gc将旋转绘制到画布上。这是我的绘图代码。 这会将矩形移动到其中心,然后围绕其左上角点旋转矩形。我试着把两边的长度和宽度减半,但那只会让它飞得到处都是。我数学不好也许这里有更好的人能告诉我我做错了什么。 如果需要的话,我还存储了矩形的所有四个点(角)。 谢了乔

  • 我刚开始使用JavaFX,有一个问题。在我的项目中,我想使用旋转矩形。但矩形只围绕其中心旋转,我希望它围绕其左上角旋转。 就像这张照片(从这里开始): 下面是我的项目中的一些代码: 在这种情况下,如果按下箭头键,矩形会旋转。

  • 问题内容: 我到处搜索,但找不到答案。 如何在Java中旋转矩形? 这是我的一些代码: 我尝试了g2d.rotate(100D); 但它没有用。提前致谢。 这是我编辑的代码: 问题答案: 对于图像,必须将Graphics2D的drawImage方法与相对的AffineTransform一起使用。 对于形状,您可以旋转Graphics2D本身: 顺便说一句,您应该重写paintComponent方法

  • 问题内容: 我需要创建围绕其中心旋转的矩形(因此它们不必平行于坐标系的轴)。因此,基本上每个矩形都可以由 center-X , center-Y , width , height 和 angle定义 。然后,我要做的是对这些矩形中是否包含某些点进行计算(因此不会涉及任何绘图)。我想我不能使用该类,因为这些矩形将始终与坐标系的x和y轴平行。是通过编写自己的矩形类来获得此功能的唯一方法,还是可以使用任