Web上でクリックした座標をネイティブ側で取得する

Webを表示するアプリにて、Web画面上でクリックした場所にネイティブで何か表示したい場合、
Web上の座標→ネイティブ上の座標に変換する必要があります。

Web内のJavaScriptでクライアント座標を取得してネイティブ側に通知し、
ネイティブ側でその座標にコントロールを表示させましたが、うまくいきませんでした。（位置がずれる）

調べると、Web画面で拡大・縮小を行っていることが原因でした。

JavaScriptでクライアント座標を取得する際に一緒に拡大率も取得し、
ネイティブ側で座標に拡大率を計算してから表示させることで、期待通りの位置に表示できました。

JavaScriptでWebからネイティブに以下のパラメータを連携します。

var data = {};
data["x"] = e.clientX;
data["y"] = e.clientY;
data["s"] = window.visualViewport.scale;
invokeAction(JSON.stringify(data));

ネイティブ側では、パラメータを受け取って以下の計算を行います。

int x = int.Parse(json["x"]);
int y = int.Parse(json["y"]);
double scale = double.Parse(json["s"]);

XXXControl.TranslationX = x * scale;
XXXControl.TranslationY = y * scale;