绘制到p5.Image而不是画布 [英] Drawing to p5.Image instead of to canvas

问题描述

给出一个加载的png图像作为模板，我希望使用户能够跟踪图像的元素.在p5中，这很容易:

Given a loaded png image as a template, I want to enable a user to trace elements of the image. In p5, this is easy:

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

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

但是，我希望然后能够仅保存 省略号(不包含基础图像).有没有一种方法可以写Image而不是直接写到画布上，这样我就可以抬起轨迹的像素而无需拍摄原始图像?

However, I want to then be able to save only the ellipses (without the underlying image). Is there a way to write to an Image instead of directly down to the canvas, so that I can lift the pixels of the trace without taking the original image with it?

我当前的计划是以下之一:

My current plans are one of:

• 覆盖第二个p5实例，并在覆盖在图像上的透明画布上绘画...但是，这似乎很难维护，并且可能会因DOM不能完美对齐而受到困扰
• 代替使用ellipse，而是写入createImage生成的像素阵列...但这似乎很慢且令人不快.

• Overlay a second p5 instance, and draw on a transparent canvas overlaid on the image... But this seems harder to maintain, and may suffer from the DOM being out of perfect alignment
• Instead of using ellipse, write to a createImage-generated pixel array... But this seems slow and unpleasant.

注意事项:图像是p5.Image，因此将图像叠加在<img>顶部是不够的.

Caveat: The image is a p5.Image, so overlaying on top of a <img> won't be enough.

推荐答案

您可以使用> c6> 函数来创建p5.Renderer的实例.然后，您可以绘制到p5.Renderer，然后将其覆盖在图像上方.然后，您可以访问p5.Renderer的像素阵列来获取叠加层，而不是图像.

You can use the createGraphics() function to create an instance of p5.Renderer. You can then draw to the p5.Renderer and then overlay it on top of the image. Then you can access the pixel array of the p5.Renderer to get just the overlay, not the image.

这里是一个例子:

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.)

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

More info can be found in the reference.

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

By the way there is a p5.js tag.

这篇关于绘制到p5.Image而不是画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！