Webコンポーネントでクリックしてドラッグしてバウンディングボックスを作成しようとしています

Question

私はイベントハンドラを扱い、マウスの開始位置と終了位置を取得しています。

これで、選択ボックスを作成できます。

私はmousedownから始めます。私は現在の位置：new Point(event.target.clientLeft, event.target.clientTop);を保存します。これは、それに応じて選択divを設定すると、その場所で動作するようです。

次はすべてが間違っているようです。 mousemoveイベントではマウスの座標を取得しようとしていますが、その違いを使って境界ボックスの高さと幅を定義できます。私が作成したWebコンポーネントの座標によってすべてがオフになっているようです。

どうすればよいですか？

私は、マウスの位置を取得しようとすると、もっとイベントに出会っていますが、私の出発点は絶対位置ではなく、作成したWebコンポーネントを参照していると思います。

私は絶対的なものとして設定しているが正しく描画していないため、これを正しく行う方法を知りましたか？

補足として、これが入っているWebコンポーネントの絶対位置を引くことができれば、高さと幅が正しく描画されるはずです。

Answer 1

PolymerElementはHtmlElementsを使用するため、アプリケーションに組み込まれているすべての機能スイートにアクセスできます。たとえば：

var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight; 
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth; 
var h = top - coord.y; 
var w = left - coord.x; 

してから本部にそれを適用します。

var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight; 
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth; 
Point coord = new Point(left,top); 

その後、あなたは自分の幅/高さを取得するには、その時点からの距離を決定することができます。

Answer 2

ターゲットの相対的な位置ではなく、グローバルな位置情報を使用して簡単に時間がかかる場合があります。グローバルポジションポイントは、event.screenで直接MouseEventから取得できます。