4

Web ページに HTML5 キャンバスがあります。ユーザーがキャンバスをクリックすると、キャンバスに相対的な X 座標と Y 座標を取得したいと思います。Dartでこれをやりたいです。

4

2 に答える 2

6

この回答は古くなっています。上記の受け入れられた回答を参照してください

簡単な Point クラスを作成します。

class Point {
  final int x;
  final int y;

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

インポート dart: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);
});
于 2012-05-12T13:58:02.093 に答える
3

getBoundingClientRectの場合、Dartには同期バージョンがあるため、非同期バージョンを使用する必要はありません。

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」のゲッターもありますが、これらのフィールドは標準に含まれていないため、永久に使用されるかどうかはわかりません。

于 2013-01-12T12:14:52.877 に答える