JavascriptとArduinoの人工的なマウスイベント？

Question

私はJSアプリケーションでマウスイベントを制御するために使用したいと思う大きなタッチパネルを含むハードウェアプロジェクトに取り組んでいます。現在、パネルはUSB HIDデバイスとして表示されるArduino Microに接続されているため、マウスとして扱うことができますが、実際にはこのプロジェクトにとって理想的なソリューションではありません。私の目標は、実際に可能かどうかにかかわらず、パネルがグラフィックタブレットのように動作することです。そのため、シリアルデータをディスプレイ上の絶対座標にマップし、その場所でマウスイベントを発生させることができます。私はまた、システム全体にマウスのように振る舞わせるのではなく、ブラウザー内でその機能を制限したいと思っていますが、これはおそらく第二の関心事です。

私が知る限り、実際にはJSでカーソルを移動することはできません（ほとんどのセキュリティ上の理由から）。私が見つけた最高のものはinitmouseevent()です。残念ながら、それは過去数年間で減価償却されたようです。現実には、実際にマウスを動かす必要はありません。キャンバス内の特定の位置でさまざまな動作をトリガーしたいのですが、このアプリケーションは現在マウスイベントを探しているだけで、適切なデータを提供している限り、別のイベントで実行できない特別な理由はありません。

私はいくつかのコードを含んでいますが、私の質問はコード固有のものではありません。一般的な提案があれば、本当に感謝しています！

ありがとうございます！

アプリは、現在書かれているとして、それはマウスイベントをリッスン：

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; 
}, 

などなど：

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

はその後、一連の機能を通じてイベントを渡します。

Answer 1

あなたはjQueryのを使用してpageX, pageY,とwhichプロパティを自分で設定し、手動で構築されたeventオブジェクトとmousedownイベントをトリガすることができます。

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)のようなものので、あなたが希望のイベントをトリガしたいページ要素になります。