Paper.js 加载图像和活动层

Question

我正在使用 Paper.js 制作一个处理图像队列的图像编辑器。这些图像来自上传到服务器并转换为图像的 PDF。根据question 中的建议，我将每个图像加载到自己的图层中。

// Load images of pdf, each into its own layer
var loadPdf = function(pdfAsImages) {
  toolsSetup();

  // Loop through images for pdf
  pdfToLayerMap[pdfAsImages.id] = [];
  for(var i = 0; i < pdfAsImages.images.length; i++) {
    var layerForImage = new paper.Layer();
    layerForImage.visible = false;
    pdfToLayerMap[pdfAsImages.id][i] = {
      layerIndex: paper.project.activeLayer.index,
      imageHeight: pdfAsImages.images[i].height
    };

    var imageDataUrl = 'data:image/png;base64,' + pdfAsImages.images[i].imageData;
    var raster = new paper.Raster(imageDataUrl, new paper.Point(canvas.width / 2, canvas.height / 2));
    layerForImage.addChild(raster);

    selectedItemsByLayer[layerForImage.index] = new paper.Group();

    registerLayerEvents(layerForImage);
  }
};

var setActive = function(pdfIndex, imageIndex) {
  var imageHeight =  pdfToLayerMap[pdfIndex][imageIndex].imageHeight;
  paper.project.activeLayer.visible = false;
  var layerToActivate = pdfToLayerMap[pdfIndex][imageIndex].layerIndex;
  paper.project.layers[layerToActivate].activate();
  paper.project.layers[layerToActivate].visible = true;
  fitToPage(imageHeight);
};

loadPdf 每次从服务器接收到图像时都会被调用。这为 pdf 中每个页面的每个图像添加了一个新层。问题是，当创建一个新层时，它被设置为活动层。因此，当从服务器加载图像时，我们希望能够对已加载的图像执行编辑。但是随着图像加载，活动层与我们当前正在编辑的任何已加载图像不同步。因此，如果我尝试添加文本，例如，它会将其添加到错误的图像中，因为它会将其添加到活动层，即错误的层。不知何故，我们需要将活动层与我们当前正在编辑的图像保持一致。 （这可以通过单独的 Paper 上下文来完成吗？）

由于我们事先不知道图像的数量（我们知道 PDF 的数量，但不知道每个有多少页），我们不能这样做，预先初始化所有层：

var initializeLayers = function(numberOfLayers) {
  for(var i = 0; i < numberOfLayers; i++) {
    var layerForImage = new paper.Layer();
    layerForImage.visible = false;
    selectedItemsByLayer[i] = new paper.Group();
  }

  paper.project.layers[0].activate();
};

那么有没有办法阻止 Paper.js 在创建时将新图层设置为活动状态？还是有其他方法可以解决这个问题？

Answer 1

简单的回答，是的。

var layer = new paper.Layer({insert: false});

编辑以解决以下提问者的评论：

您所指的草图是试图直接操纵纸张的内部数据结构。这就是它不起作用的原因。

这是一个修改后的sketch，它可以处理事情而不会弄乱纸张的内部结构。

顺便说一句，以防万一，这是我昨天在意识到纸张可以创建一个层但不能将其插入到项目中之前汇总的按需方法的元解决方案。我说元解决方案是因为我只是在这里编写了代码，没有进行任何测试，所以如果您遇到问题，请告诉我，我会修复它们。

// Load images of pdf, each into its own layer
var loadPdf = function(pdfAsImages) {
    toolsSetup();

    // Loop through images for pdf
    pdfToLayerMap[pdfAsImages.id] = [];
    for(var i = 0; i < pdfAsImages.images.length; i++) {
        pdfToLayerMap[pdfAsImages.id][i] = {
            layerIndex: null,
            imageHeight: pdfAsImages.images[i].height,
            dataURL: 'data:image/png;base64,' + pdfAsImages.images[i].imageData;
        };
    };
};

var setActive = function(pdfIndex, imageIndex) {
    var image = pdfToLayerMap[pdfIndex][imageIndex];

    // make the current layer invisible
    paper.project.activeLayer.visible = false;

    // if the layer has already been created just enable it and return
    if (image.layerIndex !== null) {
        paper.project.layers[image.layerIndex].activate();
        paper.project.layers[image.layerIndex].visible = true;
        fitToPage(image.imageHeight);
        return;
    } 

    // the layer hasn't been created, create it
    var layer = new paper.Layer();
    image.layerIndex = layer.index;
    layer.addChild(new paper.Raster(image.dataURL,
                                paper.view.bounds.center));
    selectedItemsByLayer[layer.index] = new paper.Group();
    registerLayerEvents(layer);
    }

};

您可能希望在创建栅格后对 dataURL 执行null 之类的操作以节省一些内存，具体取决于在任何给定时间可能加载的这些数据的数量。