Question

http://www.asifslab.com/reveal.js-master/Why%20does%20wind%20feel%20cold.html#/4 为什么绘图画布不能正常工作？绘制的线远离点击的点。但是，如果我使用reveal.js中的画布，它可以很好地工作。 http://codepen.io/anon/pen/eEaKh 此外，当运行擦除功能时，它会在外面留下白色边框。我该如何解决这些问题？

Answer 1

只需将e.pageX更改为e.clientX，将e.pageY更改为e.clientY，因为在您的codepen帐户中画布原点和页面原点几乎在同一个地方，但在其他地方却不是。

Answer 2

要计算鼠标位置，您需要减去画布的位置：

以下是执行此操作的一种方法（在事件处理程序中）：

var rect = canvas.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top;

现在，您的x和y将相对于画布。

Answer 3

这是我的涂料应用程序的一小部分的副本/面食。注意我在计算中使用了画布的偏移量。我还有一个缩放画布的缩放功能，所以考虑到我将它添加到鼠标光标的计算中。

$('canvas').mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);

    $('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging
});

油漆画布不能正常工作

3 个答案: