1

HTML5キャンバスにいくつかの画像があり<p></p>、カーソルがこれらの画像の1つにカーソルを合わせると、HTMLタグに表示されるテキストを更新する関数を呼び出したいと思います。次の関数を使用して、画像がキャンバスに描画されています。

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });

    // add cursor styling

    imagesLayer.add(canvasImage);
}

mouseover段落の内容をこの関数に更新する関数を呼び出すコードを追加して、各画像にon関数を追加しようとしたので、drawBox関数は次のようになります。

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });

    // add cursor styling


    canvasImage.on("mouseover", function(){
        //displayAssetDescriptionTip();
        console.log("displayAssetDescriptionTip() is being called on mouseover event");

        });

    imagesLayer.add(canvasImage);
}

上記のようにこの関数を使用してページを表示し、関数が追加された画像の1つにカーソルを合わせると、mouseover関数に追加したログがコンソールに表示されます。マウスオーバーが正しく機能していること。

しかし、私が抱えている問題は、mouseoverイベント内から呼び出したい関数にあります。displayAssetDescriptionTip()上記のように、mouseoverイベントで関数の呼び出しをコメントアウトしたことがわかります。これは、カーソルがこれらの画像にカーソルを合わせた場合に呼び出したい関数ですが、段落内のテキストは常に最初の説明ボックスに属するテキストに変更されるようです...つまり、カーソルがイベントを追加した画像のいずれかにmouseoverカーソルを合わせると、カーソルがカーソルを置いた画像ではなく、最初の画像に属するテキストにテキストが変更されます。

関数は次のとおりです。

function displayAssetDescriptionTip(){
    if(canvasImage.id = "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id = "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id = "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id = "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;

    console.log("displayAssetDescriptionTip being called");
}

他の画像に対応するテキストではなく、常に最初の画像のテキストにテキストを変更する理由を誰かが知っていますか？カーソルがホバーしている画像に応じて、テキストを配列の別の要素に変更するように設定したので、画像ごとにその配列とは異なる要素を表示する必要があります...

4

1 に答える 1

0

関数displayAssetDescriptionTipでは、==比較演算子の代わりに=代入演算子を使用しているため、最初のif条件は常に一致します。

関数が修正されました：

function displayAssetDescriptionTip(canvasImage){
    if(canvasImage.id == "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id == "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id == "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id == "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;

    console.log("displayAssetDescriptionTip being called");
}

イベントハンドラへの引数としてcanvasImageを渡すことを忘れないでください

 canvasImage.on("mouseover", function(){
        displayAssetDescriptionTip(canvasImage);
        });
于 2013-02-26T12:52:48.787 に答える