如何在 Processing w/ cp5 中用图像屏蔽文本框

Question

在我的代码中，我想将 warning_img 覆盖在我创建的 alert_box 上，但是使用掩码函数会产生错误，因为 alert_box 不是图像并且需要保留为文本框，因为稍后将对其进行编辑以产生变化输出。

void create_alert_box(){
  alert = menu.addGroup("alert")
    .setPosition(100,120)
    .setSize(1400,120)
    .setBackgroundColor(color(230,50,51))
    .hideBar();
  alert_label = menu.addTextlabel("alert_label")
    .setText("ALERT!")
    .setFont(createFont("Arial",40))
    .setPosition(650, 40)
    .setSize(200,100)
    .moveTo(alert);  
  warning_img.resize(0,100);
  alert.mask(warning_img);
}

这是我定义一切的地方：

import controlP5.*; //imports GUI library
import processing.serial.*;

//Serial port;

ControlP5 menu; //creates Controlp5 object for the menu
ControlGroup altitude;
Textlabel altitude_label;
ControlGroup date_and_time;
Textlabel date_and_time_label;
ControlGroup CO2emissions;
ControlGroup plane;
Textlabel CO2emissions_label;
ControlGroup alert;
Textlabel alert_label;
PImage plane_img;
PImage warning_img;
PFont font;

void setup(){ // has to be the same as transmitter's setup module in order to respond to physical changes
  size(1600,960);
  //port = new Serial(this, "COM3", 9600); // com3 port is used for the computer's port
  background(255,255,255);
  menu = new ControlP5(this);
  create_altitude_box();
  PFont font = createFont("Arial", 100, true);
  plane_img = loadImage("plane.jpg");
  warning_img = loadImage("warning.png");
  create_CO2emissions_box();
  create_date_and_time_box();
  create_alert_box();
}

尽管尝试了遮罩方法，但图像在框后面，并且在线没有任何方法可以遮罩cp5中文本框顶部的图像。

Answer 1

如果您愿意让警告栏可见，则以下代码将在警告框上绘制警告图像。请注意，.hideBar() 已删除并添加了 draw()。当按下警告栏时，图像变得可见。

import controlP5.*; 

ControlP5 menu; //creates Controlp5 object for the menu
ControlGroup alert;
Textlabel alert_label;
PImage warning_img;

void create_alert_box(){
  alert = menu.addGroup("alert")
    .setPosition(100,120)
    .setSize(1400,120)
    .setBackgroundColor(color(230,50,51));
   // .hideBar();
  alert_label = menu.addTextlabel("alert_label")
    .setText("ALERT!")
    .setFont(createFont("Arial",40))
    .setPosition(650, 40)
    .setSize(200,100)
    .moveTo(alert);   
}

void setup() { 
  size(1600,960);
  background(255,255,255);
  menu = new ControlP5(this);
  warning_img = loadImage("warning.png");
  warning_img.resize(0,100);
  create_alert_box();
}

void draw() {
  image(warning_img, 180, 130);
}

替代方法：

我不确定您是否需要一个遮罩以及在 TextLabel 上设置图像的能力。 TextLabel 有一个 .setImage() 方法，但未实现。另一种方法是使用 cp5 画布类并使用多个实例来更改消息字符串。此类很容易接受图像并可能满足您的要求。以下是这种方法的简短演示：

import controlP5.*;

PImage warning_img;
ControlP5 cp5;
MyCanvas canvas1;
MyCanvas canvas2;

class MyCanvas extends Canvas {
  String myStr;

  MyCanvas(String inStr) {
    myStr = inStr;
  }

  void draw(PGraphics pg) {
    pg.fill(109);
    pg.rect(0, 0, width, 130);
    pg.fill(255);
    pg.textSize(32);
    pg.image(warning_img, 20, 20);
    pg.text(myStr, 240, 80);
  }
}

void setup() {
  size(1400, 400);
  background(0);
  warning_img = loadImage("warning.png");
  warning_img.resize(0, 100);
  cp5 = new ControlP5(this);
  canvas1 = new MyCanvas("This text is drawn by MyCanvas and can be changed (click me).");
  canvas2 = new MyCanvas("Alert Message");
  cp5.addCanvas(canvas1);
}

void draw() {
}

void mousePressed() {
  cp5.addCanvas(canvas2);
}