该图的等效 Javascript 方程是什么？

发布于 2024-11-04 17:13:44 字数 977 浏览 1 评论 0原文

我目前正在制作一个界面，其中的图像链接倾向于鼠标光标。这更多的是为了好玩，而不是作为一个严肃的项目，但尽管如此，我从中学到的信息在将来还是有用的。现在我有几个变量设置...

diffx/y = 光标距链接原始位置的距离（以像素为单位）。如果光标移至链接原始位置（已计算）的左侧或上方，则该值变为负值。
spacex/y = 我想要的光标和链接之间的距离

calcx/y = 计算出的数字将添加到“style.txt”中。链接的“top”和“style.left”

calcx = diffx - spacex
calcy = diffy - 史派西

link.style.top = calcx
link.style.top = calcy

calcx/y =如果我设置spacex/y， = 0 链接以光标为中心
如果我设置 spacex/y = diffx/y 链接将设置为其正常位置

我的目标是拥有一个稍微向光标倾斜的链接（可能距原始位置最大 40px）并且< br> 当光标靠近链接时，链接会慢慢返回到原来的位置。
当光标进入 100px 范围内时，链接应该（平滑地）跳向光标，就好像在说“选我！”

这是方程的图形。

Graph

我需要一种方法来编写这个作为 JavaScript 方程。我已经有一段时间没学代数了，而且我很确定我们没有复习过任何看起来像这样的东西。我猜它在某个地方有一个指数和一个条件，但我不太确定。如果您能够弄清楚这一点，我将非常感激（更不用说印象深刻）。

谢谢您的帮助！

原文

I'm currently working on making an interface where I have image links that lean towards the mouse cursor. This is more for fun than as a serious project, but nevertheless the information I'm learning from it will be useful in the future. Right now I have several variables setup...

diffx/y = the distance, in pixels, of the cursor from the link's original location. This value goes negative if the cursor goes to the left of or above the link's original location (already calculated).
spacex/y = the amount of distance that I want in between the cursor and the link

calcx/y = the calculated number will be added to the 'style.top' and 'style.left' of the link

calcx = diffx - spacex
calcy = diffy - spacey

link.style.top = calcx
link.style.top = calcy

If I set spacex/y = 0 the link is centered on the cursor
If I set spacex/y = diffx/y the link is set to its normal position

My goal is to have a link that leans slightly towards the cursor (maybe at max 40px from the original position) and
as the cursor gets closer to the link, the link will slowly return to its original position.
When the cursor gets within, let's say, 100px the link should (smoothly) jump towards the cursor as if to say "pick me!"

Here's what the equation would look like as a graph.

Graph

I need a way to write this as a javascript equation. I haven't taken algebra in awhile and I'm pretty sure we didn't go over anything that looked like this exactly. I'm guessing it has an exponent and a conditional in there somewhere, but I'm not quite sure. If your able to figure this out, I'd be really thankful (not to mention impressed).

Thank You for your help!

分享到QQ

分享到微博

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

发布评论

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

明媚殇 2024-11-11 17:13:44

您在这里肯定需要一个分段函数（您所说的“条件”）。对于 A 的某个小值，中间部分似乎是 y = Ax^3 或 y = Ax^5 形式的奇次多项式（选择为当 x = 150 时使 y = 150）。 |x| 的曲线似乎基本上是线性的>= 200，即当 x >= 200 时 y = x + B，当 x <= -200 时 y = x - B。 150 <= |x| 之间的转换<= 200 看起来有点棘手，就像平移指数或二次。但您可以从这个（伪代码）开始：

if (x < -150) {
    y = x;
} 
else if (x < 150) {
    y = (1.0/22500.0) * pow(x, 3);
}
else {  // x > 150
    y = x;
}

请注意，这忽略了 x = 150 和 200 之间的转换，并相应地假设上面提到的常量 BI 为零。但它可能会让你开始。

编辑：

查看我的函数图后，我认为五阶多项式更符合您所需的形状。在本例中，中间函数将为 y = (1.0/506250000.0) * pow(x,5)。结果如下。顺便说一句，常数值对于三次函数相当于 150^-2，对于五次函数相当于 150^-4。

三次函数和五次函数的图形

You'll definitely want a piecewise function here (the "conditional" you spoke of). The middle section appears to be an odd-powered polynomial of the form y = Ax^3 or y = Ax^5 for some small value of A (chosen to make y = 150 when x = 150). The curve appears to be essentially linear for |x| >= 200, that is y = x + B for x >= 200 and y = x - B for x <= -200. The transitions between 150 <= |x| <= 200 seem a little trickier, like a shifted exponential or quadratic. But you might start with this (pseudo code):

if (x < -150) {
    y = x;
} 
else if (x < 150) {
    y = (1.0/22500.0) * pow(x, 3);
}
else {  // x > 150
    y = x;
}

Note that this ignores the transitions between x = 150 and 200 and correspondingly assumes the constants B I mentioned above are zero. But it might get you started.

Edit:

After looking at a plot of my function, I think a 5th order polynomial matches your desired shape more closely. In this case, the middle function will be y = (1.0/506250000.0) * pow(x,5). Results are below. By the way, the constant values are equivalent to 150^-2 for the cubic, and 150^-4 for the quintic function.

Graph of cubic and quintic functions

回复收藏 0 原文

不羁少年 2024-11-11 17:13:44

我同意，如果将函数分成几部分，那么对函数进行建模可能会更容易：

f(x) = x + 50        if x < -200
       -150          if -200 <= x < -150
       150*(x/150)^k if -150 <= x < 150:
       150           if 150 <= x < 200
       x - 50        if 200 <= x

for k some big odd number (I'd try 4-10 out...)

I agree it is probably easier to model your function if you split it in parts:

f(x) = x + 50        if x < -200
       -150          if -200 <= x < -150
       150*(x/150)^k if -150 <= x < 150:
       150           if 150 <= x < 200
       x - 50        if 200 <= x

for k some big odd number (I'd try 4-10 out...)

回复收藏 0 原文