DartのHTML5キャンバスをマウスでクリックしてXとYを取得するにはどうすればよいですか？

Question

私はウェブページ上にHTML5キャンバスを持っています。ユーザーがキャンバスをクリックすると、キャンバスに相対的なX座標とY座標を取得したいと思います。私はダートでこれをしたいと思います。

Answer 1

ダートは今getBoundingClientRect場合、同期バージョンを持っているので、あなたはもう非同期バージョンを使用する必要はありません。

var clientRect = ctx.canvas.getBoundingClientRect(); 

ctx.canvas.on.click.add((e) { 
    var x = e.clientX - clientRect.left; 
    var y = e.clientY - clientRect.top; 
}); 

あり、同じことを行うのMouseEventで「offsetX」と「offsetY」ゲッターもあるが、私は、彼らが標準ではないため、これらのフィールドは、その永遠になるかはわかりません。

Answer 2

この答えが古くなって、

上記の受け入れ答えは簡単Pointクラスの作成を参照してください：

class Point { 
    final int x; 
    final int y; 

    Point(this.x, this.y); 
} 

インポートダーツ：HTMLライブラリ：

import 'dart:html'; 

まずステップを取得キャンバスのクライアント境界矩形：

Point clientBoundingRect; 
Future<html.ElementRect> futureRect = ctx.canvas.rect; 

futureRect.then((html.ElementRect rect) { 
    clientBoundingRect = new Point(rect.bounding.left, rect.bounding.top); 
}); 

次に、ウィンドウからキャンバスまでのオフセットアルゴリズムを定義します。

Point getXandY(e) { 
    num x = e.clientX - clientBoundingRect.x; 
    num y = e.clientY - clientBoundingRect.y; 
    return new Point(x, y); 
} 

次に、キャンバスにクリックイベントハンドラをアタッチ：

ctx.canvas.on.click.add((e) { 
    click = getXandY(e); 
});