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

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

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);

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

鼠标位置 - 节点位置

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

相关推荐
Highcharts.js9 分钟前
在 React 中使用 useState 和 @highcharts/react 构建动态图表
开发语言·前端·javascript·react.js·信息可视化·前端框架·highcharts
likerhood24 分钟前
java中的return this、链式编程和Builder模式
java·开发语言
原来是猿1 小时前
Linux线程同步与互斥(三):POSIX信号量与环形队列生产者消费者模型
linux·运维·服务器·开发语言
未来转换1 小时前
基于A2A协议的生产应用实践指南(Java)
java·开发语言·算法·agent
Rust语言中文社区1 小时前
【Rust日报】Clone:像进程一样 fork 虚拟机的 Rust KVM VMM
开发语言·后端·rust
求知也求真佳1 小时前
S02|工具使用:让 Agent 真正会干活,添加工具
开发语言·agent
Dwzun1 小时前
基于Java+SpringBoot+Vue的校园二手物品置换系统设计与实现【附源码+文档+部署视频+讲解】
java·开发语言·spring boot
charlie1145141911 小时前
嵌入式Linux驱动开发(3)——内核模块机制 - Linux 的插件系统
linux·运维·开发语言·驱动开发·嵌入式硬件·学习
|晴 天|1 小时前
Vue 3 实战:打造可拖拽歌词、播放列表的嵌入式音乐播放器
前端·javascript·vue.js
Liu.7741 小时前
Vue 3 开发中遇到的报错(2)
前端·javascript·vue.js