JS - 简单绘图答案

【问题标题】：JS - Simple DrawingJS - 简单绘图
【发布时间】：2013-07-13 13:52:08
【问题描述】：

我有一个问题，过去一小时我一直在尝试解决，但没有成功。这是完整的代码：http://jsfiddle.net/apbEX/4/

问题：当我使用 updatePoint 函数时，point.x（和 point.y）无明显原因是 NaN，因此它不会绘制点。但是如果您将函数 updatePoints 注释掉，它通常会绘制点（point.x 和 y 具有正确的值）。这意味着更新功能肯定有问题，但我看不到任何错误，我过去使用此功能没有问题..

任何帮助将不胜感激！

更新函数：

function updatePoint(point) {
    console.log(pointList[10].x)
        point.eX = pageX - offLeft;
        point.eY = pageY - offTop;         
        var dx = (point.eX - point.origPosX);
        var dy = (point.eY - point.origPosY);
        var mag = Math.sqrt(dx * dx + dy * dy);
        point.velocityX = (dx / mag) * point.speed;
        point.velocityY = (dy / mag) * point.speed;
        point.x += point.velocityX;
        point.y += point.velocityY;       
    }

【问题讨论】：

您的小提琴设置不正确。 jsfiddle 代码本身添加了<body> 标记，并在“加载”事件处理程序中运行您的代码。

标签： javascript jquery mouse move

【解决方案1】：

当您的页面加载并且您最初调用“draw”时，变量“pageX”和“pageY”尚未从“mousemove”事件处理程序中初始化；那时这些事件都不会发生。

Here is an updated (working?) version of your fiddle.我所做的重要更改是：

var pageX = 0;
var pageY = 0;

我还做了一些小改动，以使代码在小提琴上下文中正常工作。

【讨论】：