gpt4 book ai didi

javascript - 如何获取 getBoundingClientRect 顶部和底部中包含的确切偏移量?

转载 作者:行者123 更新时间:2023-12-03 00:20:57 25 4
gpt4 key购买 nike

我的 HTML 看起来有点像这样:

<body>
<img src="image.svg" width="600" height="600" />
<svg width="1500" height="650"/>
</body>

基本上,高度为 600 的静态图像 SVG 放置在 d3js 的 svg 目标之上。当我使用函数 this.getBoundingClientRect() 时,顶部和底部的值包含此 600,因此为了捕获悬停等鼠标事件,我必须考虑此偏移量。我还注意到,如果我在页面中向下滚动一点,此偏移量也会发生变化,因此请修复它,例如到 600 还不够。我在哪里可以动态获取这个视口(viewport)相关的偏移量,以便它始终保持一致?

function example(event, bounding) {
// TODO: review this hack
var magicYOffset = 600;

var y = event[1];
var top = bounding.top - magicYOffset;
var bottom = bounding.bottom - magicYOffset;

// TODO: do something with the new top and bottom
return ???;
}

d3.drag()
.on('start', function (d) {
var event = d3.touch(this) || d3.mouse(this);
clickX = event[0];
clickY = event[1];
cursorX = event[0];
cursorY = event[1];

var boundingRect = this.getBoundingClientRect();

var flag = example(event, boundingRect);
...

最佳答案

我会尝试获取 SVG 的 .offsetLeft 和 .offsetTop 。这应该从整个页面而不是视口(viewport)中获取它,这将防止它发生变化。

关于javascript - 如何获取 getBoundingClientRect 顶部和底部中包含的确切偏移量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54314145/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com