导航栏处理大于屏幕图

Question

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

我在Arduino型电路板上使用光传感器与PDE进行光级交流，并且我为每个光读取实例绘制了一条贝塞尔曲线，使得Bezier在光线暗淡时变宽，而当光线较强时则变窄。

我想实现这种类型的导航栏：

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; 
     } 
    } 

同时使它的功能，以将显示的图像移动到光标所在的位置，以便我可以实时看到图形，并检查前面的c如果我愿意的话，我会画出。

编辑：因此，如果没有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像素宽的窗口。我上传的导航条码只是导航的设计，没有功能，这是我想要一些帮助的地方。

Answer 1

因为您的绘图是在多个框架上完成的，所以这会有点复杂。你不是每一帧都清理画布，而是随着时间的推移绘制一幅画。

如果你清空画布和重绘一切每一帧（这是许多加工草图做），那么你可以简单地改变你在哪里画的一切的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); 
}