Qt绘图：求圆和椭圆上任意角度点的坐标

古城微笑少年丶 2023-02-28 09:00 136阅读 0赞

（2021-2-11 之前把笛卡尔坐标的 x 和 y 标注反了，已修正）

# 0.圆相关公式 #

在笛卡尔坐标系上，一个标准的圆是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

已知圆心坐标 （x0，y0），半径 R，角度 a，则圆边上点（x'，y'）的坐标为：

![2020072022520327.png][]

C 的三角函数参数为弧度，转换如下：

**角度转弧度：** ![radian =\\frac\{\\pi \\cdot angle\}\{180\}][radian _frac_pi _cdot angle_180]

**弧度转角度：** ![angle =\\frac\{180 \\cdot radian \}\{\\pi\}][angle _frac_180 _cdot radian _pi]

但我们知道，Qt 绘图是屏幕坐标系，起点在左上角，以右下角为正方向：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1][]

（可以把计算后的 y 取反来得到想要的效果）

运行结果：

![20200720230235947.png][]

# 1.椭圆相关公式 #

在笛卡尔坐标系上，一个标准的椭圆是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 2][]

已知圆心坐标 （x0，y0），横轴 A（长半轴），竖轴 B（短半轴），角度 a，则圆边上点（x'，y'）的坐标为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 3][]

椭圆半径：

![2020072023354280.png][]

（可以发现，与普通圆相比，不考虑椭圆角度的话只是半径变化了，其他部分是一样的）

void MainWindow::paintEvent(QPaintEvent *event)
    {
        event->accept();
    
        QPainter painter(this);
        painter.setPen(QPen(Qt::red,2));
        //移动坐标中心点到窗口中心，默认左上角为起点，往右下为正方向
        painter.translate(width()/2,height()/2);
        //画一个圆，圆心为起点（上一步移动到的正中），半径100px
        const int A=150; //横轴
        const int B=100; //竖轴
        painter.drawEllipse(QPoint(0,0),A,B);
        //计算45度角圆边上的点，角度需要转换为弧度
        const double a=qDegreesToRadians((double)45);
        const int R=A*B/sqrt(pow(A*sin(a),2)+pow(B*cos(a),2)); //计算对应角度的半径
        const int x=0+R*cos(a);
        const int y=0+R*sin(a);
        //因为屏幕坐标系y轴正方向和笛卡尔坐标系相反，所以y取反就是我们要的结果了
        painter.drawLine(QPoint(0,0),QPoint(x,-y)); //y取反
    }

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 4][]

# 2.旋转矩阵 #

上面的角度都是从右侧开始，椭圆也是标准椭圆，如果我们想旋转一定角度来绘制，就需要用到我们的旋转矩阵了。

（本节主要来自参考博客）

已知 A(x,y) ，求旋转 a 角度后的 B(x’,y’) 坐标：

![在这里插入图片描述][20190318210810862.png_pic_center]

公式推导：

![在这里插入图片描述][20190318212705112.png]

根据矩阵乘法计算规则，可以推出：

![在这里插入图片描述][20190318212806481.png]

操作流程：

>  *  把图形的各点平移，令旋转中心平移至原点；
>  *  乘以旋转矩阵；
>  *  再平移至原来的旋转中心。

![在这里插入图片描述][20190318212953259.png]

我们将上面椭圆的代码改一下，逆时针旋转 45 度：

void MainWindow::paintEvent(QPaintEvent *event)
    {
        event->accept();
    
        QPainter painter(this);
        painter.setPen(QPen(Qt::red,2));
        //移动坐标中心点到窗口中心，默认左上角为起点，往右下为正方向
        painter.translate(width()/2,height()/2);
        //画一个圆，圆心为起点（上一步移动到的正中），半径100px
        const int A=150; //横轴
        const int B=100; //竖轴
        painter.rotate(-45); //qpainter是顺时针转的
        painter.drawEllipse(QPoint(0,0),A,B);
        painter.rotate(45);
    
        //计算45度角圆边上的点，角度需要转换为弧度
        const double a=qDegreesToRadians((double)45);
        const int R=A*B/sqrt(pow(A*sin(a),2)+pow(B*cos(a),2)); //计算对应角度的半径
        const int x=0+R*cos(a);
        const int y=0+R*sin(a);
        //根据旋转矩阵计算
        const double a2=qDegreesToRadians((double)45);
        const int x2=x*cos(a2)-y*sin(a2);
        const int y2=x*sin(a2)+y*sin(a2);
        //因为屏幕坐标系y轴正方向和笛卡尔坐标系相反，所以y取反就是我们要的结果了
        painter.drawLine(QPoint(0,0),QPoint(x2,-y2)); //y取反
    }

运行结果：

（第一次计算的角度坐标是计算标准椭圆下的位置，第二次是根据椭圆的旋转角度做旋转得到的坐标）

（本来就有 45 度，再旋转 45 度就成了垂直向上了）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 5][]

（虽然线可以直接 QPainter 旋转的方式绘制，但是这样文本也旋转了）

# 3.参考 #

博客（圆和椭圆坐标）：[https://blog.csdn.net/xiamentingtao/article/details/85804823][https_blog.csdn.net_xiamentingtao_article_details_85804823]

博客（椭圆坐标）：[https://blog.csdn.net/chenlu5201314/article/details/99678398][https_blog.csdn.net_chenlu5201314_article_details_99678398]

博客（二维旋转矩阵）：[https://blog.csdn.net/Mynameisyournamewuyu/article/details/88650409][https_blog.csdn.net_Mynameisyournamewuyu_article_details_88650409]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20230209/ee55a9c6a4ee4d06bab95bd35df66595.png
[2020072022520327.png]: https://img-blog.csdnimg.cn/2020072022520327.png
[radian _frac_pi _cdot angle_180]: https://private.codecogs.com/gif.latex?radian%20%3D%5Cfrac%7B%5Cpi%20%5Ccdot%20angle%7D%7B180%7D
[angle _frac_180 _cdot radian _pi]: https://private.codecogs.com/gif.latex?angle%20%3D%5Cfrac%7B180%20%5Ccdot%20radian%20%7D%7B%5Cpi%7D
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200720225553414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200720230235947.png]: https://img-blog.csdnimg.cn/20200720230235947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210211111914556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200720233515777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[2020072023354280.png]: https://img-blog.csdnimg.cn/2020072023354280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200720234035867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20190318210810862.png_pic_center]: https://img-blog.csdnimg.cn/20190318210810862.png#pic_center
[20190318212705112.png]: https://img-blog.csdnimg.cn/20190318212705112.png
[20190318212806481.png]: https://img-blog.csdnimg.cn/20190318212806481.png
[20190318212953259.png]: https://img-blog.csdnimg.cn/20190318212953259.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200720235048546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_xiamentingtao_article_details_85804823]: https://blog.csdn.net/xiamentingtao/article/details/85804823
[https_blog.csdn.net_chenlu5201314_article_details_99678398]: https://blog.csdn.net/chenlu5201314/article/details/99678398
[https_blog.csdn.net_Mynameisyournamewuyu_article_details_88650409]: https://blog.csdn.net/Mynameisyournamewuyu/article/details/88650409