精华内容
下载资源
问答
  • 一、通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head>...通过JS获取图片相对坐标位置</title&g...

    一、通过JS获取鼠标点击时图片的相对坐标位置

    源代码如下所示:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>通过JS获取图片的相对坐标位置</title>
     7 
     8     <style>
     9         body {margin: 0; padding: 0; }
    10         #area{width:300px;height:300px;}
    11         #area img{border:none;cursor:pointer;width: 300px;height: 300px;}
    12         .testBox {
    13             width: 200px;
    14             height: 200px;
    15             overflow: auto;
    16         }
    17     </style>
    18 </head>
    19 
    20 <body id="">
    21     <h3>通过JS获取图片的相对坐标位置 示例</h3>
    22     <div class="testBox">
    23         <div id="area" onclick="getClickPos(event);">
    24             <img id='imageID'   src="images/1.jpg">
    25         </div>
    26     </div>
    27 
    28 
    29     <script type="text/javascript">
    30         function getClickPos(e){
    31             var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
    32             var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
    33             identifyImage = document.getElementById("imageID");
    34             img_x = locationLeft(identifyImage);
    35             img_y = locationTop(identifyImage);
    36             var xPos = xPage-img_x;
    37             var yPos = yPage-img_y;
    38             alert('X : ' + xPos + '\n' + 'Y : ' + yPos);
    39         }
    40         //找到元素的屏幕位置
    41         function locationLeft(element){
    42             offsetTotal = element.offsetLeft;
    43             scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
    44             if (element.tagName != "BODY"){
    45                 if (element.offsetParent != null)
    46                     return offsetTotal+scrollTotal+locationLeft(element.offsetParent);
    47             }
    48             return offsetTotal+scrollTotal;
    49         }
    50         //find the screen location of an element
    51         function locationTop(element){
    52             offsetTotal = element.offsetTop;
    53             scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
    54             if (element.tagName != "BODY"){
    55                 if (element.offsetParent != null)
    56                     return offsetTotal+scrollTotal+locationTop(element.offsetParent);
    57             }
    58             return offsetTotal+scrollTotal;
    59         }
    60     </script>
    61 </body>

     

    补充

     

    二、js图片上标注热点(相对定位)

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <style>
            .wrap{
                width:200px;
                height: 200px;
                overflow: auto;
                background: #ccc;
                position: relative;
            }
            .ball{
                width:20px;
                height: 20px;
                background: red;
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="images/1.jpg" alt="">
        </div>
        <script>
            $('.wrap').click(function(e){
                var radius=10;//半径
                var offset=$(this).offset();
                var top=e.pageY-offset.top-radius+"px";
                var left=e.pageX-offset.left-radius+"px";
                console.log(top);
                console.log(left);
                $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
            })
        </script>
    </body>
    </html>
    

      

    转载于:https://www.cnblogs.com/jialinG/p/7851828.html

    展开全文
  • Qt获取鼠标位置(绝对位置、相对位置

    万次阅读 多人点赞 2016-04-01 11:46:02
    在进行界面编程时,经常需要获取鼠标的位置,特别是需要知道鼠标在界面上某个控件的相对位置。在Qt其实获取这几种位置还是比较简单的。首先我们需要了解Qt的坐标系统,Qt的坐标系统是有QPainter类控制的,而QPainter...

    在进行界面编程时,经常需要获取鼠标的位置,特别是需要知道鼠标在界面上某个控件的相对位置。在Qt其实获取这几种位置还是比较简单的。首先我们需要了解Qt的坐标系统,Qt的坐标系统是有QPainter类控制的,而QPainter是在绘图设备上绘制。而有时我们并不需要进行绘图只需要通过鼠标事件获取坐标位置而已,这时我们需要了解两点:坐标系统和控件的层次关系。首先默认坐标系统中原点(0,0)在其左上角,x坐标向右增长,y坐标向下增长。在基于像素的设备上,默认的单位是一个像素,而在打印机上默认的单位是一个点(1/72英寸)。控件的层次关系是根据控件在界面中的布局位置决定的,如下:leftImgLabel的位置就相对于centralWidget而言,通过leftImgLabel.pos()获取的位置并不是全局位置而是相对于centralWidget的位置。


    如果通过leftImgLabel来显示图片,通过鼠标来获取图片中某个点的位置,如果直接使用鼠标事件中的event->pos()获取的位置并不对应你实际标注的图像上的点,而是鼠标相对于当前窗口的位置(event->globalPos()获取的鼠标相对于当前显示器的位置,可以采用任意截图工具进行测试)。这时就需要将鼠标坐标根据控件的层次关系去转换。


    上图中红色方框右下角的坐标:event->pos():QPoint(269,287),event->globalPos: QPoint(763,549)而真实对应的图片中的坐标则是pos()-(centralWidget.pos()+leftImgLabel.pos())(窗口坐标减去父窗口坐标和当前窗口坐标).

    其实在Qt中有比较简单的方式去获取QLabel上内容的坐标:

                leftButtomRightPoint = event->globalPos();                          //获取全局位置
    
    
    
    
                leftButtomRightPoint = ui->leftImgLabel->mapFromGlobal(leftButtomRightPoint);
    首先鼠标获取全局坐标,然后通过QLabel封装的mapFromGlobal函数进行转换。注意这时获取的坐标都还只是QLabel中的位置(相对于QLabel的坐标原点而言)!但是由于QLabel的具体范围和QLbael上显示的内容位置并不一致,如果QLabel显示的图片如下:


    此时图片并没有填充满整个QLabel的空间,只是占用其中一部分内容,这时就需要知道图像在QLabel中的具体位置了。当图像不能填充满整个QLabel空间时,需要在QLabel的显示属性设置对齐方式,这时推荐采用居中对齐(方便后续处理,其他对齐方式计算可能不方便)

    设置QLabel的对齐方式采用:

    ui->leftImgLabel->setAlignment(Qt::AlignCenter);		//居中显示
    设置好显示方式后,就可以知道图像在QLabel中的位置啦(正中间),然后就可以计算图像相对于QLabel的偏移量啦,计算方式如下:

                //QLabel内容相对于QLbael本身的偏移量
                xoffset = (ui->leftImgLabel->contentsRect().width()-ui->leftImgLabel->pixmap()->rect().width())/2;
                yoffset = (ui->leftImgLabel->contentsRect().height()-ui->leftImgLabel->pixmap()->rect().height())/2;

    contentsRect表示的是QLabel的内容范围,而pixmap->rect()则表示的图像的实际大小,通过这样的处理就可以得出图像相对于QLabel的具体偏移量,然后这时就可以真正将鼠标坐标转换成图像上的点位置了:

                topPoint.x = leftTopLeftPoint.x()-xoffset;
                topPoint.y = leftTopLeftPoint.y()-yoffset;
                buttomPoint.x = leftButtomRightPoint.x()-xoffset;
                buttomPoint.y = leftButtomRightPoint.y()-yoffset;
    通过这样的转换终于可以将鼠标选取的点转为我们想要的坐标(相对坐标).

    总结:

    1.注意控件的层次关系

    2.注意填充内容相对于控件本身的位移

    展开全文
  • swt中获取图片相对路径的方法

    千次阅读 2011-08-17 14:47:25
    图片路径 根目录下/images/abc.jpg Image img = new Image(null, this.getClass().getResourceAsStream("/images/abc.jpg"));

    图片路径    根目录下/images/abc.jpg

    Image img = new Image(null, this.getClass().getResourceAsStream("/images/abc.jpg"));


    展开全文
  • JS获取图片相对路径和绝对路径

    万次阅读 2018-08-08 20:31:13
    案例 —— 点击图片实现body背景图的切换: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...

    案例 —— 点击图片实现body背景图的切换:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-image: url("images/1.jpg");
            }
            #mask {
                height: 200px;
                background: rgba(255,255,255,0.4);
                /*可以使内容(图片)居中*/
                text-align: center;
            }
            #mask img {
                width: 200px;
                margin-top: 20px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="mask">
          <img src="images/1.jpg" alt="">
          <img src="images/2.jpg" alt="">
          <img src="images/3.jpg" alt="">
        </div>
        <script>
            var maskObj = document.getElementById("mask");
            var imgObjs = maskObj.children;
            for (var i = 0; i < imgObjs.length; i ++) {
                imgObjs[i].onclick = function () {
                    console.log(this.src); //获取的图片的绝对路径
                    console.log(this.getAttribute("src"));  //获取的是图片的相对路径
                    document.body.style.backgroundImage = "url("+this.getAttribute("src")+")";
                };
            };
        </script>
    </body>
    </html>

    核心知识点:
    这里写图片描述

    在控制台打印的结果如下:

    这里写图片描述

    展开全文
  • delphi 获取元素相对屏幕的位置

    千次阅读 2015-04-26 12:08:40
    由于需要点击验证码刷新,所以需要获取相对屏幕的位置,代码如下: var doc:IHTMLDocument3; ele2:IHTMLElement2;p:TPoint;begin doc:=WebBrowser1.Document as IHTMLDocument3; ele2:=doc.getElementById...
  • js获取鼠标点击事件的相对位置

    千次阅读 2014-11-12 08:52:24
    比如一张图片位于你网页中,需要实现 滚动条效果 获取相对图片we
  • 显示图片相对当前的文档所处的位置。 document.getElementById(obj).getAttribute('src')   获取绝对路径 显示是图片的完整路径,即在服务器的哪个文件夹下和文件命名。 document.getElementById(obj)....
  • 一、通过JS获取鼠标点击时图片相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <...
  • Python获取绝对路径 先说一下python获取当前运行文件绝对路径的方法。 styleSheet"相对"路径加载图片 styleSheet用相对路径我是怎么试都不管用。...我先获取到运行文件的决定位置,再根据相对路径合成新的路径。
  • java解析docx获取文字图片并识别图片准确位置需求简述功能模块版本1生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的...
  • 在web开发中,碰到数据库保存图片路径为相对路径(如:/image/60123200007.jpg),图片放置位置实际为本项目的根目录上(跟src同级,原因:避免项目清除缓存时,重新部署误删); 本人是利用服务器Tomcat的docBase...
  • 但在读取一张图片以及写入图表方面还可以,我的问题解决不了了,肿么办??????   java如何读取excel中自制的统计图表,然后将读到的图表生成 png格式的图片??? 注:图表可能是一个完整的模板,也可能是...
  • C#获取相对路径的方法

    千次阅读 2018-08-15 18:36:56
    C#获取相对路径的八种方法 C#获取相对路径1.  获取和设置当前目录的完全限定路径。  string str = System.Environment.CurrentDirectory; Result: C:xxxxxx   C#获取相对路径2.  获取启动了应用程序的可执行文件...
  • 需要获取颜色的图片以走下角为起点建立空物体 右上角建立空物体(两个空物体均设置为图片的子物体,设置好锚点,将坐标改为0即可)。建立好碰撞体(BoxCollider)。用2DBoxCollider的话从摄像机发射的射线无法检测到...
  • 1、界面位置介绍 x()、y()和pos()函数的作用都是获得整个窗体左上角的坐标位置。 frameGeometry()与geometry()相对应。frameGeometry()是获得整个窗体的左上顶点和长、宽值,而geometry()函数获得的是窗体内中央...
  • C#如何获取鼠标相对当前窗口的坐标

    千次阅读 2014-07-14 13:39:01
    可以用Control.MousePosition获得当前鼠标的坐标,使用PointToClient计算鼠标相对于某个控件的坐标,如下 Point screenPoint = Control.MousePosition;//鼠标相对于屏幕左上角的坐标 Point formPoint = this....
  • 对于一个APP来说, 照片选择是经常会用到的功能.... * 拍照获取图片, imageUri.getPath() 图片路径 */ public static void getPhotoFromCamera(Activity context, int requestCode, Uri imageUri) { Int
  • 获取图片中某一点的颜色

    千次阅读 2018-06-26 16:52:46
    项目主要包含两个类 : ...获取图片某一点的颜色 GetScreenPointColor中包括3个方法: getClickedColorWithTouches:: 当有一个或多个手指触摸事件在当前视图或window窗体中响应 getClickedPointWithTou...
  • js获取dom元素位置来定位元素

    千次阅读 2014-09-03 19:36:02
    但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。所以我
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • Selenium_获取相对坐标

    千次阅读 2016-03-15 17:04:00
    &lt;...gt; &lt;head&...位置&lt;/title&gt; &lt;style&gt; .test { background: url("image/omeoclickimg.jpg"); } &lt;/style&gt; &l
  • vue定位 获取用户位置信息

    万次阅读 2019-07-04 10:17:43
    关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位。...百度定位:定位的位置与实际位置偏差太大,我从郑州的一个小县城定位到了...
  • 编写客户端应用程序时,经常要用到鼠标当前的位置。 在C#的winform开发中,可以用Control.MousePosition获得当前鼠标的坐标,使用PointToClient计算鼠标相对于某个控件的坐标。 示例如下: Point screenPoint = ...
  • Android中获取控件的位置

    千次阅读 2016-07-20 16:12:36
    getLocationOnScree:计算该视图在全局坐标系中的x,y值,(注意这个值是要从屏幕顶端算起,也就是索包括了通知栏的高度)//获取在当前屏幕内的绝对坐标 getLocationInWindow :计算该视图在它所在的widnow的...
  • django获取图片/文件路径

    千次阅读 2019-04-23 00:10:50
    使用django给前端返回json数据时,对于图片的处理时常返回图片的url地址,android端使用图片加载框架加载图片. django返回图片url地址: class UserInfo(models.Model): username = models.CharField(max_length=20,...
  • 获取图片旋转后的坐标点

    千次阅读 2014-12-03 23:52:06
    --在图片里添加四个端点,通过四个端点来获取图片坐标点。 function GameScene:createLayerFarm() local layerFarm = cc.Layer:create() --图片精灵 width 100 height 200 self.shell_22 = cc.Sprite:...
  • java中获取图片路径 的问题

    千次阅读 2011-03-15 17:50:00
    获取一个图片,可以用一个类ImageIcon(javax.swing.*)获得。其中一种方法为: ImageIcon pic = new ImageIcon("*****") "*****" 是图片的路径。...相对路径,对于图片的放置位置有一定的
  • JavaFX不同存放位置图片获取方法

    千次阅读 2015-07-24 23:43:26
    该类表示各种图像文件,可以通过指定的URL获取相应的图片图片可以在加载的时候改变大小,可以减少图片的存储消耗。应用可以在缩放图片时指定图片过滤质量,或者指定是否保持图片的尺寸比例。 所有URL...
  • vue 绑定图片相对路径

    千次阅读 2020-03-26 13:59:38
    但是 使用过程中发现一个问题,vue绑定图片相对地址” 图片并不能展示出来。 完整代码部分: <template> <div class="zuop-award"> <div class="work-title"> <img src="....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 98,698
精华内容 39,479
关键字:

获取图片相对位置