6

HTML5キャンバスがあり、キャンバスの下のページに多数の画像とテキストの段落が表示されています。ユーザーがクリックした画像に応じて、JS配列とは異なる要素を表示するように、段落内のテキストを更新したいと思います。

現在、次のような「マウスダウン」関数があります。

    _mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        isClickOnImage(evt);
        var id = shape.id;
        selectTip(id);
    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

この行var id = shape.idを使用して、関数に渡されるIDを更新して、「tips」配列から正しい要素を取得しようとしましたが、何らかの理由で、ブラウザーでページを表示して画像をクリックすると、キャンバスの下のテキストは更新されません。この関数は、「id」変数をクリックされた画像のIDに更新していないようです。

これを調べた後、クリックが検出された画像の「id」を取得し、「sources」配列をループする「mousedown」関数内でループを使用したいと思うようです。 （これは、すべての画像がHTMLからJSにロードされた場所です）、各位置で、その場所に保存されている画像がクリックされた画像と同じIDを持っているかどうかを確認します。含まれている場合、ループはテキストを配列のその位置に格納されているテキストに設定する必要があり、そうでない場合は、配列が見つかるまで配列を調べ続ける必要があります。これは理にかなっていますか？'mousedown'関数に次のコードを追加しようとしましたが、期待どおりにテキストが変更されません。

var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

ループから欠落しているものはありますか？

関数全体のコードは現在次のようになっています。

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        isClickOnImage(evt);
        /*This line needs to get the element of the sources array that has been selected, 
            and then select the element at the same position from the tips array.*/
        //var id = null;
        var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

        //var id = 
        //selectTip(id);
    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

2013年11月1日16:10編集

のコードselectTipは次のとおりです。

function selectTip(id){
    $("#tipsParagraph").text(tips[id]);
}

jsFiddleをここに配置しました：http：//jsfiddle.net/cd8G7/ただし、「結果」パネルには、ブラウザでページを表示したときに実際に表示されるものが表示されません。画像が表示され、キャンバスの下の段落には、「tips」配列の最初の要素からのテキストが表示されます。

2013年1月23日13時50分編集

これが私のisClickOnImage関数です：

function isClickOnImage(event){
    var clickX = event.clientX;
    var clickY = event.clientY;

    //var imageCheckIteration = 0;
    while(imageCheckIteration < sources.length){
        if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
        (clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
            /*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
            outside the canvas, in the <p></p> tags below. */
            console.log("Click on image detected");
            document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip /*tips[imageCheckIteration]*/;
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

この関数が意図したのは、キャンバス上のクリックのX座標とY座標をキャプチャし、それらを変数「clickX」と「clickY」に格納することです。次に、0に初期化された「imageCheckIteration」という変数があります。この変数は「sources」配列（すべての画像が格納されている配列）の長さよりも短いですが、関数は配列内の画像の1つで覆われているキャンバスの領域をクリックしたかどうかを確認します。

そうであった場合は、コンソールログに「画像をクリックして検出されました」というメッセージと次の行が表示されます。

document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip;

「tipsParagraph」の値を、「sources」配列の「imageCheckIteration」位置にある画像の「​​data-tip」属性の値に設定する必要があります。画像が表示されていないキャンバスの領域でクリックが検出された場合は、「tipsParagraph」の値を何も保持しないように設定する必要があります。

ただし、何らかの理由で、ブラウザでページを表示すると、「tipsParagraph」にデフォルト値である「これがテキストが表示される場所です」というテキストが表示されるので、問題ありません。しかし、画像をクリックしたり、キャンバス上の他の場所をクリックしたりしても、「tipsParagraph」に表示されるテキストは更新されません。

なぜこれなのか理解できません-誰かが私を正しい方向に向けることができますか？isClickOnImage(event)関数が呼び出されないということですか？

4

1 に答える 1

0

キャンバスを介して画像への参照を取得する方法を簡略化しました。ここでのコツは、キャンバスとイメージ コンテナーの z-index を交換し、マウス アップ イベントでイメージへの参照を取得することです。キャンバスの背後にある要素を取得するクリーンな方法がわからないため、回避策があります。

$('canvas').bind('mousedown', function(e) {
  $('section').css('z-index', 4);
});

$('img').bind('mouseup', function(e) {
  $('#tipsParagraph').text($(this).attr('id') + ":" + $(this).attr('alt'));
  $('section').css('z-index', 2);
});

ここでの 2 番目の部分は、画像自体からいくつかの属性を取得し、div 内のテキストを更新することです。

ソリューションの詳細については、こちらを参照してください。

于 2013-01-21T20:37:47.037 に答える