캔버스 서명이 스크롤 할 때 마우스 드로 위치가 변경됩니다.

Question

캔버스를 사용하여 마우스를 사용하여 서명을 작성할 수 있습니다. 모든 것은 화면을 늘리거나 스크롤 할 때까지 작동하고 마우스와 다른 위치에 선을 그립니다.

강령은 : <canvas id="signature" width="567" height="150"></canvas>

Answer 1

event.clientX/Y과 같을 것이다 것은 뷰포트의 왼쪽 상단 모서리를 기준으로합니다. 따라서 스크롤은 고려되지 않습니다. event.pageX/Y은 문서와 관련이 있습니다. 스크롤을 포함하여 이벤트가 발생한 것은 화면상의 위치입니다. clientX에 대한 모든 참조를 pageX 및 clientY ~ pageY으로 바꿀 수 있습니다. 그냥 상대 좌표 때 페이지 리플 로우를 점점 더 신뢰할 수있는 방법이 필요한 것처럼

Explanation of each screen/page/client XY.

Answer 2

이 mouseX 및 쥐의에 화면의 스크롤 오프셋을 추가

function onMouseUp(event) { 
    'use strict'; 
    mousePressed = false; 
} 
function onMouseMove(event) { 
    'use strict'; 
    if (mousePressed) { 
     event.preventDefault(); 
     mouseX = event.clientX - can.offsetLeft - mleft; 
     mouseY = event.clientY - can.offsetTop - mtop; 
     ctx.lineTo(mouseX, mouseY); 
     ctx.stroke(); 
    } 
} 
function onMouseDown(event) { 
    'use strict'; 
    mousePressed = true; 
    mouseX = event.clientX - can.offsetLeft - mleft; 
    mouseY = event.clientY - can.offsetTop - mtop; 
    ctx.beginPath(); 
    ctx.moveTo(mouseX, mouseY); 
} 
can.addEventListener('mousemove', onMouseMove, false); 
can.addEventListener('mousedown', onMouseDown, false); 
can.addEventListener('mouseup', onMouseUp, false); 

HTML처럼 보인다. jQuery를 함께이

mouseX = event.clientX - can.offsetLeft - mleft + $(window).scrollLeft; 
mouseY = event.clientY - can.offsetTop - mtop + $(window).scrollTop; 

Answer 3

보인다.

@RyanArtecona는 this question about mouse coordinates relative to a canvas에 대한 응답으로 다음 기능을 썼다는 그냥 통과 할 수 있음을 의미 오른쪽 HTMLCanvasElement 함수의 프로토 타입에 상대 좌표를 얻을 수있는 기능을 추가하기 때문에

function relMouseCoords(event){ 
    var totalOffsetX = 0; 
    var totalOffsetY = 0; 
    var canvasX = 0; 
    var canvasY = 0; 
    var currentElement = this; 

    do{ 
     totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; 
     totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; 
    } 
    while(currentElement = currentElement.offsetParent) 

    canvasX = event.pageX - totalOffsetX; 
    canvasY = event.pageY - totalOffsetY; 

    return {x:canvasX, y:canvasY} 
} 
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; 

편리합니다 당신이 사용하고자하는 캔버스에 대한 참조에서, 그리고 그것에 상대적인 좌표를 얻습니다.

다음과 같이 (그러나 단지 예를 들어, 당신은뿐만 아니라 다른 사람을하고 싶은 것) 당신이 당신의 이는 MouseDown 기능을 다시 쓸 수있는이 사용 :

function onMouseDown(event) { 
    'use strict'; 
    mousePressed = true; 
    // get a reference to the 'signature' canvas 
    var canvas = document.getElementById('signature'); 
    // this returns an object with 'x' and 'y' properties 
    var mouse = canvas.relMouseCoords(event) 
    ctx.beginPath(); 
    // use the coordinates you got 
    ctx.moveTo(mouse.x, mouse.y); 
} 

Answer 4

변경이 두 줄을

mouseX = event.clientX - can.offsetLeft - mleft; 
mouseY = event.clientY - can.offsetTop - mtop; 

당신의 핸들러 모두

mouseX = event.offsetX || event.layerX; 
mouseY = event.offsetY || event.layerY; 

합니다. 브라우저는 특별한 수학을하지 않고도 상대 좌표를 처리 할 수 ​​있습니다. offsetX/Y은 Chrome/IE 전용이며 layerX/Y은 Firefox 지원을 제공합니다.

여기에 jsfiddle입니다. use strict을 작동시키기 위해 약간의 선언 변경을했습니다. 코드가 누락 된 것 같습니다.

Answer 5

이것은 간단한 대답이 아닙니다. 이 문제를 파악하는 가장 좋은 방법은 좋은 기초로 시작하고 상황에 증분 변경을하는 것입니다 .. 나는이 주제에 본 가장 좋은 글은 인터넷 익스플로러 팀에서입니다 :

Handling Multi-touch and Mouse Input in All Browsers

이 기사는 마우스 입력을 올바르게 캡처 할 수있는 훌륭한 토대를 제공합니다.