扩大悬停区域?

发布于 2024-10-20 00:06:46 字数 238 浏览 4 评论 0原文

扩大某个组件的悬停区域的“正确”方法是什么?换句话说,当鼠标指针距离小于一定距离 X 时,如何将组件的状态转为悬停?我可以想出很多方法来做到这一点,但它们看起来都像是黑客,我很好奇是否有人对更好的设计方法来完成这样的事情有强烈的感觉。

既然我们已经这样做了,那么如何使组件的 alpha 与鼠标光标距组件的距离成正比,以便组件在我们接近它时淡入呢?我再次可以想到各种黑客,但不确定什么是干净的方法。

谢谢你!

f

What's the "right" way to expand the hover area of a certain component? In other words, how do I turn a component's state to hovered when my mouse pointer is closer than a certain distance X? I can think of a bunch of ways to do this, but they all seem hacks and I'm curious if anyone has strong feelings about a better designed way to do something like this.

And since we're at it, how would you make alpha of the component proportional to the mouse cursor distance from the component, so that the component fades in as we approach it? Again I can think of various hacks, but not sure what a clean approach would be.

thank you!

f

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夏末 2024-10-27 00:06:46

我建议将组件置于 Canvas 内的中心,该 Canvas 的大小可以将目标组件填充所需的量。然后,您可以监听 Canvas 的鼠标悬停并触发逻辑以启用悬停。这对我来说似乎是最干净的方法——或者你可以在舞台上监听鼠标移动并不断检查鼠标到目标组件的距离......但这看起来很混乱。

至于阿尔法,我会采取类似的方法。令 alpha 容器的外边缘表示最小 alpha,内边缘表示最大 alpha。如何在两者之间进行缩放(线性等)取决于您。

I would suggest centering the component inside a Canvas that is sized to pad the target component by the desired amount. You can then listen to the Canvas for mouseover and trigger your logic to enable hover. That seems to be the cleanest approach to me -- alternately you could listen for mousemove on the Stage and constantly check the mouse distance to the target component... but that seems messy.

As for alpha I would take a similar approach. Let the outer edge of the alpha container represent the minimum alpha and the inner edge represent the maximum alpha. How you scale in between (linear, etc..) is up to you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文