라이브러리가없는 캔버스에 마우스 위치?

캔버스를 기준으로 마우스 위치를 얻는 방법을 찾기 위해 JS 라이브러리가 없지만 jquery를 제외한 모든 예제를 찾을 수 없습니다.라이브러리가없는 캔버스에 마우스 위치?

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
canvas.addEventListener("mousedown", mousePos, false);

그러나 e.pageX 및 e.pageY 캔버스의 위치에 의해 영향을받습니다

나는 나의 기능을 시작하려면이 옵션을 사용합니다. 그 문제를 제거해야만 수학이 정확하므로 캔버스만을 기반으로합니다.

JS 라이브러리없이이 작업을 수행 할 수 있습니까? 나는 jQuery로 가능한 한 많이 피하려고 노력하는 것을 본 적이있다.

출처

2012-03-06 Sir

을; 라이브러리는 JS로 작성되기 때문에. 깨끗하고 단순하지는 않지만 항상 가능합니다. –

캔버스 요소의 위치를 가져 와서 x와 y를 빼십시오.

출처

2012-03-06 23:54:29 epascarello

나는 이것을 다음과 같이 시도했다 : http://www.paste.to/MzQ5OTgx 내 생각에 다른 문법이 궁금 할까? – Sir

설명 : 모든 부모 요소의 위치를 더합니다. – epascarello

Yeh가 왜 문법이 광산과 다른지 궁금합니다 =/그냥 함수를 바로 호출하기 때문입니다. – Sir

내가 사용하고 있습니다 :

var x; 
var y; 
if (e.pageX || e.pageY) 
{ 
    x = e.pageX; 
    y = e.pageY; 
} 
else { 
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft; 
y -= gCanvasElement.offsetTop;

출처

2012-03-06 23:55:58 ChristopheCVB

gCanvasElement를 전달하지 않고 어떻게 얻습니까? 기능? 캔버스가 여러 부모에 중첩되어 있으면 – Sir

이 실패합니다. – epascarello

먼저 당신은 캔버스 요소, 또는 얼마나 오른쪽 + 아래는 왼쪽 상단 모서리 출신의 오프셋 (offset)하는 데 필요한.

마우스가 움직이면 오프셋 변수를 마우스 위치로 인수 분해합니다.

트릭 어떻게해야이 코드 : 당신은 JS 라이브러리는 일반 JS로 할 수있는 모든 것을 할 수

var canvas = document.getElementById("canvas"); 


var xOff=0, yOff=0; 



for(var obj = canvas; obj != null; obj = obj.offsetParent) { 
    xOff += obj.scrollLeft - obj.offsetLeft; 
    yOff += obj.scrollTop - obj.offsetTop; 
} 



canvas.addEventListener("mousemove", function(e) { 

         var x = e.x + xOff; 
         var y = e.y + yOff; 


         var ctx = canvas.getContext('2d'); 
         ctx.clearRect(0, 0, 100, 100); 
         ctx.fillText(x + " - " + y, 40, 40); 

         }, true);

출처

2012-03-07 00:19:11

라이브러리가없는 캔버스에 마우스 위치?

답변

관련 문제