java - 处理后图像的不透明度

Question

我想在这里做的事情非常简单。我想将两张图像叠放在一起。当我使用鼠标事件拖动并单击顶部图像时，所选顶部图像的区域将褪色并使下部图像可见。

在我看来，有两种方法可以做到这一点:

我可以使顶部图像随着时间的推移变得透明(在选定的区域内) 或者 我可以以喷雾 jar 风格的方式单独删除像素。想想当年 MS Paint 的喷雾 jar 工具。

这是我开始的一些非常基本的代码，它只是将图像放在彼此之上

  PImage sand;
  PImage fossil;

void setup()
{
  size(400,400);
  background(255,255,0);
  frameRate(30);

  fossil = loadImage("foss.jpg");
  sand = loadImage("sand.jpeg");
}

void draw()
{

   image(fossil, 0, 0, width,height);
   image(sand, 0, 0, width,height);
   smooth();

 if (mousePressed) {
    fill(0);
    tint(255,127); //the opacity function
  } else {
    fill(255);
  } 
}

那么有人对这两种创建不透明度的方法有任何评论吗？或者也许还有我忽略的更简单的方法？

---

也许我的规范中并不清楚，因为下面的两条评论要求澄清。

用最简单的术语来说，我有两张叠在一起的图像。我希望能够对顶层图像进行一些修改，以使底部图像可见。但是，我需要仅对顶级图像的一部分进行此修改。

我想知道哪个是更好的选择。使用tint()使顶部图像的一部分变得透明或从顶层删除像素。

然后我将继续采用这种方法。任何有关如何执行此操作的指示也将受到赞赏。

我希望这能消除任何困惑。

Answer 1

如果您只是想在图像之间进行交叉淡入淡出，可以按照代码建议使用tint()。事实上你已经很接近了:

PImage sand;
PImage fossil;

void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}

void draw()
{
  //tint from 255 to 0 for the top image
  tint(255,map(mouseX,0,width,255,0));
  image(fossil, 0, 0, width, height);
  //tint from 0 to 255 for the bottom image - 'cross fade'
  tint(255,map(mouseX,0,width,0,255));
  image(sand, 0, 0, width, height);
}

对于“喷雾 jar 式”腐 eclipse ，您可以简单地将像素从源图像复制到目标图像中。这取决于您如何循环遍历像素(多少个、什么顺序等)以获得所需的“喷雾”效果，但这里有一个如何使用 copy() 的基本示例功能:

PImage sand,fossil;
int side = 40;//size of square 'brush'
void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}
void draw()
{
  image(fossil, 0, 0, 400, 400);
  if(mousePressed) {
    for(int y = 0 ; y < side ; y++){
       for(int x = 0; x < side; x++){
        //copy pixel from 'bottom' image to the top one
        //map sketch dimensions to sand/fossil an dimensions to copy from/to right coords
        int srcX = (int)map(mouseX+x,0,width+side,0,sand.width);
        int srcY = (int)map(mouseY+y,0,height+side,0,sand.height);
        int dstX = (int)map(mouseX+x,0,width+side,0,fossil.width);
        int dstY = (int)map(mouseY+y,0,height+side,0,fossil.height);
        fossil.set(dstX, dstY, sand.get(srcX,srcY));
       }
     }
  }
}

请注意，我只是简单地循环复制一个正方形(在我的例子中为 40x40)，但您可以找到其他有趣的方法来循环并获得不同的效果。

玩得开心!