KineticJS에서 이미지 바꾸기

Question

KineticJS를 사용하여 웹 앱을 만들려고합니다. 기본적으로 이미지를 캔버스 (KineticJS의 스테이지)에 추가하는로드에서 실행되는 함수가 있습니다. 함수가 실행될 때마다 기존 이미지 아래에 이미지를 다시 추가합니다. 현재 이미지는 현재 스테이지에있는 이미지를 대체하기 위해 필요합니다. 함수가로드 될 때마다 새 이미지 객체를 만드는 것은 저와 관련이 있습니다. 그러나 위치가 다른 이유 (아래)가 혼란 스럽습니다. 동일한 이벤트를 여기에서 시뮬레이션했습니다 : http://jsfiddle.net/UCvbe/ - 버튼을 여러 번 클릭하면 아래 이미지가 복제됩니다. 최종 기능은 사용자가 두드리는 사람을 선택할 때 실행되므로 최종 기능은 '은색'과 같은 매개 변수를 받아 들여야 실버 노커 등을 그릴 수 있습니다.

어떤 도움을 주시면 감사하겠습니다!

Answer 1

귀하의 코드는 다음과 같습니다

$('#testBtn').click(function() { 

var stageKnocker = new Kinetic.Stage({ 
    container: "canvas-overlay", 
    width: 402, 
    height: 470 
}); 
var layerKnocker = new Kinetic.Layer(); 

var imageObj = new Image(); 
imageObj.onload = function(){ 
    var image = new Kinetic.Image({ 
    x: 193, 
    y: 110, 
    image: imageObj, 
    width: 25, 
    height: 50, 
    draggable: true 
    }); 
    layerKnocker.add(image); 
    stageKnocker.add(layerKnocker); 
}; 
imageObj.src = "http://shop.windowrepairshop.co.uk/WebRoot/Store3/Shops/es115683_shop/49E6/ECF2/0C60/3750/10B1/50ED/8970/710D/V6GP_0020_gold_0020_plate_0020_vic_0020_urn_0020_LArge.jpg"; 

}) 

첫 번째 문제는 새로운 단계를 사용자가 버튼을 클릭 할 때마다 작성하는 것입니다. 그러지 마라. 단 하나의 무대 만 있으면된다.

사용자가 버튼을 클릭 할 때마다 새 레이어도 생성됩니다. 그러지 마. 당신은 하나의 레이어가 필요 & 필요합니다.

마지막으로, 사용자가 버튼을 클릭하여 레이어에 추가 할 때마다 새 Kinetic.Image가 생성됩니다. 괜찮아! 계속 그렇게해라. 하지만 당신은 또한 오래된 키네틱을 제거하고 싶습니다. 이미지. 그렇지 않으면 이미지를 바꾸지 않고 계속 추가 할 수 있습니다.

그래서 층에 Kinetic.Image를 추가하기 전에, 당신은 레이어에서 기존 이미지를 제거하려면 : layerKnocker.removeChildren() 레이어에 모든 것을 제거합니다.

완료되면 단일 스테이지, 단일 레이어 및 언제든지 단일 이미지를 갖게됩니다.