Question

我有一个图像元素，其中src指向Handler（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();
  }
}

使用PaperJs动态更新Canvas图像

1 个答案: