js 获取节点相对于屏幕的坐标位置,获取节点的宽高,获取鼠标事件回调的鼠标位置,计算鼠标相对于某个节点下的坐标

ops/2025/2/28 13:44:59/

获取节点相对于屏幕的坐标位置:

document.getElementById('svgBoxId').getBoundingClientRect()

获取节点的宽高:

document.getElementById('svgBoxId').offsetWidth

document.getElementById('svgBoxId').offsetHeight

获取鼠标事件回调的鼠标位置:

javascript">var mouseX = event.pageX;var mouseY = event.pageY;console.log('鼠标位置:', mouseX, mouseY);

计算鼠标相对于某个节点下的坐标:

鼠标位置 - 节点位置

注意:都是相对于屏幕的位置。


http://www.ppmy.cn/ops/161976.html

相关文章

WPF13-MVVM进阶

目录 1. 窗体设置2. 字体图标3. 控件模板4. 页面逻辑4.1. 不使用MVVM4.2. MVVM模式实现本篇我们开发一个基于MVVM的登录页面,用来回顾下之前学习的内容 登录页面如下: 窗体取消了默认的标题栏,调整为带阴影的圆角窗体,左侧放一张登录背景图,右边自绘了一个关闭按钮,文本框…

【Linux】Vim 设置

【Linux】Vim 设置 零、起因 刚学Linux,有时候会重装Linux系统,然后默认的vi不太好用,需要进行一些设置,本文简述如何配置一个好用的Vim。 壹、软件安装 sudo apt-get install vim贰、配置路径 对所有用户生效: …

IP-----动态路由OSPF(2)

这只是IP的其中一块内容,IP还有更多内容可以查看IP专栏,前一章内容为动态路由OSPF ,可通过以下路径查看IP-----动态路由OSPF-CSDN博客,欢迎指正 注意!!!本部分内容较多所以分成了两部分在上一章 5.动态路…

[特殊字符] 蓝桥杯 Java B 组 之最小生成树(Prim、Kruskal) 并查集应用

Day 3:最小生成树(Prim、Kruskal) & 并查集应用 📖 一、最小生成树(MST)简介 最小生成树(Minimum Spanning Tree, MST) 是一个 无向连通图 的 最小代价子图,它包含 …

倚光科技:助力玻璃非球面的打样与小批量生产

在现代光学和精密制造领域,非球面光学元件凭借其卓越的光学性能,已成为推动高端科技发展的核心组件。相比于传统的球面透镜,非球面透镜能够显著减少光学系统中的像差和畸变,大幅提升成像质量、系统紧凑性和能量利用率。因此&#…

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter25-客户端存储

二十五、客户端存储 客户端存储 随着 Web 应用程序的出现,直接在客户端存储用户信息的需求也随之出现。这背后的想法是合理的:与特定用户相关的信息应该保存在用户的机器上。无论是登录信息、个人偏好,还是其他数据,Web 应用程序提…

【读书笔记·VLSI电路设计方法解密】问题57:逻辑合成过程中插入测试的目的是什么

如第3章第20题所述,可测试性设计(Design for Testability, DFT)是创建具有商业价值的产品时需要考虑的一个非常重要的问题。为了实现DFT功能,使设计能够检测制造缺陷,需要在设计中添加额外的测试电路,而这些…

想学python进来看看把

目录 什么是python 我将列举python与其他几种编程语言的对比 Python vs Java Python vs JavaScript Python vs C​编辑 我将列举代码示例帮大家来理解 python c/c java 写一个python程序 你一定要知道什么是BUG呦 遇到bug怎么办 1. 保持冷静 2. 重现 Bug 3. 阅…