使用Kineticjs在畫布上添加多個圖像

我正在通過HTML5 Canvas Kinteticjs tutorial添加圖像。我想添加多個圖像並對它們進行分層。
下面的例子有兩個圖像，但兩者都是相同的。使用Kineticjs在畫布上添加多個圖像

問題：我如何加載2個不同的圖像？

2013-02-27 user2115317

您必須創建兩個圖像對象而不是一個圖像對象，並且在加載這兩個圖像對象時，可以將兩個圖像放在畫布上。

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

來源

2013-02-27 14:24:53 devnull69

難道不是更有說服力的方法嗎？想象一下，你想創建一個遊戲，並且必須加載所有圖像。這樣我最終將只有onload函數有數百行。 – codepushr 2013-08-30 01:19:48

對於每個Image對象，你都可以做一些像「imageObj.onload = function（）{stage.batchDraw（）;}」的內容，但是這會在空載完全加載之前渲染空的圖像。最好的解決方案是將它們全部預加載或製作一些處理事物的包裝。如果它是一款遊戲，那麼你就不會一直重新加載圖片 - 這太滯後了。 – Dalius 2014-03-02 22:11:35

正如你可能已經知道，圖像不是KineticJS對象，但Kinetic.Image是。

所以，只要你在Image和Kinetic.Image之間建立一對一的連接，你就可以使用它。

html5canvastutorials.com上的示例使用Image.onload函數來創建Kinetic.Image。這讓很多人感到困惑。但是，如果預加載圖像，則不需要這樣做。

加載圖像時創建Kinetic.Image的目的不是在畫布上顯示無效（損壞）的圖像。所以，如果你讓所有的圖片有效，通過預加載它們，你不需要使用image.onload，這讓你感到困惑。

要預裝iamges，

你可以簡單的圖像添加到您的文檔，並使用Ajax調用使其爲隱藏
或者來電圖像的URL。

來源

2013-02-27 19:50:29 allenhwkim

使用Kineticjs在畫布上添加多個圖像

回答

相關問題