大于屏幕绘图的处理中的导航栏

Question

我在 10000 像素宽 window 中移动透视时遇到问题，其中我每毫秒左右执行一次绘图，并且所有绘图都在 x 方向堆叠。我希望能够将屏幕上显示的透视图沿 x 轴移动到我想要的位置，以便我可以看到实时绘图。

我正在使用 Arduino 型板上的光传感器与 PDE 通信光照水平，我正在为读取的每个光实例绘制贝塞尔曲线，当光线昏暗时使贝塞尔曲线变宽, 强光下变窄

我正在尝试实现这种类型的导航栏：

    void setup()
{
  size(1800, 1800);
}

void draw()
{ int x_navigator = width / 2 - width / 6, y_navigator = 80, navigator_width = width / 3, navigator_height = 40;
  fill(204);
  rect(x_navigator, y_navigator, navigator_width, navigator_height);
  fill(250, 204, 0, 160);
  if (mouseX > x_navigator && mouseY > y_navigator && mouseX < x_navigator + navigator_width && mouseY < y_navigator + navigator_height)
  {
    if (mouseX < x_navigator + navigator_width / 12)
    {
      rect(x_navigator, y_navigator, navigator_width / 6, navigator_height);
    }
    else
    {
      if (mouseX > x_navigator + ((11 * navigator_width) / 12))
      {
        rect(x_navigator + (5 * navigator_width) / 6, y_navigator, navigator_width / 6, navigator_height);
      }
      else
      {
        rect(mouseX - (navigator_width / 12), y_navigator, navigator_width / 6, navigator_height);
      }
    }
  }
}

在我绘制贝塞尔曲线的代码中：

import processing.serial.*;

Serial Engduino;
String light_String = "", temperature_String = "";
int constant = 300;
float begin_x = 0, begin_y = 550, end_x, end_y, control = 1, light, temperature;

    void setup()
    {
      String portName = "COM3";
      Engduino = new Serial(this, portName, 9600);
      size(1000, 800);
      noFill();
      smooth();
      strokeWeight(3);
    }

    void draw()
    {
      if (Engduino.available() > 0) 
      {
        light_String = Engduino.readStringUntil('\n');
        try{light = parseFloat(light_String);}
        catch(NullPointerException e)
        {;}
        println("The light is: ");
        println(light);
        end_x = begin_x + (400 / (sqrt(light) + 1));
        end_y = begin_y - constant;
        control = end_x - begin_x;
        bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y);
        constant = constant * (-1);
        begin_x = end_x;
        begin_y = end_y;
      }
    }

同时使其具有将显示的图像移动到光标所在位置的功能，以便我可以实时查看绘图，如果需要，还可以检查之前绘制的曲线。

编辑：所以没有 Engduino 的代码是这样的：

int constant = 300;
float begin_x = 0, begin_y = 550, end_x, end_y, control = 1, light = 30; // Light is what I get through the serial port from the Engduino (an Arduino type board`)

void setup()
{
  size(10000, 800); // The 10000-pixel wide window.
  noFill();
  smooth();
  strokeWeight(3);
}

void draw()
{
    end_x = begin_x + (400 / (sqrt(light) + 1));
    end_y = begin_y - constant;
    control = end_x - begin_x;
    bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y);
    constant = constant * (-1);
    begin_x = end_x;
    begin_y = end_y;
}

我想要的是有一个我已经展示过的类型的导航栏（至少在设计中）可以在 10000 像素宽的范围内导航 window。我上传的导航条码只是导航的设计，没有任何功能，这就是我需要帮助的地方。

Answer 1

这会有点复杂，因为您的绘图是在多个帧上完成的。您并不是每帧都清除 canvas，而是随着时间的推移构建绘图。

如果您要清除 canvas 并重绘每一帧的所有内容（这是许多 Processing 草图所做的），那么您只需更改要绘制所有内容的位置的 X 值，或者在绘制其他所有内容之前简单地调用 translate() 函数。

但是由于您要在多个帧上绘制所有内容，因此您将不得不绘制到 PGraphics 缓冲区。然后在每一帧上，使用所需的任何 X 偏移绘制缓冲区。这是一个小例子：

int constant = 300;
float begin_x = 0, begin_y = 550, end_x, end_y, control = 1, light = 30; // Light is what I get through the serial port from the Engduino (an Arduino type board`)

PGraphics pg;

void setup()
{
  size(10000, 800); // The 10000-pixel wide window.
  pg = createGraphics(width, height);
}

void draw()
{

  end_x = begin_x + (400 / (sqrt(light) + 1));
  end_y = begin_y - constant;
  control = end_x - begin_x;

  pg.beginDraw();
  pg.noFill();
  pg.smooth();
  pg.strokeWeight(3);
  pg.bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y);
  pg.endDraw();

  constant = constant * (-1);
  begin_x = end_x;
  begin_y = end_y;

  background(200);
  image(pg, -mouseX, 0);
}

大于屏幕绘图的处理中的导航栏

Navigation bar in Processing for bigger than screen drawing

navigation

processing

drawing

real-time