使用Javascript和Arduino進行人工鼠標事件？

Question

我正在從事一個涉及大型觸摸屏的硬件項目，我想用它來控制JS應用程序中的鼠標事件。 目前，我已將面板連接到Arduino Micro，該面板顯示為USB HID設備，因此我可以將其視為鼠標，但這實際上不是該項目的理想解決方案。 我的目標是，不考慮是否實際可能，使面板的行為類似於圖形輸入板，因此我可以將串行數據映射到顯示器上的絕對坐標，然后在這些位置觸發鼠標事件。 我還想將該功能限制在瀏覽器中，而不是讓它在整個系統中像鼠標一樣運行，盡管這可能是次要的。

據我所知，實際上無法使用JS移動光標（出於明顯的安全原因）。 我發現最好的是initmouseevent() ，不幸的是，它似乎在最近幾年中已經貶值了。 現實情況是，我實際上不需要移動鼠標； 我想在畫布上的特定位置觸發各種行為，但這僅是因為此應用程序當前正在查找鼠標事件，並且沒有特定的原因使其無法與其他事件一起運行，只要它們提供適當的數據即可。

我包含一些代碼，但是我的問題不是特定於代碼的。 如果您有任何一般性建議，我將不勝感激！

謝謝！！

當前正在編寫應用程序時，它會監聽鼠標事件：

canvas.addEventListener('mousedown', this.onMouseDown.bind(this), false);

然后通過一系列函數傳遞事件：

 onMouseDown: function (event) {
      event.stopPropagation();
      event.preventDefault();

      this._gui.callFunc('onMouseDown', event);
      this.onDeviceDown(event);
      //console.log(event);
    },

onDeviceDown: function (event) {
  console.log("onDeviceDown " + JSON.stringify(event));
  if (this._focusGui)
    return;

  this.setMousePosition(event);
  //console.log("setMousePosition " + event);

  var mouseX = this._mouseX;
  var mouseY = this._mouseY;
  var button = event.which;

  var canEdit = false;
  if (button === MOUSE_LEFT)
    canEdit = this._sculpt.start(event.shiftKey);

  if (button === MOUSE_LEFT && canEdit)
    this.setCanvasCursor('none');

  if (button === MOUSE_RIGHT && event.ctrlKey)
    this._action = 'CAMERA_ZOOM';
  else if (button === MOUSE_MIDDLE)
    this._action = 'CAMERA_PAN';
  else if (!canEdit && event.ctrlKey) {
    this._maskX = mouseX;
    this._maskY = mouseY;
    this._action = 'MASK_EDIT';
  } else if ((!canEdit || button === MOUSE_RIGHT) && event.altKey)
    this._action = 'CAMERA_PAN_ZOOM_ALT';
  else if (button === MOUSE_RIGHT || (button === MOUSE_LEFT && !canEdit))
    this._action = 'CAMERA_ROTATE';
  else
    this._action = 'SCULPT_EDIT';

  if (this._action === 'CAMERA_ROTATE' || this._action === 'CAMERA_ZOOM')
    this._camera.start(mouseX, mouseY);

  this._lastMouseX = mouseX;
  this._lastMouseY = mouseY;
},

等等。

Answer 1

你可以使用jQuery和觸發mousedown了手動內置事件event對象，設置pageX, pageY,並且which性能自己。

https://api.jquery.com/category/events/event-object/

var e = new jQuery.Event("mousedown");
e.pageX = 10;
e.pageY = 10;
e.which = 3; // 1 for left button, 2 for middle, and 3 for right
$("#elem").trigger(e);

$("#elem")將是您要觸發事件的頁面元素，因此您在代碼中會像$(canvas) 。