在PApplet中绘制形状对立面

Question

有没有办法把整个画布掉下来，除了形状。例如，this thread，但在PApplet的处理中。

谢谢你的进阶。

Answer 1

根据HTML 5链接中的答案，我假设您需要这样的内容：

PGraphics mask, filler;
int x;

void setup(){
  size(400,400);

  // initial bg color, the white circle...
  background(255);

  //init both PGraphics
  mask = createGraphics(width, height);
  filler = createGraphics(width, height);

  // draw a circle as a mask
  mask.beginDraw();
  mask.background(255);
  mask.noStroke();
  mask.fill(0);
  mask.ellipse(width/2, height/2, 200, 200);
  mask.endDraw();
}

void draw(){

  // a changing bg 
  x = (x+1)%255;
  background(x);

  //dinamiaclly draw random rects
  filler.beginDraw();
  filler.noStroke();
  filler.fill(random(255), random(255), random(255));
  filler.rect(random(width), random(height), random(5,40), random(5,40));
  filler.endDraw();

  // get an imge out ofthis...
  PImage temp = filler.get();

  //mask image
  temp.mask(mask);

  //dispay it
  image(temp, 0, 0);
}

void mousePressed(){

  mask.beginDraw();
  mask.background(0);
  mask.noStroke();
  mask.fill(255);
  mask.ellipse(width/2, height/2, 200, 200);
  mask.endDraw();
}

void mouseReleased(){

  mask.beginDraw();
  mask.background(255);
  mask.noStroke();
  mask.fill(0);
  mask.ellipse(width/2, height/2, 200, 200);
  mask.endDraw();
}

第二个示例

PGraphics mask, front, back;
int x;

void setup(){
  size(400,400);

  background(0);

  //init both PGraphics
  mask = createGraphics(width, height);
  front = createGraphics(width, height);
  back = createGraphics(width, height);
}

void draw(){

  float x = random(width);
  float y = random(height);
  float sx = random(5, 40);

  // draw a circle as a mask      
  mask.beginDraw();
  mask.background(255);
  mask.noStroke();
  mask.fill(100);
  mask.ellipse(mouseX, mouseY, 200, 200);
  mask.endDraw();

  //dinamiaclly draw random colored rects to PG
  front.beginDraw();
  front.noStroke();
  front.fill(random(255), random(255), random(255));
  front.rect(x, y, sx, sx);
  front.endDraw();


 //dinamiaclly  draw random gray rects to display
  back.beginDraw();
  back.stroke(200);
  back.fill(0, 100);
  back.rect(x, y, sx, sx);
  back.endDraw();

  // get an imge out ofthis...
  PImage temp = front.get();

  //mask image
  temp.mask(mask);

  //dispay it
  image(back,0,0);
  image(temp, 0, 0);

}

使用展开映射的示例

import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
PGraphics mask, red;
color transparent = color(0);
color opaque = color(255);

UnfoldingMap map;

void setup() {
  size(800, 600, P2D);
  mask = createGraphics(width, height);
  red = createGraphics(width, height);

  map = new UnfoldingMap(this);
  map.zoomAndPanTo(new Location(52.5f, 13.4f), 10);
  MapUtils.createDefaultEventDispatcher(this, map);
}

void draw() {
  map.draw();
  PImage temp = get();

  //red
  red.beginDraw();
  red.tint(200,20,20);
  red.image(temp, 0, 0);
  red.endDraw();

  //mask

  mask.beginDraw();
  mask.noStroke();
  mask.background(opaque);
  mask.fill(transparent);
  mask.ellipseMode(CENTER);
  mask.ellipse(mouseX, mouseY, 200,200);
  mask.endDraw();

  // without this i'm not getting to call mask in red...
  // don't really know why, this is a workaround
  PImage redCasted = red.get();
  redCasted.mask(mask);

  image(redCasted, 0, 0);


}

Answer 2

您的问题并没有说明您是否需要比链接显示的内容更多的内容，因此，这个答案可能不是您想要的(但这是您所要求的)。首先，用任何你想要的颜色填充整个屏幕，然后在上面画出你的形状。示例：

background(0);
fill(255);
ellipse(50,50,50,50);

​

​