使用paperjs在图像顶部绘制

drawing on top of the image using paperjs

本文关键字：顶部 绘制 图像 paperjs 使用      更新时间：2023-12-10

我正在使用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();
    });

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

您可以将图像作为paperjs光栅项添加到纸张项目中，例如

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

它将插入到当前图层中的项目中。然后，您可以使用像sendToBack和bringToFront这样的paperjs函数来处理出现在哪里的内容。我可能会把光栅图像放在第一个图层上，然后为图形添加一个新的图层，使其易于跟踪。

如果您不需要更改或处理图像，请使用画布上的背景图像标签：

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