尝试通过在Web组件中单击并拖动来创建边界框

Question

我正在处理事件处理程序，并获取鼠标的开始和结束位置。

这样我就可以创建一个选择框。

我从mousedown开始，我存储当前位置：new Point(event.target.clientLeft, event.target.clientTop);，当我相应地设置选择div时，它似乎适用于该位置。

下一步是一切似乎都错了。在mousemove事件中，我试图获取鼠标的坐标，我可以使用差异来定义边界框的高度和宽度。似乎一切都是由我创建的Web组件的坐标决定的。

我应该怎么做？

我一直在尝试更多的事件，试图获得鼠标的位置，但我认为发生的是我的起点是参考我创建的web组件，而不是绝对位置。

有没有其他人想出如何正确地做到这一点，因为我一直在设置绝对但不正确的渲染。

作为旁注，如果我可以减去web组件的绝对位置，我认为它应该正确渲染高度和宽度。

Answer 1

您可能更容易使用全球位置信息而不是目标相对位置。您可以使用MouseEvent直接从event.screen获取全球定位点。

Answer 2

由于PolymerElement将使用HtmlElements，因此您可以访问应用程序中内置的一整套函数。例如：

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

然后你可以确定从那个点到你的宽度/高度的距离：

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;

然后将其应用到您的Div。

_item.style.top = top;
_item.style.left = left;
_item.style.width = w;
_item.style.height = h;