在网页上用鼠标模拟震颤(例如帕金森氏病)? [英] Simulating tremor (from e.g. Parkinson's Disease) with the mouse on a webpage?

问题描述

我正在为一个基金会工作，该基金会旨在提高人们对互联网可访问性的认识.对于演示，我们想提供一个小型研讨会，模拟人们不同的残疾/障碍.这是通过专门为此演示而创建的网站完成的.

I'm working for a foundation that raises awareness for accessibility in the internet. For a presentation, we want to offer a small workshop that simulates different disabilities/impairments to people. This is done via a website created especially for this presentation.

明显的障碍之一是颤抖，这意味着手部动作颤抖且难以控制.由于这种缺陷，很难准确地移动鼠标光标并在鼠标悬停在链接上时按下鼠标按钮.一些老人和患有疾病的人，例如帕金森氏症，可能会出现震颤.

One of the demonstrated impairments is having a tremor, which means experiencing shaky, difficult-to-control hand movements. With this impairment, it's very difficult to move the mouse cursor exactly and to press the mouse button while the mouse is over a link. Both some old people and people with disease, e.g. Parkinson's, can suffer from tremor.

现在我想以某种不可预测的方式移动鼠标光标，这样人们就很难点击一个小按钮.因为 JavaScript 不允许直接移动鼠标光标，所以我正在寻找其他方法来实现这一点.我想出了以下想法:

Now I'd like to somehow move the mouse cursor in an unpredictable way, so that it's very hard for people to click on a small button. Because JavaScript doesn't allow moving the mouse cursor directly, I'm looking for other ways to achieve this. I came up with the following ideas:

• 使用模拟鼠标晃动的鼠标驱动程序/实用程序.
• 通过 CSS 隐藏鼠标光标，在原始光标的位置放置一个摇动鼠标光标的 GIF 动画(使用 JavaScript)，然后让目标链接每隔几秒左右点击一次.这至少会让人感觉好像总是在错误的时刻点击.

虽然第一个想法很酷，但我找不到这样的工具，无论是 Mac 还是 Windows.而且我自己也没有任何编程这种东西的技能.

While the first idea would be pretty cool, I couldn't find a tool like this, whether for Mac nor for Windows. And I don't have any skills in programming such a thing myself.

第二个想法似乎有点笨拙，但我认为它可以达到预期的效果.

The second idea seems a bit clumsy, but it would achieve the desired effect, I think.

有人有其他想法吗?

推荐答案

我使用 指针锁 API.

我分叉了 this pointer-lock-demo repo 并修改了它以添加一个随机运动元素.

I forked this pointer-lock-demo repo and modified it to add a random movement element.

这是我的 GitHub 页面的链接:https://aristocrates.github.io/pointer-锁定演示
这是我的存储库的链接:https://github.com/aristocrates/pointer-lock-演示

Here is the link to my GitHub page: https://aristocrates.github.io/pointer-lock-demo
And here is the link to my repo: https://github.com/aristocrates/pointer-lock-demo

重要的 javascript 代码包含在 app.js 中，在 canvasLoop(e) 方法中.

The javascript code of importance is contained in app.js, in the canvasLoop(e) method.

我从原始演示中唯一改变的是在台词之后

The only thing I changed from the original demo was after the lines

x += movementX * 2;
y += movementY * 2;

我添加了两行来表示随机运动:

I added two lines to represent random movement:

x += Math.floor(Math.random()*3 - 1);
y += Math.floor(Math.random()*3 - 1);

您还有很多可以改进的地方，但希望这可以帮助您入门.

There are still plenty of things you could improve, but hopefully this can help you get started.

这篇关于在网页上用鼠标模拟震颤(例如帕金森氏病)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！