PaperJs를 사용하여 동적으로 캔버스 이미지 업데이트하기

Question

src가 Handler (asp.net)를 가리키는 이미지 요소가 있고이 이미지는 전역 객체로 정의되고 window.load 중에 업데이트 된 Raster (PaperJs) 객체의 소스로 사용됩니다.

var raster; 
paper.install(window);  
function WindowOnLoad() {  
    raster = new paper.Raster('MainContent_imageData'); 
    raster.position = paper.view.center; 
    window.paper.view.draw(); 
} 

상기 코드는 다음 이미지 요소 콜백 제어 (ComponentArt 콜백 제어) 그러나 캔버스와 연관된 버튼 클릭을 통해 업데이트지고 제 부하에 캔버스에 이미지를로드하지 그것을 표시이며 공백.

그런 다음 콜백이 완료된 후에 호출되는 핸들러를 만들었지 만 작동하지 않습니다.

function CallBackCompleted(sender,eventArgs) { 
    var imgData = document.getElementById('MainContent_imageData'); 
    raster.image = imgData ; 
    raster.position = window.paper.view.center; 
    window.paper.view.draw(); 
} 

Answer 1

다음 코드는 문제를 해결했습니다. 래스터 객체는 layer [0]의 자식 객체로 추가되어 래스터 객체를 참조하는 children [0]을 제외한 다른 모든 객체가 제거됩니다.

function CallBackCompleted(sender,eventArgs) { 
    if(window.paper.project.layers[0].hasChildren()) 
     window.paper.project.layers[0].removeChildren(1); 

    var imageObj = new Image(); 
    imageObj.src = document.getElementById('MainContent_imageData').src; 
    imageObj.onload = function() { 
    window.paper.project.layers[0].children[0].setImage(imageObj); 
    window.paper.project.layers[0].children[0].position = window.paper.view.center; 
    window.paper.view.draw(); 
    } 
}