javascript - キネティックjsを使用して一度に1つの画像をキャンバスにロードして複数の画像をロードする

Question

Kinetic.js を使用して一連の画像をキャンバスにロードする方法と、一度にすべての画像を 1 つずつロードする必要があるわけではありません。次の画像をクリックすると、画像がトラバースされます。

Answer 1

KineticJS での画像の置き換え (ある場所を別の場所に表示する) は、次の方法で実行できます。

配列変数 imgs[] に既にアップロードされている 2 つの画像があるとします。画像を処理する前に読み込む方法がわからない場合は、ここで読むことができます

まあ言ってみれば：

var imgs = new Array(2);
imgs[0] = "images/image1.png";
imgs[1] = "images/image2.png";

そして、次のように表示領域を定義しましょう。

    var dispArea = new Kinetic.Image(
    {

    画像: imgs[0],
    // 初期の x、y 位置座標を内部で指定するか、後で設定することができます。
    // 幅、高さなどについても同様
    });
    dispArea.currIndex = 0; //これは、現在表示されている画像のインデックスを設定します
    displayLayer.add(dispArea); //レイヤーの名前がdisplayLayerであると仮定

したがって、次のボタンの 「onClick」イベントでは、次のように定義された関数「changeImage」を呼び出します。

    関数 changeImage()
    {
    // インデックスをインクリメントし、合計画像数を超える場合はゼロにします
    dispArea.currIndex = (dispArea.currIndex + 1)%imgs.length;

    dispArea.setImage(imgs[dispArea.currIndex]);

    displayLayer.draw();
    }