javascript - 使用 paperjs 在图像上绘图

Question

我正在使用 Paper.js 在 Canvas 上绘制线条。 我希望能够将本地镜像上传到 paperjs Canvas ，然后能够在其上绘图。

我所做的是:

      var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    function make_base()
    {
      var img = document.createElement("img");
      img.src = "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg";
      context.drawImage(img, 100, 100);
    }
    document.getElementById('imageUpload').addEventListener('click', function(){
      make_base();
    });

这成功地将图像添加到我的 Canvas 上，但是当我在 Canvas 上绘制时，图像消失并且图像位于线条的顶部，应该位于线条的后面。

Answer 1

您可以将图像作为 paperjs Raster 项目添加到 paper 项目中

var raster = new Raster({
    source: "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg",
    position: view.center
});

它将被插入到项目的当前层中。然后，您可以使用 paperjs 函数(例如 sendToBack 和 BringToFront)来操作出现在何处的内容。我可能会将光栅图像放在第一个图层上，然后为绘图添加一个新图层，以便于跟踪。