java - 处理 - 放大单击的区域，然后再次单击以缩小回来

Question

我有一张图片，然后使用手电筒类型的光来仅显示鼠标悬停的位置。这部分代码有效，但现在我想使用 if/else 语句放大所选区域，然后再次单击以缩小。任何其他放大特定区域然后退出该区域的方法也有帮助。真的任何帮助将不胜感激!

PImage ispy;

void setup () {
  size(1024,768); 
  ispy = loadImage("ispy2.jpeg");
}

void draw () { 
  loadPixels(); 
  ispy.loadPixels(); 
  for (int x = 0; x < width; x++) { 
    for (int y = 0; y < height; y++) {
      int loc = x+y*width;
      float r = red(ispy.pixels[loc]); 
      float g = green(ispy.pixels[loc]);
      float b = blue(ispy.pixels[loc]);
      float d = dist(mouseX, mouseY, x, y); //

      float factor = map(d, 0, 200, 2, 0); 
      pixels[loc] = color(r*factor, g*factor, b*factor); 
    }
  }
  updatePixels();
}

Answer 1

这是我对你所说内容的解释。我们存储一个 isClicked boolean 值来存储是否应该放大的状态。当我们要绘制图像时，我们translate()到鼠标，然后我们scale()，然后我们translate()返回与我们之前移动的量相同，但方向相反。它的作用是围绕鼠标位置进行缩放变换。

有一件事我找不到解决直接从图像和手电筒效果更新像素的方法。该程序正在执行的操作是使用您的方法制作 mask 图像并将其应用到 PGraphics 对象。我注意到的另一件事是，当直接渲染到屏幕时，缩放会出现相当大的滞后。相反，我已将绘图移至 PGraphics 对象。这提高了性能。

最后，为了进行渲染，程序在 PGraphics 对象上绘制所有内容，然后将 mask 应用于该对象以获得手电筒效果。

这是我的代码:

PImage ispy, distMask;
boolean isClicked = false;
PGraphics renderer;

void createDistanceMask(PImage distMask){ //Takes image and changes its pixels to "alpha" for the PGraphics renderer
  distMask.loadPixels(); 
  for (int x = 0; x < width; x++) { 
    for (int y = 0; y < height; y++) {
      int loc = x+(height-y-1)*width;
      float d = dist(mouseX, mouseY, x, y); //

      int factor = int(map(d, 0, 200, 400, 0)); //Pixel data will be between 0 and 255, must scale down later.
      if (factor > 255)
          factor = 255;
      distMask.pixels[loc] = color(factor,factor,factor);
    }
  }
  distMask.updatePixels();
}


void setup () {
  size(1024,768, P2D); 
  ispy = loadImage("ispy2.jpeg");
  distMask = new PImage(width,height);
  renderer = createGraphics(width,height,P2D);
  mouseX = width/2; //Not necessary, but will have black screen until mouse is moved
  mouseY = height/2;
}

void draw () {
  background(0);
  pushMatrix();

  createDistanceMask(distMask);

  renderer.beginDraw(); //Starts processing stuff into PGraphics object
  renderer.background(0);
  if(isClicked){ //This is to get the zoom effect
      renderer.translate(mouseX, mouseY);
      renderer.scale(2);
      renderer.translate(-mouseX, -mouseY);
  }
  renderer.image(ispy,0,0); //Render Image
  renderer.endDraw();
  renderer.mask(distMask); //Apply Distance mask for flashlight effect
  image(renderer,0,0); //Draw renderer result to screen

  popMatrix();
}

void mouseClicked(){
    isClicked = !isClicked;
}

在我的评论中，我询问了如何将屏幕移动到鼠标，这就是它正在做的事情。如果您想将屏幕“卡住”在一个位置，您可以做的就是存储一个 lastMouseClickPosition PVector 或仅存储整数。然后，平移的时候，平移到位置而不是PVector。

以下是要更改的代码:

PVector lastClickPos = new PVector(); //Make the position

if(isClicked){ //When Rendering
      renderer.translate(lastClickPos.x, lastClickPos.y);
      renderer.scale(scalingFactor);
      renderer.translate(-lastClickPos.x, -lastClickPos.y);
  }

void mouseClicked(){ //At the bottom
    isClicked = !isClicked;
    lastClickPos.set(mouseX, mouseY);
}