学习OpenCV3：画带箭头的直线

迈不过友情╰ 2023-02-22 12:30 185阅读 0赞

--------------------

# 一、问题 #

现有一条直线 p 1 p 2 p\_1p\_2 p1p2，给定箭头角度`angle`，长度`length`，颜色`color`和厚度`thickness`，要求在 p 2 p\_2 p2画出箭头。

# 二、分析： #

![format_png_pic_center][]

已知角度`angle`和长度`length`，可求出`l1`和`l2`：

double l1 = length * cos(angle * CV_PI / 180), l2 = length * sin(angle * CV_PI / 180);

已知`p1`，`p2`和`l1`，可求出`p0`：

int i = (p2.x > p1.x) ? 1 : -1; // i,j代表p2、p3、p4相对于p0的正负
        int j = (p2.y > p1.y) ? 1 : -1;
        double a1 = abs(atan((p2.y - p1.y) / (p2.x - p1.x))); // 直线p1p2相对于x轴的角度，取正值
        double w1 = l1 * cos(a1), h1 = l1 * sin(a1);          // 用于计算p2相对于p0的宽高
        Point2d p0(p2.x - w1 * i, p2.y - h1 * j);

已知直线 p 1 p 2 p\_1p\_2 p1p2， p 3 p 4 p\_3p\_4 p3p4与 p 1 p 2 p\_1p\_2 p1p2垂直，可计算出 p 3 p 4 p\_3p\_4 p3p4相对 x x x轴的角度`a2`：

double a2 = 90 * CV_PI / 180 - a1;           // 直线p3p4相对于x轴的角度

已知`p0`、`l2`和`a2`，可计算出`p3`和`p4`：

double w2 = l2 * cos(a2), h2 = l2 * sin(a2); // 用于计算p3和p4相对于p0的宽高
        p3 = Point2d(p0.x - w2 * i, p0.y + h2 * j);
        p4 = Point2d(p0.x + w2 * i, p0.y - h2 * j);

# 三、实现 #

#include <opencv2/opencv.hpp>
    #include <iostream>
    #include <string>
    #include <cmath>
    using namespace std;
    using namespace cv;
    
    Point2d g_p1(400, 300), g_p2(400, 500); // 直线
    
    // 画箭头
    // img:       所画的图片
    // p1,p2:     直线的起点和终点
    // angle:     箭头相对直线角度
    // length:    箭头的长度
    // color:     箭头的颜色
    // thickness: 箭头的厚度
    void draw_arrow(Mat img, const Point2d p1, const Point2d p2, const double angle, const double length, const Scalar color, const int thickness)
    {
        double l1 = length * cos(angle * CV_PI / 180), l2 = length * sin(angle * CV_PI / 180);
        Point2d p3(0, 0), p4(0, 0);
        int i = (p2.x > p1.x) ? 1 : -1; // i,j代表p2、p3、p4相对于p0的正负
        int j = (p2.y > p1.y) ? 1 : -1;
        double a1 = abs(atan((p2.y - p1.y) / (p2.x - p1.x))); // 直线p1p2相对于x轴的角度，取正值
        double w1 = l1 * cos(a1), h1 = l1 * sin(a1);          // 用于计算p2相对于p0的宽高
        Point2d p0(p2.x - w1 * i, p2.y - h1 * j);
        double a2 = 90 * CV_PI / 180 - a1;           // 直线p3p4相对于x轴的角度
        double w2 = l2 * cos(a2), h2 = l2 * sin(a2); // 用于计算p3和p4相对于p0的宽高
        p3 = Point2d(p0.x - w2 * i, p0.y + h2 * j);
        p4 = Point2d(p0.x + w2 * i, p0.y - h2 * j);
        line(img, p2, p3, color, 2); //画箭头
        line(img, p2, p4, color, 2);
    }
    
    // 鼠标回调函数
    void mouse_callback(int event, int x, int y, int flags, void *param)
    {
        static Point2d p(0, 0), p1(0, 0), p2(0, 0);
        static int n = -1;
        switch (event)
        {
        case cv::EVENT_LBUTTONDOWN: // 鼠标左键点击
        {
            p1 = Point2d(x, y);
            int w = 15, h = 15;
            Rect r1(g_p1.x - w, g_p1.y - h, 2 * w, 2 * h);
            Rect r2(g_p2.x - w, g_p2.y - h, 2 * w, 2 * h);
            if (r1.contains(p1)) // 鼠标落在g_p1
            {
                n = 1;
                p = g_p1;
            }
            else if (r2.contains(p1)) // 鼠标落在g_p2
            {
                n = 2;
                p = g_p2;
            }
            break;
        }
        case cv::EVENT_MOUSEMOVE: // 鼠标移动
            p2 = Point2d(x, y);
            if (n == 1)
            {
                g_p1 = p + p2 - p1;
            }
            else if (n == 2)
            {
                g_p2 = p + p2 - p1;
            }
            break;
        case cv::EVENT_LBUTTONUP: // 鼠标左键释放
            p1 = Point2d(0, 0);
            p2 = Point2d(0, 0);
            n = -1;
            break;
        default:
            break;
        }
    }
    
    // 主函数
    int main()
    {
        string window_name = "image";
        namedWindow(window_name, WINDOW_AUTOSIZE);
        int w = 800, h = 600;
        Mat image_original = Mat(h, w, CV_8UC3, Scalar(255, 255, 255));
        cv::setMouseCallback(window_name, mouse_callback); // 调用鼠标回调函数
        while (true)
        {
            Mat img = image_original.clone();                          // 拷贝空白图片，方便重复画图
            line(img, g_p1, g_p2, Scalar(255, 0, 0), 2);               // 画蓝线a
            draw_arrow(img, g_p1, g_p2, 20, 20, Scalar(255, 0, 0), 2); // 画箭头
            imshow(window_name, img);
            if (waitKey(3) > 0)
                break;
        }
        return 0;
    }

**操作方法：**  
  鼠标点击直线起点或终点并按住移动，可改变直线。在键盘按任意的键可退出程序。

**运行结果：**

![format_png_pic_center 1][]

![format_png_pic_center 2][]

![format_png_pic_center 3][]

![format_png_pic_center 4][]

[format_png_pic_center]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDMwMzQzNC1lMDdmNzdiNDdlYjc0OGIwLnBuZw?x-oss-process=image/format,png#pic_center
[format_png_pic_center 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDMwMzQzNC1jMTg4OWU3ZmNjZDIwNDliLnBuZw?x-oss-process=image/format,png#pic_center
[format_png_pic_center 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDMwMzQzNC05NjhiMGE2OWM1N2UyZWEwLnBuZw?x-oss-process=image/format,png#pic_center
[format_png_pic_center 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDMwMzQzNC04ZmZiMDRhZmY3NDMyNzI2LnBuZw?x-oss-process=image/format,png#pic_center
[format_png_pic_center 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDMwMzQzNC0zYzYzNzM4YWUwNmM5NWZjLnBuZw?x-oss-process=image/format,png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关学习OpenCV3：画带箭头的直线

-------------------- 一、问题现有一条直线 p 1 p 2 p\_1p\_2 p1p2，给定箭头角度`angle`，长度`length`，

迈不过友情╰/ 2023年02月22日 12:30/ 0 赞/ 186 阅读

相关学习OpenCV3：判断两条直线重合

-------------------- 一、问题已知两条直线 l 1 ( x 1 , y 1 , x 2 , y 2 ) l\_1(x\_1,y\_1,x\_2

小咪咪/ 2023年02月20日 12:29/ 0 赞/ 73 阅读

相关【opencv-python】 cv2.line(...)画直线段

【opencv-python】 cv2.line画直线段 1.背景 2.参数 3.示例 1.背景画直线段：通过连接两个点绘制。 cv2画直线

小鱼儿/ 2023年01月10日 14:39/ 0 赞/ 215 阅读

相关 iOS（CoreGraphics）画带箭头的框

自己画带箭头的框，需要导入CoreGraphics.framwork库新建一个集成UIView 的类，对UIView中的drawRect:(CGRect)rect方法重写如

- 日理万妓/ 2022年09月24日 06:20/ 0 赞/ 261 阅读

相关 css画空心箭头

![image][] <i class="u-arrow u-arrow-left "> </i> .u-arrow { display: inli

悠悠/ 2022年07月17日 16:13/ 0 赞/ 194 阅读

相关 MFC中如何画带实心箭头的直线

工作中遇到话流程图的项目，需要画带箭头的直线，经过摸索，解决；思路如下：（1）两个点（p1,p2)确定一个直线，以直线的一个端点（假设p2)为原点，设定一个角度（2）

偏执的太偏执、/ 2022年06月16日 05:20/ 0 赞/ 169 阅读

相关 OPENGL—DDA画直线

// DDA画直线 include "stdafx.h" include <gl/glut.h> include <cmath>

小鱼儿/ 2022年06月15日 11:28/ 0 赞/ 179 阅读

相关 OpenCV在图像中添加文字，画点，画直线

OpenCV在图像中添加文字，画点，画直线【尊重原创，转载请注明出处】 http://blog.csdn.net/guyuealian/article/deta

淩亂°似流年/ 2022年06月09日 13:37/ 0 赞/ 448 阅读

相关 OpenCV 学习（直线拟合)

Hough 变换可以提取图像中的直线。但是提取的直线的精度不高。而很多场合下，我们需要精确的估计直线的参数，这时就需要进行直线拟合。直线拟合的方法很多，比如一

比眉伴天荒/ 2022年05月30日 10:39/ 0 赞/ 762 阅读

相关 photoshop对选中区域填充、画矩形、带箭头直线等常用操作

photoshop对选中区域填充、画矩形、带箭头直线等常用操作选中区域填充画矩形画带箭头直线其他选中区域填充选中区域后，快捷键

淡淡的烟草味﹌/ 2021年12月23日 04:59/ 0 赞/ 274 阅读