处理 - 指定鼠标点击图像按钮的确切位置答案

【问题标题】：Processing - Specifying exact locations for mouseclicks on image-buttons处理 - 指定鼠标点击图像按钮的确切位置
【发布时间】：2021-08-17 08:02:18
【问题描述】：

我的 LED 环有 4 个不同的区域，我上传了 4 个图像按钮来选择它们。我希望能够准确地单击对象，但它会单击矩形区域。所以我的问题是，

有没有办法指定鼠标点击图像的确切位置？

我试图在截图中解释：

这是我的代码：

import controlP5.*; //import ControlP5 library
import processing.serial.*;


PFont font;
PFont font2;
PImage img1, img2, img3, img4;

Accordion accordion;
color c = color(0, 160, 100);

// Arduino serial port
Serial port;

// GUI variables
ControlP5 cp5; //create ControlP5 object
ColorPicker cp;

void setup() { //Same as setup in arduino

  img1 = loadImage("t1.png");
  img2 = loadImage("t2.png");
  img3 = loadImage("t3.png");
  img4 = loadImage("t4.png");
  

  size(750, 500);                          //Window size, (width, height)
  try {
    port = new Serial(this, "COM3", 9600);   //Change this to your port
    // buffer until new line: this plugs in nicely with serialEvent()
    port.bufferUntil('\n');
  }catch(Exception e) {
    println("error opening serial");
    e.printStackTrace();
  }
  
  cp5 = new ControlP5(this);

  font = createFont ("Georgia Bold", 13);
  font2 = createFont ("Georgia Bold", 15);

  Group SetupGroup = cp5.addGroup("SETUP")
    .setPosition(90,100)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);
    background(0); //For transparency
    noStroke();
  ;

  Group AreaRingGroup = cp5.addGroup("RINGS_AREAS")
    .setPosition(30,50)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2)
    .moveTo(SetupGroup);
    background(0);
    noStroke();
    ;
    
    cp5.addButton("AREA_1")  // The button
    .setImage(img1)
    .setPosition(-16,10)     // x and y relative to the group
    .setSize(150,150)
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_2")  // The button
    .setImage(img2)
    .setPosition(-15,170)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ; 
  
    cp5.addButton("AREA_3")  // The button
    .setImage(img3)
    .setPosition(150,184)     // x and y relative to the group
    .updateSize()
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_4")  // The button
    .setImage(img4)
    .setPosition(148,13)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ;

void AREA_1(){
  println("Ring_1 & AREA_1");
  if (port != null){ 
      port.write("a\n");
      port.write("1\n");
  }    
}
.
.
.
.

【问题讨论】：

标签： processing control-p5

【解决方案1】：

我认为没有办法使用 ControlP5 指定非矩形按钮形状。

但您仍然可以访问按钮处理程序中的mouseX 和mouseY 属性。在您的情况下，由于您要检测的形状是弧形，您可以从 LED 环的中心测量鼠标点的 distance。如果距离大于内圆半径小于外圆半径，可以注册为点击图片中的圆弧。

对于非圆形图像，您可以尝试在鼠标点处获取pixel color，看看它是否与背景颜色匹配（未命中）或不匹配（命中）。您可能需要为此创建一个单独的、屏幕外的图像，并具有更明显的色差，以使其更可靠。

【讨论】：