processing and controlP5 - 当 Size 设置为变量值时按钮损坏

Question

在下面的代码中，我试图创建 3 个按钮，其比例与显示的图像相同。出现的问题是，当鼠标悬停在按钮上时，按钮不会改变颜色，并且按钮按下事件不起作用。如果我将按钮的大小设置为固定值而不是变量值，则一切正常。有谁知道为什么会发生这种情况，或者我如何通过其他方式实现缩放？

这是我的代码：

import controlP5.*;

ControlP5 cp5;

int bg = color(255, 255, 255);

int bSX, bPY;

Button BrTP;

class playground extends Canvas {
  int c1 = color(105, 130, 157);
  int c2 = color(117, 144, 174);
  PImage img = loadImage("bg.png");
  
  void setup(PApplet a) {
    
  }
  
  void draw(PGraphics g) {
    g.image(img, 10, 10, img.width, img.height);
  }
}

void setup() {
  size(400, 400);
  noStroke();
  
  surface.setResizable(false);
  cp5 = new ControlP5(this);
  
  playground canv = new playground();
  canv.pre();
  surface.setSize(canv.img.width+20, canv.img.height+80);
  surface.setLocation((displayWidth - canv.img.width-20) / 2, (displayHeight - 65 - canv.img.height-80) / 2);
  cp5.addCanvas(canv);
  
  bSX = (canv.img.width - 20) / 3; // buttonSizeX
  bPY = canv.img.height + 20; // buttonPositionY
  
  BrTP = cp5.addButton("randomTP").setValue(0).setPosition(10, bPY).setSize(bSX, 50);
  cp5.addButton("safeTP").setPosition(20 + (canv.img.width - 20) / 3, canv.img.height + 20).setSize(bSX, 50);
  cp5.addButton("wait").setPosition(30 + 2 * (canv.img.width - 20) / 3, canv.img.height + 20).setSize(bSX, 50);
}

void draw() {}

public void controlEvent(ControlEvent e) {
  println(e.getController().getName());
}

public void randomTP(int val) {
  println("rTP:"+val);
}

结果如下所示：

Answer 1

我自己找到了一个修复程序，虽然我不明白它为什么有效。解决方案：在我的代码中，我将 window 大小更改两次：第一次在这里 size(400, 400);，第二次在这里 surface.setSize(canv.img.width+20, canv.img.height+80);。点击检测只会在size()设置的区域内起作用，因此如果按钮在边框上，则只有区域内的部分会起作用，如果完全在区域外则根本不起作用。

修复：

size(displayWidth, displayHeight);

编辑：出于某种原因我不能接受这个答案。说要等2天

processing and controlP5 - 当 Size 设置为变量值时按钮损坏

processing and controlP5 - Button broken when Size is set to value of variable

processing

control-p5