Question

我有以下JS函数，我用它来检测我的HTML5画布上的'可拖动'图像是否拖动在静态“描述框”图像上，也显示在画布上：

function isHit(mouseX, mouseY){
if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    if(mouseY > 420){
        if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
            console.log("Correct");
        }else{
            console.log("Incorrect");
        }
    }
}

}

这个想法是画布上会有许多静态图像（将是描述框），以及更多可拖动的图像。用户需要将每个可拖动图像拖动到相关描述框中。

目前，我的if语句只是检查当前被拖动的图像是否属于四个描述框中的第一个。

由于描述框全部显示在画布底部的一行中，因此我将我的函数设置为仅检查mouseY变量（光标在画布上的y位置）时的碰撞大于420-因为420是描述框图像的顶部“边界”。

然后，如果draggingImage变量为真，并且光标的mouseY值大于420，我想开始检查光标是否悬停在任何描述框上。第一个显示在X位置80和200之间，所以我正在检查mouseX是否大于80且小于200.

如果是，则该函数应检查obj.shape.index的值是否大于或等于0且小于numImagesAssets的值。如果是，则控制台应记录“正确”，如果不是，则应记录“不正确”。

变量obj.shape.index获取已在我的图像数组中单击的图像的位置（此数组包含画布上显示的所有可拖动图像）。如果它的值在某个范围之间，那么我知道图像属于第一个描述框，如果它在另一个范围之间，它属于下一个描述框等。

在此示例中，变量numImagesAssets的值为10（在我的代码中由console.log行显示在控制台中）

在我的mousedown函数中，我有一行：

console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index);

当我点击画布上的图像时，此console.log行显示变量属性obj.shape.index的值，例如，我只是点击了画布上的一个可拖动图像，这个line将以下输出打印到控制台：

value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8

所以我知道我点击那个时间的图像位于我的图像数组中的位置8（我已经多次手动检查，每次点击不同的图像，并且它始终显示正确的位置）。

现在，我遇到的问题是，当我实际上将图像拖到正确的描述框上时，我得到一个控制台错误，上面写着“obj未定义”，并且它抱怨该行：< / p>

if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){

但是，奇怪的是，如果我将图片拖到其不属于的某个描述框中，我的else语句中的if子句会被正确触发，并且“不正确”这个词打印到控制台....

当我将图像拖到正确的描述框中时，我无法弄清楚为什么它不起作用，或者为什么它说“obj”在这种情况下没有定义，但是很高兴使用“obj”来表示if声明中的'else'子句。

有人有什么想法吗？

编辑19/03/2013 @ 12:00

好的，我已经稍微修改了我的isHit功能，添加了另一条console.log行，该行会在obj.shape.index函数中显示isHit的值。该功能现在看起来像这样：

function isHit(mouseX, mouseY, obj){
if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    if(mouseY > 420){
        console.log("Value of obj.shape.index = " +obj.shape.index);
        if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
            console.log("Correct");
        }else{
            console.log("Incorrect");
        }
    }
}
}

在调用isHit之前，我有以下控制台日志行：

console.log("obj.shape.index = " + obj.shape.index);

当我第一次点击图像时，这一行显示obj.shape.index的值为0（这是正确的 - 它是我的图像数组中的第一个图像），然而，当我拖动图像时在画布上，obj.shape.index的值似乎随机增加......控制台在某一点显示它是23，然后它是25，然后当我最终将它拖到它的描述框时，控制台记录该行：

if dragging image == true statment is being called

显示正在调用isHit函数，并且打印到控制台的下一个内容是行：

Value of obj.shape.index = 34

知道为什么obj.shape.index的值不断增加？它实际上不是数组中元素的位置吗？我确定它是，但是当我点击其中一个图像时，它会显示它们在数组中的位置值，因此我不明白为什么当我在画布周围移动图像时值会不断增加。 ..它在阵列中的位置根本没有改变......

Answer 1

如果在输入isHit（）之前obj.shape.index有效，则可能存在范围问题。

试试这个 - 将obj提供给isHit：

// call isHit and also supply obj
console.log("obj = "+obj);                 // Test obj for validity just before calling isHit
var isItHit = isHit(mouseX, mouseY, obj);  // Then call isHit WITH obj

// and modify isHit to accept the obj
function isHit(mouseX,mouseY,obj) { ...

JS控制台错误 - 对象未定义

1 个答案: