캔버스를 사용하여 작은 그림 앱을 만들고 싶습니다. 캔버스에서 마우스의 위치를 찾아야합니다.

답변

JQuery를 사용하는 사람들의 경우 :

경우에 따라 이벤트가 첨부 된 중첩 요소가있는 경우 브라우저에서 상위 요소로 인식하는 내용을 이해하기 어려울 수 있습니다. 여기서 부모를 지정할 수 있습니다.

마우스 위치를 가져 와서 부모 요소의 오프셋 위치에서 빼십시오.

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

스크롤 창 내 페이지에서 마우스 위치를 가져 오려는 경우 :

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

또는 페이지와 관련된 위치 :

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

다음 성능 최적화에 유의하십시오.

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

이런 식으로 JQuery는 #element각 줄 을 찾을 필요가 없습니다 .

최신 정보

getBoundingClientRect ()를 지원하는 브라우저를 위해 아래 @anytimecoder의 최신 JavaScript 전용 버전이 있습니다 .

답변

복사 / 붙여 넣을 수있는 jQuery가없는 답변을 찾지 못 했으므로 여기에 사용 된 솔루션이 있습니다.

function clickEvent(e) {
  // e = Mouse click event.
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
}

전체 예제의 JSFiddle

답변

다음은 캔버스 요소에 대한 마우스 위치 관계를 계산합니다.

var example = document.getElementById('example');
example.onmousemove = function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
}

이 예에서 this받는 지칭 example요소와 e는 IS onmousemove이벤트.

답변

순수 자바 스크립트에는 참조 요소가 다른 위치에 중첩되어 절대 위치를 지정할 수있는 경우 상대 좌표를 반환하는 대답이 없습니다. 이 시나리오에 대한 해결책은 다음과 같습니다.

function getRelativeCoordinates (event, referenceElement) {

  const position = {
    x: event.pageX,
    y: event.pageY
  };

  const offset = {
    left: referenceElement.offsetLeft,
    top: referenceElement.offsetTop
  };

  let reference = referenceElement.offsetParent;

  while(reference){
    offset.left += reference.offsetLeft;
    offset.top += reference.offsetTop;
    reference = reference.offsetParent;
  }

  return {
    x: position.x - offset.left,
    y: position.y - offset.top,
  };

}

답변

이 문제의 난이도에 대한 자세한 내용은 http://www.quirksmode.org/js/events_properties.html#position에서 확인할 수 있습니다 .

여기에 설명 된 기술을 사용하면 문서에서 마우스 위치를 찾을 수 있습니다. 그런 다음 요소의 경계 상자 안에 있는지 확인 element.getBoundingClientRect()하면 다음 속성을 가진 객체를 반환하는 을 호출 하여 찾을 수 있습니다 { bottom, height, left, right, top, width }. 거기에서 요소 내부 에서조차 발생했는지 여부를 알아내는 것은 사소한 일입니다.

답변

나는이 모든 솔루션을 시도했으며 매트릭스 변환 컨테이너 (panzoom 라이브러리)를 사용한 특수 설정으로 인해 아무것도 작동하지 않았습니다. 확대 / 축소 및 이동 한 경우에도 올바른 값을 반환합니다.

mouseevent(e) {
 const x = e.offsetX,
       y = e.offsetY
}

그러나 방해 요소가없는 경우에만. CSS를 사용하여 이벤트에 ‘보이지 않게’만들어서 우회 할 수 있습니다.

.child {
   pointer-events: none;
}

답변

나는이 질문을 보았지만 내 경우 (DOM 요소 (내 경우에는 캔버스가 아님) 에서 드래그 를 사용 offsetX하여) offsetY에서 작동하도록하기 위해 드래그 마우스 이벤트 에서만 사용해야한다는 것을 알았습니다. .

onDragOver(event){
 var x = event.offsetX;
 var y = event.offsetY;
}