`
chun521521
  • 浏览: 284211 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

点击图片,获取鼠标及图片坐标

 
阅读更多

 

 

自用

 

<div style="border: 1px solid red;  background: black; ">
<img src="resources/images/0.jpg" alt="" onmousedown="aaaaaa(this,event);" />
<script type="text/javascript">
function aaaaaa(ele, ev){
 var pos1 = getObjPos(ele);
 var pos2 = getEventPos(ev);

 alert(pos1.x +'|'+ pos1.y);
 alert(pos2.x +'|'+ pos2.y);
 
 return;
 
}

//图片坐标

function getObjPos(p){
 var _x = 0;
 var _y = 0;
 while(p.offsetParent){
  _x += p.offsetLeft;
  _y += p.offsetTop;
  p = p.offsetParent;
 }
 
 _x += p.offsetLeft;
 _y += p.offsetTop;
 return {x:_x,y:_y};
}

 

//鼠标坐标

function getEventPos(evt){
 var _x,_y;
 evt = evt || window.event;
 if(evt.pageX || evt.pageY){
  _x = evt.pageX;
  _y = evt.pageY;
 }else if(evt.clientX || evt.clientY){
  _x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
  _y = evt.clientY + document.body.scrollTop - document.body.clientTop;
 }else{
  return getObjPos(evt.target); 
 }
 return {x:_x,y:_y};
}

 

 


</script>
</div>

 

 

 

 

分享到:
评论

相关推荐

    PyQt6鼠标标点示例程序 QLabel图片上获取鼠标坐标并显示红点

    ### PyQt6鼠标标点示例程序 QLabel图片上获取鼠标坐标并显示红点 本代码是使用PyQt6实现的图片上鼠标标点示例。用户可以通过鼠标点击在图片上标注点,并实时获取标注点的坐标。 ## 主要功能 1. **图片标注:** ...

    获取图片鼠标点击的坐标

    因在项目中遇到要裁剪不同图片中的多边形形状.获取多边形的坐标很麻烦.找了个DigitizeXY也不好用.自己写了一个.可以复制成python对象格式

    基于LVGL的图片坐标快速获取程序

    在这个基于LVGL的图片坐标快速获取程序中,我们主要探讨如何结合C++编程语言和EasyX库来实现这一功能。 EasyX是一个简洁的Windows图形库,它是基于GDI(Graphics Device Interface)的,使得在C++中进行图形绘制变...

    PyQt5图片鼠标点击标点 QLabel实现在图片上标注点并获得坐标

    # PyQt5图片鼠标点击标点 QLabel实现在图片上标注点并获得坐标 1. PyQt5 可视化程序,使用 QLabel 显示图片; 2. 在图片上鼠标点击,会在点击处显示红点并输出该点坐标

    图片取点工具 取得图片中某点的坐标

    3. **鼠标事件处理**:监听鼠标点击事件,当用户在图像上点击时,记录下点击点的坐标。 4. **坐标显示与保存**:显示所选点的坐标,并提供选项让用户可以保存这些坐标信息,以便后续使用。 5. **优化与增强**:...

    js 动态设置图片的热区并获取图片坐标

    获取图片坐标通常涉及到鼠标事件。当用户在图片上移动鼠标或点击时,我们可以获取到鼠标的屏幕坐标。然后,我们需要转换这些坐标为图片上的像素坐标。这通常需要计算图片的缩放比例和偏移量。以下是一个简单的事件...

    Qt获取坐标(图像读取及显示,图像坐标及像素值获取及显示)

    例如,当鼠标在图像上移动时,可以连接到`mouseMoveEvent`事件来获取坐标并显示信息: ```cpp void MyWidget::mouseMoveEvent(QMouseEvent *event) { int x = event-&gt;x(); int y = event-&gt;y(); QRgb pixel = ...

    获取鼠标在文档的坐标位置(兼容多浏览器)

    - 通过获取鼠标点击位置,可以判断用户是想要向左还是向右切换图片。 2. **游戏开发**: - 在网页游戏中,玩家的许多操作都需要通过鼠标来完成。 - 了解鼠标的精确位置可以帮助开发者更准确地控制游戏中的角色或...

    python获取点击的坐标画图形的方法

    - 当检测到`MOUSEBUTTONDOWN`事件时,获取鼠标点击的坐标。 - 使用这些坐标画图,例如画直线、五边形或其他形状。 - 在主循环中不断更新屏幕,直到用户关闭窗口。 以下是一个简单的Pygame示例,用于获取点击的两...

    VS2013MFC获取鼠标位于picture控件实时坐标,和点击处坐标

    本篇文章将详细讲解如何实现获取鼠标在Picture控件上的实时坐标以及点击时的坐标。 首先,我们需要理解MFC中的CStatic类,它是用于创建各种类型静态控件的基础类,包括Picture控件。在MFC中,Picture控件通常由...

    鼠标点击图片获得该点的颜色值和坐标

    在这个场景中,用户界面会显示一张图片,当鼠标点击图片的任意位置时,系统能够返回该点击点在图片中的RGB颜色值以及其坐标位置。RGB值代表了红色(Red)、绿色(Green)和蓝色(Blue)三种颜色的强度,它们组合在...

    获取图像中鼠标的坐标值

    6. **Qt**: Qt库提供了`QMouseEvent`类,当鼠标事件触发时,你可以访问`pos()`方法获取鼠标的坐标。 7. **OpenGL**: 对于更底层的图形编程,比如使用OpenGL,你可能需要自己处理窗口系统事件,然后根据投影和模型...

    pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_

    `pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_`这个项目就是针对这一需求而设计的,它利用了PDF.js库来实现PDF文档的关键字坐标获取功能。 PDF.js是Mozilla开发的一个开源JavaScript库,用于在Web浏览器...

    基于对话框显示,动态显示jpg.bmp等图片,并获取鼠标移动的坐标值及rgb值

    在这个方法中,你可以通过调用GetMessagePos()函数获取鼠标的屏幕坐标,再通过ScreenToClient()函数转换为对话框内的客户区坐标。 4. **获取像素RGB值**:在OnMouseMove()方法中,当鼠标移动时,根据获取到的坐标,...

    Matlab如何用鼠标获取图像的像素值和坐标-test.m

    Matlab如何用鼠标获取图像的像素值和坐标-test.m 如题 我是在一个GUI里,有两个axe...我想要实现的是:图片在axe显示后,当鼠标在图片上移动,或者点击,可以得到图片的像素值和其在axe中的坐标。 求教各位大大~~~

    Qt载入图片界面并获得每个像素点坐标

    在Qt框架中,实现一个能够加载图片并在界面上显示,同时获取鼠标在图片上移动时所对应的像素点坐标的功能,需要对Qt的图形系统有深入理解。以下将详细阐述这个过程涉及的关键知识点。 首先,Qt中的`QImage`类是处理...

    VTK中鼠标拾取坐标

    VTK中拾取点坐标的例子,该例子应用了VTK中的Observer/Command机制进行调用。该程序适合VTK初学者进行学习和研究,希望对VTK初学爱好者能起到一定的作用。

    运用opencv鼠标实时截取图像并显示坐标

    在vs2013上win32控制台运用opencv鼠标实时截取图像并显示坐标

    点击图像上任意一点,即可输出该点的像素坐标

    当用户点击图像后,我们可以获取到近似整数坐标的点击位置,然后通过`subpixel`函数获取亚像素级别的精确坐标。 5. 用户交互:为了实现用户点击并输出坐标的功能,我们需要在Matlab图形用户界面(GUI)中添加一个回...

    qt ROI 图片圈选 保存圈选区域图片 获取圈选位置坐标 缩放 移动圈选区域

    在本文中,我们将深入探讨如何使用Qt库进行ROI(Region of Interest)图片圈选功能,包括保存圈选区域、获取坐标、缩放以及移动圈选区域。Qt是一个强大的跨平台应用开发框架,常用于创建图形用户界面。让我们逐一了解...

Global site tag (gtag.js) - Google Analytics