키네틱 js

Question

캔버스에 Kinetic.js를 사용하여 캔버스에 이미지 세트를로드하는 방법과 한 번에 하나의 이미지를 동시에로드해야하는 모든 이미지를 캔버스에 한 번에 캔버스에 하나의 이미지로로드하는 방법. 다음 이미지를 클릭하면 이미지가 이동됩니다.

Answer 1

KineticJS에서 이미지 바꾸기 (다른 이미지 대신 하나 보이기)는 다음과 같이 할 수 있습니다.

이미 배열 변수 imgs []에 업로드 된 2 개의 이미지가 있다고 가정 해 보겠습니다. 경우 당신이 그들을 처리하기 전에 이미지를로드하는 방법을 잘하지, 당신이 읽을 수있는 것이 here

말할 수 있습니다 :

 

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

을 그리고 다음과 같이 표시 영역을 정의 할 수 있습니다 :

 

    var dispArea = new Kinetic.Image(
    { 

    image: imgs[0], 
    // You may specify the initial x,y position coordinates inside or set them later. 
    // Similarly for width, height, etc. 
    }); 
    dispArea.currIndex = 0; //This sets up the index of currently shown image 
    displayLayer.add(dispArea); //Assuming your layer is named as displayLayer 

그래서 귀하의 다음 버튼의"onClick" "changeImage"함수를 호출하는 이벤트은 다음과 같이 정의됩니다.

 

    function changeImage() 
    { 
    // Increment the index, make it zero if it goes over the total images 
    dispArea.currIndex = (dispArea.currIndex + 1)%imgs.length; 

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

    displayLayer.draw(); 
    }