opencv-7-鼠标绘制自定义图形

opencvc++qt

开始之前

昨天写了具体的基本的图形绘制, 然后我们使用相应的函数接口进行调用, 便能够在图像上绘制出来相应的图形, 我们以图像绘制为例, 最终都会调用了 Line 函数, 最后都是基于一个 自定义迭代器 LineIterator的形成的路径, 通过设定起始点和目标点, 相当于计算出来的斜率值, 每次累加的之后判断下一个点的位置, 通过 重载累加器的 ++ 操作, 完成直线点指针的移动, 在相应的位置填入相应的颜色就可以得到 所要绘制的线, 这里是函数的调用图, 可放大查看细节部分


Line 函数调用图

这里不再深入探讨, 相应的可以去研究具体的实现, 很漂亮的源码, 写的很好

我们这个章节 看一个比较高级点的操作, 操作起来比较复杂, 先不去深究其中的原理, 我们先跑起来, 然后再研究

正文

主要是处理鼠标的操作就好, 然后使用绘制图像就好, 可以参考博文《OpenCV:鼠标操作(绘制直线、矩形、圆)简单示例》

和博文OpenCV鼠标画图例程,鼠标绘制矩形,

鼠标绘制图像

我们先梳理一下逻辑, 我们使用两张图片作为轮换, 原始图和临时图, 每次绘制在临时图上, 然后完成之后存入原始图上

  • 初始原始图像, 绘图标志 flg false
  • 鼠标按下, 确定起始点 start_p 标志开始绘图
  • 鼠标移动, 移动目标点 end_p, 绘制到临时图像上
  • 鼠标抬起, 确定最后的点, 然后将图替换原始图, 同时 绘图标志结束flg = false
  • 循环绘制图像, 绘图中的时候 显示临时图像, 绘图之后 显示原始图像,

逻辑理清除之后,我们就想要处理一下细节部分了, 我们在之前的博文中介绍了显示图像的方式, imshow即可显示, 然后我们

发现问题在于程序的鼠标是件监听了, 这里其实比较深入了, 但是呢, 我们不深入去研究, 只去看实现的过程吧,

cv::setMouseCallback(windows_name, on_MouseHandle, 0);, 我们第一个 windows_name 是我们打开的窗口名称, 用于显示图像, 也能通过名称进行句柄操作, 第二个参数就是我们的鼠标处理函数了, on_MouseHandle(int event, int x, int y, int flags, void *param), 这里的函数名称可以自定义, 但是参数类型与个数必须一致, 然后我们就可以通过预定义的事件宏进行确定当前鼠标操作的动作了, 这里 比如cv::EVENT_MOUSEMOVE 宏就是 鼠标移动事件, cv::EVENT_LBUTTONDOWN,和cv::EVENT_LBUTTONUP 分别对应鼠标按下和鼠标抬起的操作, 命名写的很清楚

编码实现

我们在逻辑理清除 之后, 写起来就很简单了, 可以的大傲下面的代码, 注释也比较清除, 能够一看就懂

#include "mainwindow.h"
#include <QApplication>
// 引入 opencv 函数头文件
#include <opencv2/opencv.hpp> // 记录鼠标位置点, 以及 正在绘图标志位 flg
cv::Point start_p(-1, -1), end_p(-1, -1);
bool flg_drawing = false; // 使用原始图像与临时图像 存储
cv::Mat src_img, temp_img; //鼠标回调函数 // 记录窗口的x y 位置
void on_MouseHandle(int event, int x, int y, int flags, void *param)
{
switch (event)
{
case cv::EVENT_LBUTTONDOWN:
{
start_p = cv::Point(x, y); // 确定起始点
temp_img = src_img.clone(); // 复制原始图, 进行绘图操作
flg_drawing = true;
}break;
case cv::EVENT_MOUSEMOVE:
{
if (flg_drawing)
end_p = cv::Point(x, y); // 如果在绘制, 则更新移动后的目标点
}break;
case cv::EVENT_LBUTTONUP:
{
end_p = cv::Point(x, y); // 确定最终点
src_img = temp_img.clone(); // 将图像更新成为原始图 存储下来
flg_drawing = false;
}break;
}
} // 返回两点之间的距离 直线距离 平方和的开方值
float distance(const cv::Point &p1, const cv::Point &p2)
{
return cv::sqrt((p1.x - p2.x)*(p1.x - p2.x) + (p1.y - p2.y)*(p1.y - p2.y));
} int main(int argc, char *argv[])
{
//QApplication a(argc, argv);
//MainWindow w;
//w.show();
// 设置 要显示的图像路径
std::string img_lena = "./TestImages/lena.png";
src_img = cv::imread(img_lena); std::string windows_name = "show";
cv::namedWindow(windows_name,cv::WINDOW_AUTOSIZE); // 设置窗口 鼠标操作 监听 函数为 on_MouseHandle
cv::setMouseCallback(windows_name, on_MouseHandle, 0); while (true)
{
// 根据当前点 绘制
if (flg_drawing)
{
temp_img = src_img.clone(); cv::line(temp_img, start_p, end_p, cv::Scalar(0, 255, 0));
cv::rectangle(temp_img, cv::Rect(start_p, end_p), cv::Scalar(255, 0, 0));
cv::circle(temp_img, start_p, distance(start_p,end_p), cv::Scalar(0, 0, 255));
cv::imshow(windows_name, temp_img);
}
else
{
cv::imshow(windows_name, src_img);
}
// 设置 按 esc 退出循环
if (cv::waitKey(30) == 27)
break;
}
return 0;
// return a.exec();
}

运行结果

然后就到了我们结果的时候了, 运行之后, 鼠标左键点击开始, 拖动实时绘制, 抬起结束绘制, 然后 我们绘制了 直线, 矩形, 和圆, 同时进行了绘制,


鼠标绘制图像

ps: 这里录制 gif 使用的是 ScreenToGif 特别好用

我们实现的比较简单, 可以去看我提到的两篇博文, 以及这一篇鼠标作为画笔 翻译的文档,

他们实现的比较复杂, 不仅实现了绘制, 还能够选择绘制什么, 也提供了 随机颜色的方法, cv::RNG

可以参考OpenCV中随机颜色, 随机颜色的解释, 听简单的, 初始化随机, 自动生成随机颜色就行了,

// 随机颜色绘制
cv::line(temp_img, start_p, end_p, cv::Scalar(rng.uniform(0, 255), rng.uniform(0, 255), rng.uniform(0, 255)));
cv::rectangle(temp_img, cv::Rect(start_p, end_p), cv::Scalar(rng.uniform(0, 255), rng.uniform(0, 255), rng.uniform(0, 255)));
cv::circle(temp_img, start_p, distance(start_p,end_p), cv::Scalar(rng.uniform(0, 255), rng.uniform(0, 255), rng.uniform(0, 255)));

自定义颜色绘制

其他


opencv-7-鼠标绘制自定义图形的更多相关文章

  1. [Xcode 实际操作]九、实用进阶-(19)重写父类的绘图方法,使用图形上下文绘制自定义图形

    目录:[Swift]Xcode实际操作 本文将演示如何使用图形上下文,绘制自定义图形. 使用快捷键[Command]+[N]创建一个新的类文件. (在项目文件夹[DemoApp]上点击鼠标右键[New ...

  2. 使用Ogre::ManualObject 绘制自定义图形

    在ogre中如果需要进行自定义图形绘制可以使用ManualObject.例如绘制一个三角形的用法如下: SceneNode* pGridNode = m_pBaseNode->createChi ...

  3. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  4. C# 绘制PDF图形——基本图形、自定义图形、色彩透明度

    引言 在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...

  5. 在OpenCV中利用鼠标绘制矩形和截取图像的矩形区域

    这是两个相关的程序,前者是后者的基础.实际上前一个程序也是在前面博文的基础上做的修改,请参考<在OpenCV中利用鼠标绘制直线> .下面贴出代码. 程序之一,在OpenCV中利用鼠标绘制矩 ...

  6. 自定义View—绘制基本图形

    一.Canvas能够绘制哪些图形 二.

  7. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

  8. 关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html 之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL ...

  9. 绘制基本图形和线型(StrokeStyle)的设置详解

    绘制基本图形和线型(StrokeStyle)的设置详解 目前,在博客园上,相对写得比较好的两个关于Direct2D的教程系列,分别是万一的Direct2D系列和zdd的Direct2D系列.有兴趣的网 ...

随机推荐

  1. Educational Codeforces Round 83 (Rated for Div. 2)

    A. Two Regular Polygons 题意:给你一个 正n边形,问你能否以这个 n 的其中一些顶点组成一个 m边形, 思路 :如果 n % m == 0 ,就可 收获:边均分 B. Bogo ...

  2. Oracle ROWNUM用法

    很多朋友应该跟我一样有个疑问,为什么rownum > 5 的时候会查不到一条数据,用rownum < 5就可以查到数据,明明查询所有的时候rownum有很多啊,小朋友,你是不是有很多问号? ...

  3. Oracle 12C安装教程

    Oracle 12C安装教程 由 Alma 创建, 最后一次修改 2018-06-04 10:32:31 Oracle 12c,全称Oracle Database 12c,是Oracle 11g的升级 ...

  4. 数据科学 R语言速成

    文章更新于:2020-03-07 按照惯例,需要的文件附上链接放在文首: 文件名:R-3.6.2-win.exe 文件大小:82.4M 下载链接:https://www.lanzous.com/i9c ...

  5. MODIS系列之NDVI(MOD13Q1)一:数据下载(二)基于FTP

    这一篇我们来介绍下MODIS数据的下载方式.当然这边主要是介绍国外网站的下载方式,国内网站的普遍是在地理空间数据云和遥感集市下载.国外网站(NASA官网)下载方式主要介绍两种.本篇主要针对第一种方式, ...

  6. "被删除的文本"组件:<del> —— 快应用组件库H-UI

     <import name="del" src="../Common/ui/h-ui/text/c_tag_del"></import> ...

  7. 01-启动jmeter目录功能

    1.bin :存储了jmeter的可执行程序,如启动脚本.配置程序 docs:    api扩展文档存放 lib:   lib\ext   存储了jmeter的整合的功能(如.jar文件程序,和第三方 ...

  8. 外观模式(c++实现)

    外观模式 目录 外观模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 模式定义 外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...

  9. Spring温习(1)--最基础的示例

    Spring温习(1)--最基础的示例 博客分类: 框架-Spring专栏 SpringXMLBeanWebDAO 从现在开始,我将从Spring为起点,逐步复习几大框架各方面的知识,以便今后查看使用 ...

  10. 2019应届生,用python爬虫记录自己求职经历,分享求职中的一些坑

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...