웹 구성 요소에서 클릭하여 드래그하여 테두리 상자를 만들려고합니다.

Question

나는 이벤트 핸들러를 다루며 마우스의 시작과 끝 위치를 얻고 있습니다.

그런 식으로 선택 상자를 만들 수 있습니다.

mousedown에서 시작하여 현재 선택 위치 div를 적절하게 설정하면 해당 위치에서 작동하는 것으로 보이는 new Point(event.target.clientLeft, event.target.clientTop);을 저장합니다.

다음 단계는 모든 것이 잘못된 것처럼 보입니다. mousemove 이벤트에서 마우스의 좌표를 얻으려고 시도 할 때 차이를 사용하여 테두리 상자의 높이와 너비를 정의 할 수 있습니다. 모든 것이 내가 만든 웹 구성 요소의 좌표에 의해 벗어난 것처럼 보입니다.

어떻게해야합니까?

나는 마우스의 위치를 ​​얻으 려하면서 이벤트를 더 많이하고있다.하지만 어떻게 될지 생각해 보면 시작점이 내가 만든 웹 구성 요소를 참조하고 절대 위치가 아니라는 것입니다.

절대적으로 설정했지만 올바르게 렌더링되지 않았기 때문에 다른 사람이 올바르게 수행하는 방법을 알아 냈습니까?

부수적으로 이것이 웹 구성 요소의 절대 위치를 뺄 수 있다면 높이와 너비가 올바르게 렌더링되어야한다고 생각합니다.

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

는 당신은 당신의 너비/높이를 얻기 위해 그 시점에서의 거리를 확인할 수 있습니다.

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

Answer 2

타겟 상대 위치가 아닌 글로벌 위치 정보를 사용하면 더 쉬울 수도 있습니다. event.screen으로 직접 MouseEvent에서 글로벌 포지션 포인트를 얻을 수 있습니다.