html - Kineticjsを使用してCanvasに複数の画像を追加する

Question

画像を追加するためのHTML5CanvasKinteticjsチュートリアルを実行していました。複数の画像を追加して重ねたい。
以下の例には2つの画像がありますが、どちらも同じです。

質問：2つの異なる画像をロードするにはどうすればよいですか？

Answer 1

すでにご存知かもしれませんが、Image は KineticJS オブジェクトではありませんが、Kinetic.Image はそうです。

したがって、Image と Kinetic.Image を 1 対 1 で接続すれば問題ありません。

html5canvastutorials.com の例では、Image.onload 関数を使用して Kinetic.Image を作成しています。これは非常に多くの人々を混乱させます。ただし、画像をプリロードする場合は、その必要はありません。

イメージがロードされたときに Kinetic.Image を作成する目的は、キャンバス上に無効な (壊れた) イメージを持たないようにすることです。したがって、すべての画像を有効にすると、それらをプリロードして、混乱する image.onload を使用する必要がまったくなくなります。

画像をプリロードするには、

1. ドキュメントに画像を追加して非表示にするだけです
2. または、ajax 呼び出しを使用して画像の URL を呼び出します。

Answer 2

1 つではなく 2 つの画像オブジェクトを作成する必要があり、両方をロードすると、両方の画像をキャンバスに配置できます。

var imgObj1 = new Image();
var imgObj2 = new Image();
var loadCount = 0;

imgObj1.onload = function() {
   loadCount++;
   if(loadCount==2) putOnCanvas();
};

imgObj2.onload = function() {
   loadCount++;
   if(loadCount==2) putOnCanvas();
};

imgObj1.src = ".....";
imgObj2.src = ".....";

function putOnCanvas() {
    var yoda = new Kinetic.Image({
      x: 140,
      y: stage.getHeight() / 2 - 59,
      image: imageObj1,
      width: 106,
      height: 118
    });

    var filteredYoda = new Kinetic.Image({
      x: 320,
      y: stage.getHeight() / 2 - 59,
      image: imageObj2,
      width: 106,
      height: 118
    });

    // add the shape to the layer
    layer.add(yoda);
    layer.add(filteredYoda);

    // add the layer to the stage
    stage.add(layer);

    // apply grayscale filter to second image
    filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
      layer.draw();
    });
}