Kineticjs로 캔버스에 여러 이미지 추가

Question

이미지 추가를 위해 HTML5 Canvas Kinteticjs tutorial을 사용하고있었습니다. 여러 이미지를 추가하고 레이어를 추가하고 싶습니다.
아래 예제에는 두 개의 이미지가 있지만 두 이미지는 동일합니다.

질문 : 어떻게 2 개의 다른 이미지를로드합니까?

Answer 1

하나가 아닌 두 개의 이미지 객체를 만들어야하며 둘 다로드 할 때 두 이미지를 모두 캔버스에 배치 할 수 있습니다.

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

Answer 2

이미 알고 계시 겠지만 Image는 KineticJS 개체가 아니라 Kinetic.Image입니다.

Image와 Kinetic.Image 사이에 일대일 연결을 설정하는 한 괜찮습니다.

html5canvastutorials.com의 예제는 Image.onload 함수를 사용하여 Kinetic.Image를 만듭니다. 이것은 많은 사람들을 혼란스럽게합니다. 그러나 이미지를 미리로드 할 필요는 없습니다.

이미지가로드 될 때 Kinetic.Image를 만드는 목적은 캔버스에 유효하지 않은 (깨진) 이미지가없는 것입니다. 따라서 이미지를 모두 유효하게 만들면 이미지를 미리로드하면 image.onload를 사용할 필요가 없어 혼란 스럽습니다. iamges를 미리로드

,

1. 당신은 단순히 문서에 이미지를 추가하고 아약스 호출을 사용하여,
2. 숨겨진 또는 전화 이미지 URL로 만들 수 있습니다.