1

多数の画像を表示しているHTML5キャンバスを含むWebページがあります。KineticJSライブラリを使用して、キャンバスの周りに画像をドラッグアンドドロップできるようにしました。

ただし、機能に1つか2つの変更を加えたいと思ったため、ローカルにダウンロードして保存したライブラリのコピーを使用しています。（たとえば、変更する前に、キャンバス上の画像でクリックが検出された場合、Kineticライブラリ以外のものによって以前にキャンバスに描画されていたものはすべてキャンバスからクリアされます。この呼び出しを削除しました。 clear（）、キャンバスに描画したものが他にもいくつかあったので、そこに残したいと思いました。）

ここで、コードにいくつかの機能を追加して、キャンバスに描画された画像の1つでクリックが検出されたときに、クリックされた画像のテキストによる説明が外部のWebページに表示されるようにします。キャンバス。

次の関数を使用して、画像の1つでクリックが検出されたかどうかを検出しています。

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 = tips[imageCheckIteration];
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

キャンバスに表示される画像はすべて、「ソース」と呼ばれる配列に格納されます。したがって、コードのこのセクションのwhileループでは、クリックのx座標とy座標が、配列の最初の画像から始まり、画像が描画されている場所にあるかどうかを確認する必要があります。最後。

クリックが画像が描画された位置にあるとループが判断した場合、コンソールは「画像をクリックして検出されました」というメッセージをログに記録し、tipsParagraph変数の値をに保存されている値に更新する必要があります「tips」配列。画像配列でクリックされた画像と同じ位置にあります（画像配列は「ソース」と呼ばれています）。（「tips」配列の各位置に格納されているテキストは、「sources」配列の同じ位置にある画像に対応しています）。

前に述べたように、KineticJSライブラリのローカルコピーを使用しており、その「mousedown」関数を次のように編集しました。

_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);
    }

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

isClickOnImageつまり、関数に呼び出しを追加しました。

ただし、キャンバス上の画像をクリックしても、ページの「tipsParagraph」セクションのテキストは更新されません。'tipsParagraph'は<p>、キャンバスの下に表示されるタグに付けたIDです。

これは、「tipsParagraph」のコード行です。

<p id = "tipsParagraph">This is where the text will be displayed. <script>$('#tipsParagraph').text(tips[imageCheckIteration]);</script></p>

この行に追加したJSにより、変数の値が決定する位置に関係なく、表示されるテキストがtips配列からのテキストになると想定しましたimageCheckIteration。ただし、何らかの理由で、私のページに表示されているヒントは、常にヒント配列の最初の要素です。これは、ページが読み込まれるとすぐに（つまり、画像をクリックする前に）表示される要素であり、画像のクリックが検出されても変更されません。したがって、私の関数はライブラリ内isClickOnImageの関数によって呼び出されることはなく、ページの読み込み時に値がすぐに設定され、その後はユーザーによるページの操作に関係なく変更されないように見えます。 ..。。mousedowntipsParagraph

誰かが私の理由を指摘できますか？何が間違っているのでしょうか。また、ユーザーがクリックした画像に対応するテキストを表示するために何をする必要がありますか？

4

1 に答える 1

0

見てみると

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

 //var imageCheckIteration = 0;  // <-- why is this 0 commented out?
 while(imageCheckIteration < sources.length){ // <-- imageCheckIteration is never incremented, so it never increases, hence the check never occurs
    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 = tips[imageCheckIteration];
    } else {
        document.getElementById("tipsParagraph").innerHTML = "";
    }
 }
}

次のようなものを試してください:インクリメントを制御するための for ループ構造:

for( var i=0; i<sources.length; i++){ // this will go through all items in the sources array
    if((clickX > sources[i].x ... ) //and other checks
}
于 2013-01-24T17:37:15.070 に答える