Processing:Примеры/Полоса прокрутки

Содержание

Среда разработки Processing

Справочник языка Processing

Библиотеки

Примеры

Режимы программирования

Перевод: Максим Кузьмин

Проверка/Оформление/Редактирование: Мякишев Е.А.

Описание

Перемещайте полосы прокрутки влево-вправо, чтобы менять позиции изображений.

Пример

HScrollbar hs1, hs2;  // две полосы прокрутки
PImage img1, img2;    // два изображения для загрузки

void setup() {
  size(640, 360);
  noStroke();
  
  hs1 = new HScrollbar(0, height/2-8, width, 16, 16);
  hs2 = new HScrollbar(0, height/2+8, width, 16, 16);
  
  // загружаем изображения:
  img1 = loadImage("seedTop.jpg");
  img2 = loadImage("seedBottom.jpg");
}

void draw() {
  background(255);
  
  // считываем позицию полосы прокрутки для «hs1»
  // и конвертируем ее в значение для показа изображения «img1»:
  float img1Pos = hs1.getPos()-width/2;
  fill(255);
  image(img1, width/2-img1.width/2 + img1Pos*1.5, 0);
  
  // считываем позицию полосы прокрутки для «hs2»
  // и конвертируем ее в значение для показа изображения «img2»:   
  float img2Pos = hs2.getPos()-width/2;
  fill(255);
  image(img2, width/2-img2.width/2 + img2Pos*1.5, height/2);
 
  hs1.update();
  hs2.update();
  hs1.display();
  hs2.display();
  
  stroke(0);
  line(0, height/2, width, height/2);
}


class HScrollbar {
  int swidth, sheight;    // ширина и высота полосы прокрутки
  float xpos, ypos;       // позиции X и Y полосы прокрутки
  float spos, newspos;    // позиция X ползунка
  float sposMin, sposMax; // максимальное и минимальное
                          // значения ползунка
  int loose;              // переменная для того, насколько свободно 
                          // будет двигаться ползунок
  boolean over;           // находится ли курсор над ползунком?
  boolean locked;
  float ratio;

  HScrollbar (float xp, float yp, int sw, int sh, int l) {
    swidth = sw;
    sheight = sh;
    int widthtoheight = sw - sh;
    ratio = (float)sw / (float)widthtoheight;
    xpos = xp;
    ypos = yp-sheight/2;
    spos = xpos + swidth/2 - sheight/2;
    newspos = spos;
    sposMin = xpos;
    sposMax = xpos + swidth - sheight;
    loose = l;
  }

  void update() {
    if (overEvent()) {
      over = true;
    } else {
      over = false;
    }
    if (mousePressed && over) {
      locked = true;
    }
    if (!mousePressed) {
      locked = false;
    }
    if (locked) {
      newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
    }
    if (abs(newspos - spos) > 1) {
      spos = spos + (newspos-spos)/loose;
    }
  }

  float constrain(float val, float minv, float maxv) {
    return min(max(val, minv), maxv);
  }

  boolean overEvent() {
    if (mouseX > xpos && mouseX < xpos+swidth &&
       mouseY > ypos && mouseY < ypos+sheight) {
      return true;
    } else {
      return false;
    }
  }

  void display() {
    noStroke();
    fill(204);
    rect(xpos, ypos, swidth, sheight);
    if (over || locked) {
      fill(0, 0, 0);
    } else {
      fill(102, 102, 102);
    }
    rect(spos, ypos, sheight, sheight);
  }

  float getPos() {
    // конвертируем «spos» в диапазон от «0»
    // до суммарной ширины полосы прокрутки:
    return spos * ratio;
  }
}