利用matplotlib为图片上添加触发事件进行交互

这篇文章的目的出于实验的需要,我需要对图片上的部分区域做出涂抹标记,本来是选择用opencv做交互的,但在需要进行图像的输出以及鼠标时间添加时,opencv出现错误。

解决方案网上有很多,尝试以后依然bug,这里先做一个记录,有时间再来处理。

错误报告如下:

OpenCV Error: Unspecified error (The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Carbon support. If you are on Ubuntu or Debian, install libgtk2.0-dev and pkg-config, then re-run cmake or configure script) in cvShowImage, file -------src-dir-------/opencv-2.4.10/modules/highgui/src/window.cpp, line 501
Traceback (most recent call last):
File "test.py", line 20, in <module>
cv2.imshow('img',img)
cv2.error: -------src-dir-------/opencv-2.4.10/modules/highgui/src/window.cpp:501: error: (-2) The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Carbon support. If you are on Ubuntu or Debian, install libgtk2.0-dev and pkg-config, then re-run cmake or configure script in function cvShowImage

这里我们切换另一种解决方案,利用python的matplotlib库完成图像的输出以及鼠标事件的添加。

点击图片,在图像中鼠标对应位置画点:

# coding=utf-8
from matplotlib import pyplot as plt
import cv2

def on_press(event):
 if event.inaxes == None:
  print "none"
  return
 #在鼠标的当前位置绘制一个点
 ax.scatter(event.xdata, event.ydata)
 #更新画板
 fig.canvas.draw()

if __name__ == "__main__":
 fileN = r'./0107_1.3.6.1.4.1.14519.5.2.1.6279.6001.263660956768649083933159084365.bmp'
 img = cv2.imread(fileN)
 cv2.imshow('img',img)
 fig = py.figure()
 fig.canvas.mpl_connect("button_press_event", on_press)
 ax = fig.add_subplot(121)
 ax1 = fig.add_subplot(122)
 ax.imshow(img)
 ax1.imshow(img)
 plt.axis("off")
 plt.show()

先来简单解释一下代码的含义:

fig.canvas.mpl_connect("button_press_event", on_press)#在这个figure上加点击事件,点击后的情况在自己写的on_press()方法里
def on_press(event):
  event.inaxes.figure.canvas.draw()#用于图片刷新
  event.x#事件的坐标用于其他按钮点击和figure点击发生冲突时判断返回
  event.xdata,event.ydata#鼠标点击的位置,与上面那个坐标表示形式不同 

最后的输出结果入下图。我们得到了非常奇怪的结果,如果你自己亲自动手试的话体会应该会更有体会,两边的图像本来应该一样大,但在第一次绘制点的时候,左侧图像出现了闪动,然后尺寸的比例突然发生了变化。

是的,图像尺寸没有发生变化,但尺寸的比例的确变了,这里我们要做的就是关闭自动变化的尺度比例。

if __name__ == "__main__":
 fileN = r'./0107_1.3.6.1.4.1.14519.5.2.1.6279.6001.263660956768649083933159084365.bmp'
 img = cv2.imread(fileN)
 cv2.imshow('img',img)
 fig = py.figure()
 fig.canvas.mpl_connect("button_press_event", on_press)
 ax = fig.add_subplot(121)
 ax1 = fig.add_subplot(122)
 ax.imshow(img)
 ax1.imshow(img)
 #关闭自动尺度适配
 ax.set_autoscale_on(False)
 plt.axis("off")
 plt.show()

当然,我们可以改变绘制标记的样式:

ax.scatter(x,y,c='k',s=25,alpha=1.0,marker='o')
#T:散点的颜色
#s:散点的大小
#alpha:是透明程度

现在我们能够在图像上进行标记了,但这样还不够,程序需要获取这些标记点。

实际上fig.canvas.mpl_connect("button_press_event", on_press)能够进行自定义的多参数传递,如果在每次绘制的时候将数据保存在外部传入的列表中,那么当画板被销毁时,我们就能获取到原来所有的绘制点。

这里介绍两种使用方法:

def on_key(event, arg1, arg2, arg3):
 pass
canvas.mpl_connect('key_press_event', lambda event: on_key(event, plt1, plt2, plt3))

def on_key(event, args_list):
 pass
fig.canvas.mpl_connect('key_press_event', lambda event: on_key(event, [plt1, plt2, plt3]))

这里需要注意的是scatter绘制的点,实际上并没有大小的概念,这个点实质是一个坐标。

如果需要绘制有实际面积的圆形的标记,可以使用matplotlib.patches.Circle

具体的使用如下:

from matplotlib.patches import Circle

fig = plt.figure()
ax = fig.add_subplot(111)
cir = Circle(xy = (event.xdata, event.ydata),facecolor = 'black', edgecolor='black',radius=10, alpha=1.0)
ax.add_patch(cir)

以上这篇利用matplotlib为图片上添加触发事件进行交互就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在matplotlib中改变figure的布局和大小实例

    以下来自Stack Overflow 从上面我们可以很清晰的看出应该如何使用matplotlib的figure方法. 补充知识:matplotlib 设置图形大小时 figsize 与 dpi 的关系 matplotlib 中设置图形大小的语句如下: fig = plt.figure(figsize=(a, b), dpi=dpi) 其中: figsize 设置图形的大小,a 为图形的宽, b 为图形的高,单位为英寸 dpi 为设置图形每英寸的点数 则此时图形的像素为: px, py = a*d

  • 解决matplotlib.pyplot在Jupyter notebook中不显示图像问题

    在代码首行添加: %matplotlib inline 即可. 补充知识:jupyter不能显示Matplotlib 动画 看莫烦老师的matplotlib教程中,有一段sinx函数动画,用Jupyter跑却不能显示动画效果. 解决方案:在前面加一句%matplotlib notebook 动画代码如下: %matplotlib notebook import tensorflow as tf import numpy as np import matplotlib.pyplot as plt

  • 使用matplotlib动态刷新指定曲线实例

    我就废话不多说啦,还是直接看代码吧! from matplotlib import pyplot as plt import numpy as np x = np.linspace(1, 100, 20) y = x *2 +3 fig = plt.figure() ax = fig.add_subplot(1,1,1) ax.scatter(x, y) plt.ion() for i in range(10): y = x*i*0.1 + i try: ax.lines.remove(line

  • Python matplotlib实时画图案例

    实时画图 import matplotlib.pyplot as plt ax = [] # 定义一个 x 轴的空列表用来接收动态的数据 ay = [] # 定义一个 y 轴的空列表用来接收动态的数据 plt.ion() # 开启一个画图的窗口 for i in range(100): # 遍历0-99的值 ax.append(i) # 添加 i 到 x 轴的数据中 ay.append(i**2) # 添加 i 的平方到 y 轴的数据中 plt.clf() # 清除之前画的图 plt.plot(

  • python中matplotlib实现随鼠标滑动自动标注代码

    Python+matplotlib进行鼠标交互,实现动态标注,数据可视化显示,鼠标划过时画一条竖线并使用标签来显示当前值. Python3.6.5,代码示例: import matplotlib.pyplot as plt import numpy as np def Show(y): #参数为一个list len_y = len(y) x = range(len_y) _y = [y[-1]]*len_y fig = plt.figure(figsize=(960/72,360/72)) ax

  • jupyter notebook 实现matplotlib图动态刷新

    我就废话不多说了,大家还是直接看代码吧! import matplotlib %matplotlib inline from IPython import display 需要刷新的地方,画完图之后添加 display.clear_output(wait=True) 补充知识:jupyter notebook matplotlib绘制动态图并显示在notebook中 有些时候matplotlib 的绘图没法显示在notebook中,或者显示不了.这与backend有关. 首先启动你的notebo

  • 利用matplotlib为图片上添加触发事件进行交互

    这篇文章的目的出于实验的需要,我需要对图片上的部分区域做出涂抹标记,本来是选择用opencv做交互的,但在需要进行图像的输出以及鼠标时间添加时,opencv出现错误. 解决方案网上有很多,尝试以后依然bug,这里先做一个记录,有时间再来处理. 错误报告如下: OpenCV Error: Unspecified error (The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Carbon s

  • 如何利用Java在图片上添加文字水印效果

    目录 前言 [1]获取原图片对象 (1.1)读取本地图片 (1.2)读取网络图片 [2]创建画笔 [3]添加文字水印 [4]获取处理图片 [5]源代码 总结 前言 今天分享一个:通过Java代码,给图片添加文字. 比如下面这个图片,我们在左下角就添加了一个文字版的水印,那么这是如何实现的呢 ? [1]获取原图片对象 首先,第一步,肯定是要让我们的程序,拿到需要处理的图片. 我们程序获取图片的方式,通常有两种,一种是通过下载到本地,从本地读取:另外一种就是通过网络地址进行获取. (1.1)读取本地

  • jquery利用拖拽方式在图片上添加热链接

    本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松

  • python实现图片上添加图片

    在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path):用来创建一个新的图片文件.该文件位于path所在的路径中.打开后返回Image类型的图片. open(path):用来打开已经存在的图片文件.该文件位于path所在的路径中.打开后返回Image类型的图片. save(path):用来把创建或者打开的图片保到path所在的路径中. paste(i

  • 利用nodeJS+vue图片上传实现更新头像的过程

    目录 思路: 1.前端准备 2.node后端服务 总结 思路: 前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像. 1.前端准备 前端采用vue的el-upload组件,具体用法见官方API.使用代码如下 <!--头像上传--> <el-upload class="avatar-uploader" action="ht

  • java实现在一张大图片上添加小图及文字

    目录 在一张大图上添加小图及文字 实现给图片添加水印 1. 添加文字水印 2. 添加图片水印 在一张大图上添加小图及文字 import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageDecoder; import com.sun.image.codec.jpeg.JPEGImageEncoder; import javax.swing.*; import java.awt.*; impor

  • Android自定义ImageView实现在图片上添加图层效果

    首先我们先看下效果图 实现思路 这是两张前后对比图,右边第二张图里面的已抢光标签图片当已经没有商品的时候就会显示了,在每个图片的中心位置,第一想法是在ImageView的外层再套一层RelativeLayout 实现方法 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <SelectableRoundedImageVi

  • php 图片上添加透明度渐变的效果

    复制代码 代码如下: <?php ////$strimgsrc = file_get_contents("http://127.0.0.1/5307754.jpg"); ////$imgsrc = imagecreatefromstring($strimgsrc); $imgsrc = imagecreatefromjpeg("5307754.jpg"); $imgsrcw = imagesx($imgsrc); $imgsrch = imagesy($img

  • 使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)

    1.业务需求背景 业务提供一张底层图片1以及需要在底层图片上添加的图片2,两张图片大小不一致,将小图2添加到底图1中,并在其他的空白部分添加个性化的文本信息 2.图片处理逻辑 在底层图片上添加文本信息,图片另存到一个新的路径,命名为图3 将图3和图2合并,处理位置信息,透明率等,将处理完成之后的图片另存到新的路径,命名为图4 3.代码处理部分 3.1 图片上添加文本信息 from PIL import Image,ImageDraw,ImageFont # 底图添加字体文本 im = Image

  • 详解vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

随机推荐