пытается создать ограничивающий прямоугольник нажатием и перетаскиванием в веб-компоненте

Question

Я имею дело с обработчиками событий и получением начального и конечного положения мыши.

Таким образом, я могу создать поле выбора.

Я начал с mousedown, я сохраняю текущую позицию: new Point(event.target.clientLeft, event.target.clientTop);, которая, похоже, работает для этого местоположения, когда я устанавливаю соответствующий div.

На следующем этапе все кажется неправильным. Хотя в событии mousemove я пытаюсь получить координаты мыши, я могу использовать разницу для определения высоты и ширины ограничивающей рамки. Кажется, что все отключено координатами созданного веб-компонента.

Как мне это сделать?

Я больше занимался этим событием, пытаясь получить позицию мыши, но я думаю, что происходит то, что моя начальная точка относится к созданному мной веб-компоненту, а не к абсолютной позиции.

Неужели кто-нибудь еще выяснил, как это сделать правильно, потому что я устанавливал вещи как абсолютные, но неправильно отображаемые.

В качестве побочного примечания, если бы я мог вычесть абсолютное положение веб-компонента, в котором он находится, я думаю, что он должен правильно отображать высоту и ширину.

Answer 1

Поскольку 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; 

, а затем применить его к Разд.

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

Answer 2

Возможно, вам проще использовать глобальную информацию о местоположении, а не позицию цели. Вы можете получить глобальную позицию точки от MouseEvent непосредственно с event.screen.