0

多数の画像を表示している HTML5 キャンバスがあります。KineticJS ライブラリを使用して画像を描画し、ドラッグできるようにしましたが、機能に 1 つまたは 2 つの変更を加える必要があるため、ライブラリのローカル コピーを使用しています。

ライブラリ内の関数にさらに機能を追加したいのmousedownですが、やりたいことを行う方法が正確にはわかりません。誰かが私を正しい方向に向けることができるかどうか疑問に思っていますか?

現在、キャンバスに約 30 個の画像が表示されています。画像はすべて HTML の隠しセクションに保存され、そこから JS 配列に追加されています。別の JS ファイルに別の JS 配列もあります。これには、画像配列内の各画像に関するテキスト記述の配列が含まれています。

テキスト配列の位置 0 のテキストは、画像配列の位置 0 の画像の説明、位置 1 のテキストは位置 1 の画像の説明、などです。

<p></p>キャンバスの下のページにHTML タグがあります。

私が今やりたいことは<p></p>、キャンバス上でクリックされた画像に応じてそのタグに表示されるテキストを変更する関数を追加することです...つまり、mousedown関数にいくつかのコードを追加します。

"画像で amousedownが検出された場合、その画像が保存されている画像配列内の位置を見つけ、<p></p>タグ内のテキストを更新して、テキスト配列内の対応する場所に保存されているテキストを表示します。

理論的には、これはかなり簡単なはずだと思っていましたが、どうすればよいかわかりません...おそらく、新しいJS関数を作成する必要があります。

function displayTip(){
    document.getElementById('tipsParagraph').innerHTML= tips[0];
}

mousedown次に、ライブラリ内の関数内からその関数を呼び出します。

よくわからないのは、クリックされた画像が画像配列内のどの位置にあるかを調べて、それを変数に格納し、tips[]その値をその変数の値に設定して、私はヒント配列の同じ位置にいます。

ライブラリ内の関数を少し編集して、mousedownクリックされた画像がどの配列位置にあるかを調べる必要があると思いますが、これを行う方法がわかりません...何か案は？

関数は現在、次の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);

    }

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

また、配列内のどこに画像が保存されているかがわかったら、displayTip関数内のmousedown関数への呼び出しを追加したいと思いますか?

4

1 に答える 1

0

次の関数を追加することで、これを解決できました。

function displayTip(index){

    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
}

mousedown私の JavaScript に、次の行を使用して関数内から呼び出します。

displayTip(obj.shape.index);
于 2013-02-20T15:06:42.933 に答える