首页 文章

绘制旋转矩形

提问于
浏览
10

我意识到这可能更像是一个数学问题 .

要为我的矩形绘制线条,我需要解决它们的角落 . 我在(x,y)处有一个矩形中心,带有定义的宽度和高度 .

要在顶部的非旋转矩形上找到蓝点(角度= 0),它是

UL = (x-Width/2),(y+height/2)
UR = (x+Width/2),(y+height/2)
LR = (x+Width/2),(y-height/2)
LL = (x-Width/2),(y-height/2)

如果角度不为0,我如何找到点?

提前致谢 .


更新:虽然我的图片中有(0,0)作为中心点,但中心点很可能不在该位置 .

6 回答

  • 2

    首先将中心点转换为0,0

    X'= X-x

    Y'= Y-y

    然后旋转A角

    X''=(X-x)* cos A - (Y-y)* sin A.

    Y'=(Y-y)* cos A(X-x)* sin A.

    再次将中心点转换回x,y

    X''=(X-x)* cos A - (Y-y)* sin A x

    Y''=(Y-y)* cos A(X-x)* sin A y

    因此,通过以下变换计算(X,Y)的所有4个点

    X''=(X-x)* cos A - (Y-y)* sin A x

    Y''=(Y-y)* cos A(X-x)* sin A y

    其中x,y是矩形的中心点,X是角点当角度为0时,即使角点也没有正确定义,正如我在评论中给出的那样 .

    替换后你会得到

    UL  =  x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
    UR  =  x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A
    BL =   x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
    BR  =  x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A
    

    我认为这适合您的解决方案 .

  • 0

    如果'theta'是逆时针旋转角度,那么旋转矩阵是:

    | cos(theta)  -sin(theta) |
    | sin(theta)   cos(theta) |
    

    x' = x.cos(theta) - y.sin(theta)
    y' = x.sin(theta) + y.cos(theta)
    

    如果旋转点不在原点,则从原始坐标中减去旋转中心,执行如上所示的旋转,然后再次将旋转中心添加回来 .

    http://en.wikipedia.org/wiki/Transformation_matrix有其他转换的例子

  • 26

    Rotation matrix(这已成为FAQ)

  • 3

    2D Rotation .

    q =初始角度,f =旋转角度 .

    x = r cos q
    y = r sin q

    x'= r cos(q f)= r cos q cos f - r sin q sin f
    y'= r sin(q w)= r sin q cos f r cos q sin f

    因此:
    x'= x cos f - y sin f
    y'= y cos f x sin f

  • 7

    最简单的方法之一是在旋转之前获取点的位置,然后应用坐标变换 . 由于它以(0,0)为中心,这只是一个使用的情况:

    x'= x cos(theta) - y sin(theta)

    y'= y cos(theta)x sin(theta)

  • 1

    用这个......我成功了......

    ctx.moveTo(defaults.x1, defaults.y1);
    
        // Rotation formula
        var x2 = (defaults.x1) + defaults.lineWidth * Math.cos(defaults.rotation * (Math.PI / 180));
        var y2 = (defaults.y1) + defaults.lineWidth * Math.sin(defaults.rotation * (Math.PI / 180));
    
        ctx.lineTo(x2, y2);
    
        x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 90) * (Math.PI / 180));
        y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 90) * (Math.PI / 180));
        ctx.lineTo(x2, y2);
    
        x2 = (x2) + defaults.lineWidth * Math.cos((defaults.rotation + 180) * (Math.PI / 180));
        y2 = (y2) + defaults.lineWidth * Math.sin((defaults.rotation + 180) * (Math.PI / 180));
        ctx.lineTo(x2, y2);
    
        x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 270) * (Math.PI / 180));
        y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 270) * (Math.PI / 180));
    

相关问题