Question

绘制到 p5.Image 而不是画布

2016-09-08

5042

processing p5.js

给定一个已加载的 png 图像作为模板，我想让用户跟踪图像的元素。在 p5 中，这很容易：

setup() {
    // Load image
    var img = loadImage('...');
    image(img, 0, 0);
}

draw() {
    ellipse(mouseX, mouseY, 2, 2);
}

但是，我希望能够仅保存省略号（不保存底层图像）。有没有办法写入 Image 而不是直接写入画布，这样我就可以提升轨迹的像素而不带走原始图像？

我目前的计划是：

覆盖第二个 p5 实例，并在覆盖在图像上的透明画布上绘制...但这似乎更难维护，并且可能会因 DOM 未完全对齐而受到影响
不要使用 ellipse ，而是写入 createImage 生成的像素数组...但这似乎很慢而且不愉快。

警告：图像是 p5.Image ，因此覆盖在 <img> 之上是不够的。

Answer 1

您可以使用 createGraphics() 函数创建 p5.Renderer 实例。然后，您可以绘制到 p5.Renderer ，然后将其叠加在图像之上。然后，您可以访问 p5.Renderer 的像素数组以仅获取覆盖层，而不是图像。

这是一个示例：

var img;
    var pg;
    
    function preload() {
      img = loadImage("https://www.gravatar.com/avatar/06ce4c0f7ee07cf79c81ac6602f5d502?s=32&d=identicon&r=PG");
    }
    
    function setup(){
      createCanvas(300, 600);
      pg = createGraphics(300, 300);
    }
    
    function mousePressed(){
      pg.fill(255, 0, 0);
      pg.ellipse(mouseX, mouseY, 20, 20);
    }
    
    function draw() {
      image(img, 0, 0, 300, 300);
      image(pg, 0, 0);
      image(pg, 0, 300);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
Click in the image to draw to the buffer below it! (View as full page to see the buffer.)

绘制到图像覆盖

更多信息可以在参考中找到。

顺便说一下，有一个 p5.js 标签。