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

问题描述

我为一个基金会工作，提高互联网的无障碍的意识。对于演讲，我们希望提供一个小型工作室，模拟不同的残疾/障碍的人。这是通过为此演示特别创建的网站完成的。

其中一个显示的损伤是有颤抖，这意味着经历摇晃，难以控制的手部运动。在这种损伤的情况下，很难精确地移动鼠标光标并且当鼠标在链接上时按下鼠标按钮。一些老人和患有疾病的人，例如，帕金森病可能患有震颤。

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

• 使用鼠标驱动程序/实用程序模拟鼠标摇动。


• 通过CSS隐藏鼠标光标，将摇动的鼠标光标的GIF动画放置在原始光标的位置（使用JavaScript），然后使目标链接仅在几秒钟内可点击一秒钟左右。

虽然第一个想法会很酷，我找不到这样的工具，无论是对于Mac还是对于Windows。我自己没有任何编程技巧。

第二个想法似乎有点笨拙，但它会达到想要的效果，我想。 / p>

有人有别的想法吗？

解决方案

希望您应该能够使用指针锁API 。

我分配了这个指针锁示例程序库< a>并修改它添加随机移动元素。

这是指向我的GitHub页面的链接：https://aristocrates.github.io/pointer-lock-demo

这里是我的repo的链接：https://github.com/aristocrates/pointer-lock-demo

重要的JavaScript代码包含在 canvasLoop（e）方法中的 app.js 中。

我从原始演示中更改的唯一的事情是在行之后

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

我添加了两行代表随机运动：

  x + = Math.floor（Math.random（）* 3  -  1）; 
 y + = Math.floor（Math.random（）* 3  -  1）; 
  

还有很多东西可以改善，但希望这可以帮助你开始。 p>

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.

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:

• Using a mouse driver / utility that simulates the mouse shaking.
• Hide the mouse cursor via CSS, place a GIF animation of a shaking mouse cursor at the place of the original cursor (with JavaScript), and then make the target link clickable only every few seconds for a second or so. This would at least give the feeling as if one always clicks at the wrong moment.

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.

Does anybody have another idea?

解决方案

I made a quick demo of something that you hopefully should be able to base your code on, using the Pointer Lock API.

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

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

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屋！