image - 使用 PaperJs 动态更新 Canvas 图像

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] 之外的所有其他对象，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();
  }
}