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

У меня есть элемент изображения с 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();
}

image updating html5-canvas raster paperjs
person Rishi    schedule 27.06.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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