画布上滚动更改签名鼠标绘制位置

我想使用画布，使用鼠标一个人可以写他们的签名。一切工作，直到我伸展或滚动屏幕，然后它在与鼠标不同的地方绘制线条。画布上滚动更改签名鼠标绘制位置

验证码：

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看起来像： <canvas id="signature" width="567" height="150"></canvas>

来源

2014-04-21 kqlambert

event.clientX/Y是相对于视口的左上角。所以没有考虑到滚动。 event.pageX/Y是相对于文件。所以事件发生在屏幕上的位置包括滚动。您可以将所有对clientX的引用更改为pageX和clientY至pageY，它应该可以工作。

Explanation of each screen/page/client XY.

来源

2014-04-24 16:42:48

添加滚动屏幕mouseX和mouseY的偏移。与jQuery它看起来像这样

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

来源

2014-04-24 16:35:44

好像你只需要得到时的相对坐标页面重排的更可靠的方法。

@RyanArtecona响应写了下面的函数来this question about mouse coordinates relative to a canvas：

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;

这是方便，因为它增加了一个函数来获取相对坐标右转上HTMLCanvasElement函数的原型，这意味着你可以通过在您要使用的画布的引用中，并获取相对于其的坐标。

使用这个你可以重写你的鼠标按下功能（你会想要做的其他人也，但只是一个例子），如下所示：

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

来源

2014-04-24 16:46:31 jshanley

更改这两行

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正常工作，因为我们似乎缺少一些代码。

来源

2014-04-24 16:55:32 mafafu

这不是一个简单的答案。摸不着头脑的最好方法是开始了良好的基础，然后让您的具体情况增量变化。我已经看到了关于这个问题的最好的文章是从Internet Explorer团队：

Handling Multi-touch and Mouse Input in All Browsers

这文章将为您正确捕获鼠标输入提供一个很好的基础。

来源

2014-04-30 23:45:52 Domin8urMind

画布上滚动更改签名鼠标绘制位置

回答

相关问题