javascript - 如何在 javascript 中重新创建 pmouseY 和 pmouseX (processing.JS 变量)

Question

如何创建作为processing.JS javascript 库中内置变量的pmouseY 和pmouseX 变量。

pmouseX表示鼠标之前的x坐标 pmouseY表示鼠标之前的y坐标

而普通的 mouseX/Y (对应于 javascript event.clientY/X 变量)是鼠标的当前位置。 这是我尝试做的事情的粘贴箱: http://pastebin.com/XSu3XHAJ 我刚刚尝试通过将鼠标当前的 X/Y 位置减一来制作 pmouseX/Y 。 这是对这个 khanacademy“项目”的 javascript 重新创建的尝试: https://www.khanacademy.org/computer-programming/pmousex-pmousey-processingjs/5082026180870144

剧透警告:它根本没有接近想要的结果。

Answer 1

在事件处理程序中，存储鼠标位置。这样，在下一帧上，该变量就是上一帧的鼠标位置。

var pmX, pmY;

function createLines(event) {

    var mX = event.clientX;
    var mY = event.clientY;

    if (pmX && pmY) {
        board.beginPath();
        board.moveTo(pmX, pmY);
        board.lineTo(mX, mY);
        board.stroke();
    }

    pmX = mX;
    pmY = mY;

}