如何在processing.js中创建一个滑块?

时间:2014-03-19 12:07:08

标签: javascript processing

我有一个程序:

 noStroke();
fill(0, 255, 162);
var ft = 10;
//Change the diameter
var CSize = 100;
var R = CSize / 2;
var D = CSize;
var C = D * PI / ft;
var A = PI * R * R / ft;
var SimonArea = C * A / D * 2 / ft;
ellipse(200 - CSize / 2,200 - CSize / 2,CSize,CSize);
fill(13, 0, 255);
textSize(20);
text("Circumference = "+C,0,392);
text("Area of Circle = "+A,6,365);
text("1 foot = 10 pixels",19,33);
text("Random numbers associated with the circle =",3,314);
text(SimonArea,3,344);

但我无法弄清楚如何制作一个可用于更改变量CSize的滑块。我需要它,所以我可以在程序中更改变量CSize。它应该找到圆的圆周和面积。我真的不在乎加载程序需要多长时间。滑块的范围应为0到200。

1 个答案:

答案 0 :(得分:0)

您可以找到一些适合您的GUI库。我目前正在使用您可以在此处找到的课程小工具:http://www.openprocessing.org/sketch/115256

要绘制一个简单的滑块,您可以将此类复制到您的类,并使用以下几行绘制:

Slider slider;
var CSize = 20f;

void setup(){
  size(200,200);
  slider = new Slider("name", CSize, 0f, 200f, 10, 50, 150, 20, HORIZONTAL);
}
void draw(){
  background(80);
  slider.display();
}

void mouseDragged(){
  slider.mouseDragged();
  CSize = slider.val;
  println("valor: " + CSize);
}

void mouseReleased(){
  slider.mouseReleased();
  CSize = slider.val;
  println("valor: " + CSize);
}

P.S。:如果你想使用类Widget,请确保你复制了四行,其上面有常量。