Question

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

我做的是：

      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();
    });

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

Answer 1

如果您不需要更改或使用图片，请在画布标记上使用背景图片：

<canvas id="canvas" 
        style="background-image: url(http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg);"></canvas>

Answer 2

您可以将图像作为paperjs Raster项目添加到纸质项目中，如此

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

它将插入当前图层的项目中。然后，您可以使用诸如sendToBack和bringToFront之类的paperjs函数来操作出现在哪里的内容。我可能会将光栅图像放在第一个图层上，然后为图形添加一个新图层，以便于跟踪。

使用paperjs在图像上绘图

2 个答案: