当前位置： 文江博客话题详情

用箭头按钮创建滑块

发布于 2025-01-30 07:54:10 字数 1015 浏览 2 评论 0原文

如何从侧面创建一个带有两个箭头按钮的滑块？单击时，箭头/三角形应变白。每次单击箭头按钮时，滑块都应移动。

这是指向它应该外观的链接

所做的

int x=75;

void setup() {
  size(600,400);
}

void draw() {
  background(100);
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  
  if(mousePressed) {
  if (mouseX >75 && mouseX <= 475)
    {x=mouseX;}
    }

  fill(127,0,0);
  rect (x, 20, 9, 60); 
  fill (255);

fill (200);
  rect (10, 25, 50, 50);
{
  if (mousePressed == true) {
    fill(255);
  } else {
    fill(0);
  }
  
  triangle (50, 60, 50, 40, 15, 50);
}
  
  fill (200);
  rect (490, 25, 50, 50);
  
  {
  if (mousePressed == true) {
    fill(255);
  } else {
    fill(0);
  }
  
  triangle (500, 60, 500, 40, 535, 50);
}
  
  
  println(x);
  
}

，这是我到目前为止 我单击屏幕上的任何地方，我的问题是两个箭头变白。我需要它可以单独运行。每次我单击箭头按钮时，滑块都不会移动

原文

How can I create a slider with two arrow buttons from the side? The arrows/triangle should turn white when clicked. And the slider should move each time the arrow button is clicked.

a left arrow square gray button, a slider with a white handle and gray background and a right arrow square gray button on a black background

here's the link to what it should look like

and here's what I've done so far

int x=75;

void setup() {
  size(600,400);
}

void draw() {
  background(100);
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  
  if(mousePressed) {
  if (mouseX >75 && mouseX <= 475)
    {x=mouseX;}
    }

  fill(127,0,0);
  rect (x, 20, 9, 60); 
  fill (255);

fill (200);
  rect (10, 25, 50, 50);
{
  if (mousePressed == true) {
    fill(255);
  } else {
    fill(0);
  }
  
  triangle (50, 60, 50, 40, 15, 50);
}
  
  fill (200);
  rect (490, 25, 50, 50);
  
  {
  if (mousePressed == true) {
    fill(255);
  } else {
    fill(0);
  }
  
  triangle (500, 60, 500, 40, 535, 50);
}
  
  
  println(x);
  
}

When I click anywhere on the screen, my problem is that both arrows turn white. I need it to individually function. And the slider is not moving every time I click the arrow buttons

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

薄暮涼年 2025-02-06 07:54:11

解决此问题的以下方法使用了4个不同的类：forwardarrow，backarrow，slider和valuefield。箭头填充颜色由其各自类的Press（）方法控制。

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);

ForwardArrow _fwdArrw;
BackArrow _backArrw;
ValueField _valueFld;
Slider _slider;

final int _sliderX = 90;
final int _sliderY = 40;
final int _sliderW = 200;
final int _sliderH = 30;

final int _txtSize = 22;

final int _initValue = 40;
final int _maxValue = 200;
final int _minValue = 0;

int value = _initValue;

class ValueField {
  float x, y, w, h;
  String title;
  color fldColor;
  color txtColor;

  // Constructor
  ValueField(int xpos, int ypos, float wt, float ht, String valueStr, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    title = valueStr;
    fldColor = background;
    txtColor = foreground;
  }

  void display(int val) {
    // **** Value Field **** //
    fill(fldColor); // erase old value
    rect(x, y, w, h);
    fill(txtColor); // text color
    textSize(_txtSize);
    textAlign(CENTER);
    text(str(val), x, y, w, h);
    // **** Slider bar **** //
    fill(255);
    rect(_sliderX, _sliderY, _sliderW*val/_maxValue, _sliderH);
  }
}

class ForwardArrow {
  float x, y, w, h;
  color arrwColor;
  // Constructor
  ForwardArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor); // arrow color
    noStroke();
    triangle(x, y, x, y + h, x + w, y + h/2 );
  }

  void press() {
    fill(255); // arrow color
    noStroke();
    triangle(x, y, x, y + h, x + w, y + h/2 );
  }
}

class BackArrow {
  float x, y, w, h;
  color arrwColor;

  // Constructor
  BackArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor);
    noStroke();
    triangle(x, y + h/2, x + w, y, x + w, y + h );
  }

  void press() {
    fill(255);
    noStroke();
    triangle(x, y + h/2, x + w, y, x + w, y + h );
  }
}

class Slider {
  float x, y, w, h;
  color barColor;
  color trimColor;

  // Constructor
  Slider(int xpos, int ypos, float wt, float ht, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    barColor = background;
    trimColor = foreground;
  }

  void display() {
    stroke(0);
    strokeWeight(1);
    noFill();
    rect(x, y, w, h);
  }
}

void setup() {
  size(500, 250);
  background(BLUE);
  _slider = new Slider(_sliderX, _sliderY, _sliderW, _sliderH, WHITE, BLACK);
  _backArrw = new BackArrow(50, 40, 30, 30, GREEN);
  _fwdArrw = new ForwardArrow(300, 40, 30, 30, GREEN);
  _valueFld = new ValueField(380, 40, 60, 30, str(_initValue), WHITE, BLACK);
}

void draw() {
  background(BLUE);
  _valueFld.display(value);
  _fwdArrw.display();
  _backArrw.display();
  _slider.display();

  // FwdArrw Long Press
  if ((mouseX >= _fwdArrw.x) && (mouseX <= _fwdArrw.x + _fwdArrw.w) && (mouseY >= _fwdArrw.y) && (mouseY <= _fwdArrw.y + _fwdArrw.h)) {
    if (mousePressed == true) {
      _fwdArrw.press();
      value++;
      if (value > _maxValue) {
        value = _maxValue;
      }
      _valueFld.display(value);
    }
  }
  // BackArrw Long Press
  if ((mouseX >= _backArrw.x) && (mouseX <= _backArrw.x + _backArrw.w) && (mouseY >= _backArrw.y) && (mouseY <= _backArrw.y + _backArrw.h)) {
    if (mousePressed == true) {
      _backArrw.press();
      value--;
      if (value < _minValue) {
        value = _minValue;
      }
      _valueFld.display(value);
    }
  }
}

您的代码进行修订；

int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  fill (200);
  rect (75, 25, 400, 50); // slider bar
  stroke(0);

  fill(127, 0, 0);
  rect (x, 20, 9, 60); // slider thumb

  fill (200);
  rect (10, 25, 50, 50);  // back arrow
  fill(0);
  triangle (50, 60, 50, 40, 15, 50);
  if ((mouseX >= 10) && (mouseX <= 10 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
    if (mousePressed == true) {
      fill(255);
      triangle (50, 60, 50, 40, 15, 50);
      x--;
      if (x<75) {
        x = 75;  // minValue
      }
    } else {
      fill(0);
      triangle (50, 60, 50, 40, 15, 50);
    }
  }

  fill (200);
  rect (490, 25, 50, 50); //forward arrow
  fill(0);
  triangle (500, 60, 500, 40, 535, 50);
  if ((mouseX >= 490) && (mouseX <= 490 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
    if (mousePressed == true) {
      fill(255);
      triangle (500, 60, 500, 40, 535, 50);
      x++;
      if (x>466) {
        x = 466; // maxValue
      }
    } else {
      fill(0);
      triangle (500, 60, 500, 40, 535, 50);
    }
  }
}

The following approach to this problem uses 4 different classes: ForwardArrow, BackArrow, Slider, and ValueField. Arrow fill color is controlled by the press() method of its respective class.

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);

ForwardArrow _fwdArrw;
BackArrow _backArrw;
ValueField _valueFld;
Slider _slider;

final int _sliderX = 90;
final int _sliderY = 40;
final int _sliderW = 200;
final int _sliderH = 30;

final int _txtSize = 22;

final int _initValue = 40;
final int _maxValue = 200;
final int _minValue = 0;

int value = _initValue;

class ValueField {
  float x, y, w, h;
  String title;
  color fldColor;
  color txtColor;

  // Constructor
  ValueField(int xpos, int ypos, float wt, float ht, String valueStr, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    title = valueStr;
    fldColor = background;
    txtColor = foreground;
  }

  void display(int val) {
    // **** Value Field **** //
    fill(fldColor); // erase old value
    rect(x, y, w, h);
    fill(txtColor); // text color
    textSize(_txtSize);
    textAlign(CENTER);
    text(str(val), x, y, w, h);
    // **** Slider bar **** //
    fill(255);
    rect(_sliderX, _sliderY, _sliderW*val/_maxValue, _sliderH);
  }
}

class ForwardArrow {
  float x, y, w, h;
  color arrwColor;
  // Constructor
  ForwardArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor); // arrow color
    noStroke();
    triangle(x, y, x, y + h, x + w, y + h/2 );
  }

  void press() {
    fill(255); // arrow color
    noStroke();
    triangle(x, y, x, y + h, x + w, y + h/2 );
  }
}

class BackArrow {
  float x, y, w, h;
  color arrwColor;

  // Constructor
  BackArrow(int xpos, int ypos, float wt, float ht, color background) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    arrwColor = background;
  }

  void display() {
    fill(arrwColor);
    noStroke();
    triangle(x, y + h/2, x + w, y, x + w, y + h );
  }

  void press() {
    fill(255);
    noStroke();
    triangle(x, y + h/2, x + w, y, x + w, y + h );
  }
}

class Slider {
  float x, y, w, h;
  color barColor;
  color trimColor;

  // Constructor
  Slider(int xpos, int ypos, float wt, float ht, color background, color foreground) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    barColor = background;
    trimColor = foreground;
  }

  void display() {
    stroke(0);
    strokeWeight(1);
    noFill();
    rect(x, y, w, h);
  }
}

void setup() {
  size(500, 250);
  background(BLUE);
  _slider = new Slider(_sliderX, _sliderY, _sliderW, _sliderH, WHITE, BLACK);
  _backArrw = new BackArrow(50, 40, 30, 30, GREEN);
  _fwdArrw = new ForwardArrow(300, 40, 30, 30, GREEN);
  _valueFld = new ValueField(380, 40, 60, 30, str(_initValue), WHITE, BLACK);
}

void draw() {
  background(BLUE);
  _valueFld.display(value);
  _fwdArrw.display();
  _backArrw.display();
  _slider.display();

  // FwdArrw Long Press
  if ((mouseX >= _fwdArrw.x) && (mouseX <= _fwdArrw.x + _fwdArrw.w) && (mouseY >= _fwdArrw.y) && (mouseY <= _fwdArrw.y + _fwdArrw.h)) {
    if (mousePressed == true) {
      _fwdArrw.press();
      value++;
      if (value > _maxValue) {
        value = _maxValue;
      }
      _valueFld.display(value);
    }
  }
  // BackArrw Long Press
  if ((mouseX >= _backArrw.x) && (mouseX <= _backArrw.x + _backArrw.w) && (mouseY >= _backArrw.y) && (mouseY <= _backArrw.y + _backArrw.h)) {
    if (mousePressed == true) {
      _backArrw.press();
      value--;
      if (value < _minValue) {
        value = _minValue;
      }
      _valueFld.display(value);
    }
  }
}

A revision of your code follows;

int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  fill (200);
  rect (75, 25, 400, 50); // slider bar
  stroke(0);

  fill(127, 0, 0);
  rect (x, 20, 9, 60); // slider thumb

  fill (200);
  rect (10, 25, 50, 50);  // back arrow
  fill(0);
  triangle (50, 60, 50, 40, 15, 50);
  if ((mouseX >= 10) && (mouseX <= 10 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
    if (mousePressed == true) {
      fill(255);
      triangle (50, 60, 50, 40, 15, 50);
      x--;
      if (x<75) {
        x = 75;  // minValue
      }
    } else {
      fill(0);
      triangle (50, 60, 50, 40, 15, 50);
    }
  }

  fill (200);
  rect (490, 25, 50, 50); //forward arrow
  fill(0);
  triangle (500, 60, 500, 40, 535, 50);
  if ((mouseX >= 490) && (mouseX <= 490 + 50) && (mouseY >= 25) && (mouseY <= 25 + 50) ) {
    if (mousePressed == true) {
      fill(255);
      triangle (500, 60, 500, 40, 535, 50);
      x++;
      if (x>466) {
        x = 466; // maxValue
      }
    } else {
      fill(0);
      triangle (500, 60, 500, 40, 535, 50);
    }
  }
}
回复 原文
静谧幽蓝 2025-02-06 07:54:11

您有部分滑块/跟踪栏的逻辑权利，因此仅在范围内更改x。这仅在此阶段水平发生，但是您也可以使用相同的逻辑来检查水平限制。同样，您可以检查光标是否在任何矩形的边界内（无论是滑块还是一个按钮）：


int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  
  // slider
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  if (mousePressed) {
    if (mouseX >75 && mouseX <= 475)
    {
      x=mouseX;
    }
  }

  fill(127, 0, 0);
  rect (x, 20, 9, 60); 
  fill (255);

  // left arrow button
  fill (200);
  rect (10, 25, 50, 50);
  fill(0);
  if (mousePressed == true) {
    if (mouseX > 10 && mouseX <= 10 + 50 && mouseY > 25 && mouseY <= 25 + 50){
      fill(255);  
    }
  }
  triangle (50, 60, 50, 40, 15, 50);

  // right arrow button
  fill (200);
  rect (490, 25, 50, 50);
  fill(0);
  if (mousePressed == true) {
    if (mouseX > 490 && mouseX <= 490 + 50 && mouseY > 25 && mouseY <= 25 + 50){
      fill(255);  
    }
  }
  triangle (500, 60, 500, 40, 535, 50);


  println(x);
}

如果您可以采用该逻辑，而不是复制/粘贴不同的x，y，那不是很好，宽度，相同4个语句的高度参数您可以将功能分组为可重复使用的代码块？

那是什么功能。您已经已经使用了它们（定义 setup（）/draw（），呼叫 背景（）/fill（）/

等已经提供了布尔值重叠（int x，int y，int width，int height）函数，非常适合您尝试实现：传递x，y 获取布尔值。

，宽度，高度或一个按钮，并使用repret Rect（）

int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  
  // slider
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  if (mousePressed) {
    if (mouseX >75 && mouseX <= 475)
    {
      x=mouseX;
    }
  }

  fill(127, 0, 0);
  rect (x, 20, 9, 60); 
  fill (255);

  // left arrow button
  fill (200);
  rect (10, 25, 50, 50);
  fill(0);
  if (mousePressed && overRect(10, 25, 50, 50)) {
    fill(255);  
    x--;
  }
  triangle (50, 60, 50, 40, 15, 50);

  // right arrow button
  fill (200);
  rect (490, 25, 50, 50);
  fill(0);
  if (mousePressed && overRect(490, 25, 50, 50)){
      fill(255);
      x++;
  }
  triangle (500, 60, 500, 40, 535, 50);

  // ensure x remains within the slide limits
  x = constrain(x, 75, 475);
  println(x);
}

boolean overRect(int x, int y, int width, int height)  {
  if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

You've got part of the logic right for the slider/trackbar so it changes x only within a range. This happens horizontally only at this stage, but you can use the same logic to check horizontal limits as well. Similarly, you can check if the cursor is within the bounds of any rectangle (be it the slider or either of the buttons):


int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  
  // slider
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  if (mousePressed) {
    if (mouseX >75 && mouseX <= 475)
    {
      x=mouseX;
    }
  }

  fill(127, 0, 0);
  rect (x, 20, 9, 60); 
  fill (255);

  // left arrow button
  fill (200);
  rect (10, 25, 50, 50);
  fill(0);
  if (mousePressed == true) {
    if (mouseX > 10 && mouseX <= 10 + 50 && mouseY > 25 && mouseY <= 25 + 50){
      fill(255);  
    }
  }
  triangle (50, 60, 50, 40, 15, 50);

  // right arrow button
  fill (200);
  rect (490, 25, 50, 50);
  fill(0);
  if (mousePressed == true) {
    if (mouseX > 490 && mouseX <= 490 + 50 && mouseY > 25 && mouseY <= 25 + 50){
      fill(255);  
    }
  }
  triangle (500, 60, 500, 40, 535, 50);


  println(x);
}

Wouldn't it be nice if you could take that logic and instead of copy/pasting the different x,y,width,height parameters for the same 4 statements you could group that functionality in a reusable block of code ?

That what functions are for. You're already using them already (defining setup()/draw(), calling background()/fill()/etc.

The Processing Button example already provides the boolean overRect(int x, int y, int width, int height) function which is perfect for you're trying to achieve: pass in the x,y,width,height or a button and get back boolean value.

Here's your code using the overRect():

int x=75;

void setup() {
  size(600, 400);
}

void draw() {
  background(100);
  
  // slider
  fill (200);
  rect (75, 25, 400, 50);
  stroke(0);
  if (mousePressed) {
    if (mouseX >75 && mouseX <= 475)
    {
      x=mouseX;
    }
  }

  fill(127, 0, 0);
  rect (x, 20, 9, 60); 
  fill (255);

  // left arrow button
  fill (200);
  rect (10, 25, 50, 50);
  fill(0);
  if (mousePressed && overRect(10, 25, 50, 50)) {
    fill(255);  
    x--;
  }
  triangle (50, 60, 50, 40, 15, 50);

  // right arrow button
  fill (200);
  rect (490, 25, 50, 50);
  fill(0);
  if (mousePressed && overRect(490, 25, 50, 50)){
      fill(255);
      x++;
  }
  triangle (500, 60, 500, 40, 535, 50);

  // ensure x remains within the slide limits
  x = constrain(x, 75, 475);
  println(x);
}

boolean overRect(int x, int y, int width, int height)  {
  if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
回复 原文
~没有更多了~

关于作者

随梦而飞#

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

达拉崩吧

文章 0 评论 0

PANGOO

文章 0 评论 0

kkgtx

文章 0 评论 0

WordPress小学生

文章 0 评论 0

酷炫老祖宗

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文