導航欄處理大於屏幕圖

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