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

Question

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

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

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

下一步似乎一切都不对了。在 mousemove 事件中，我试图获取鼠标的坐标，我是否可以使用差异来定义边界框的高度和宽度。似乎一切都与我创建的网络组件的坐标有关。

我该怎么办？

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

有没有其他人知道如何正确地做到这一点，因为我一直将事情设置为绝对的，但没有正确渲染。

附带说明一下，如果我可以减去其中的 Web 组件的绝对位置，我认为它应该正确呈现高度和宽度。

Answer 1

您可能更容易使用全局位置信息而不是目标相对位置。您可以直接使用 event.screen.

从 MouseEvent 获取全局位置点

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);

然后您只需确定与该点的距离即可得到您的 width/height:

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;