0

HTML5キャンバス上の「ドラッグ可能な」画像が静的な「説明ボックス」画像の上にドラッグされ、キャンバスにも表示されているかどうかを検出するために使用している次のJS関数があります。

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ステートメントは、現在ドラッグされている画像が 4 つの説明ボックスの最初に属しているかどうかを確認するだけです。

説明ボックスはすべてキャンバスの下部に向かって一列に表示されるため、mouseY変数 (キャンバス上のカーソルの y 位置) が 420 より大きい場合にのみ衝突をチェックするように関数を設定しました。説明ボックス画像の上部「境界」。

次に、draggingImage変数が true で、カーソルの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たとえば、キャンバス上のドラッグ可能な画像の 1 つをクリックしたところ、この行は次の出力をコンソールに出力しました。 :

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

そのため、そのときにクリックした画像が画像配列の位置 8 にあったことがわかります (これを手動で何度か確認し、毎回別の画像をクリックしましたが、常に正しい位置が表示されていました)。

さて、私が抱えている問題は、実際に画像を正しい説明ボックスにドラッグすると、「obj is not defined」というコンソールエラーが表示され、次の行について不平を言うことです:

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

しかし、不思議なことに、画像が属していない説明ボックスの 1 つに画像をドラッグすると、ステートメント内のelse句ifが正しくトリガーされ、「正しくない」という単語がコンソールに出力されます....

画像を正しい説明ボックスにドラッグしても機能しない理由、またはその場合に「obj」が定義されていないと表示される理由がわかりませんが、「else」に「obj」を使用しても問題ありません。ifステートメントの句。

誰にもアイデアはありますか？

編集 2013/03/19 @ 12:00

わかりました、関数内の値を表示isHitする別の行を追加するために、関数を少し編集しました。関数は次のようになります。console.logobj.shape.indexisHit

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

isHit() に入る前に obj.shape.index が有効な場合は、スコープの問題がある可能性があります。

これを試してください -- isHit に obj を指定してください:

// 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 に答える