Обновление изображения Canvas динамически с использованием PaperJs

Question

У меня есть элемент изображения с src, указывающий на обработчик (asp.net), и это изображение используется как источник для объекта Raster (PaperJs), определяемого как глобальный объект и обновляемого во время window.load.

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

Следующий код исправил проблему. Растровый объект добавляется как дочерний объект на уровне [0], удаляются все остальные объекты, кроме дочерних [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(); 
    } 
}