0

我有以下 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获取在我的图像数组中已单击的图像的位置（该数组包含画布上显示的所有可拖动图像）。如果那个值在某个范围之间，那么我知道图像属于第一个描述框，如果它在另一个范围之间，它属于下一个描述框，等等。

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

在我的mousedown功能中，我有这行：

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

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

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

所以我知道我当时单击的图像位于图像数组中的第 8 位（我已经手动检查了几次，每次单击不同的图像，它始终显示正确的位置）。

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

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

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

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

有人有想法么？

编辑 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不断增加吗？它实际上不是数组中元素的位置吗？我确定确实如此，因为当我单击其他图像之一时，它会显示它们在数组中的位置值，所以我不明白为什么当我在画布上移动图像时该值不断增加。 ..它在数组中的位置根本没有改变...

4

1 回答 1

0

如果 obj.shape.index 在输入 isHit() 之前有效，则您可能遇到了范围问题。

试试这个——将 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) { ...
于 2013-03-18T19:25:56.480 回答