繪圖處理中抽搐的圖像

在此草圖中，它水平繪製一個對象列表。每個對象的x位置都依賴於其左側的對象。另外，當對象不在屏幕上時，它不會繪製。但是當我移動時，對象抽搐。我真的不知道爲什麼，這可能是因爲處理的加載圖片需要一些時間，所以會有一些延遲？我只用繪製矩形（rect（））測試了這個問題，並且問題沒有發生。繪圖處理中抽搐的圖像

Here is a gif of what's happening

下面是吸引了來自具有相同算法的網絡加載圖像的代碼：（可能需要一段時間的草圖加載，因爲它檢索從不同的網站的圖像）運行後草圖，使用左右箭頭鍵左右移動。使用向上和向下箭頭更改移動速度。

PImage backgroundImage; 
PFont font; 
int x = 0; 
int xoffset = 0; 
int deltax = 5; 
float scale = 512/30; 
float deltascale = 0.02; 
ArrayList<Object> ObjectList; 

class Object { 
    String name; 
    float diameter; 
    String unit; 
    String sprite; 
    PImage img; 
    int wid; 
    int hei; 
    int xpos; 

    Object(String Oname, float Odiameter, String Ounit, String Oimg) { 
    name = Oname; 
    diameter = Odiameter; 
    unit = Ounit; 
    img = loadImage(Oimg); 
    sprite = Oimg; 
    //img = loadImage(Oimg); 
    wid = img.width; 
    hei = img.height; 
    } 
} 

void setup() { 
    size(1500, 800); 
    frameRate(200); 
    fill(255,255,255); 
    textSize(32); 
    textAlign(CENTER, CENTER); 
    text("Images are loading (this may take a while)",700,400); 
    ObjectList = new ArrayList(); 
    readObjects(); 
} 

void addObject(String Aname, float Adiameter, String Aunit, String Aimg) { 
    ObjectList.add(new Object(Aname, Adiameter, Aunit, Aimg)); 
} 

void readObjects() { 
    addObject("RED", 30, "m", "https://s-media-cache-ak0.pinimg.com/736x/8f/1b/cc/8f1bcc72c81d1e9370597f7239ee476a.jpg"); 
    //addObject("ORANGE", 60, "m", "http://6iee.com/data/uploads/36/489075.jpg"); 
    addObject("YELLOW", 70, "m", "https://i.stack.imgur.com/aez1V.jpg"); 
    addObject("GREEN", 100, "m", "http://space-facts.com/wp-content/uploads/mars.jpg"); 
    addObject("PURPLE", 105, "m", "http://space-facts.com/wp-content/uploads/jupiter.png"); 
    addObject("PINK", 110, "m", "https://vignette1.wikia.nocookie.net/starwars/images/4/4a/Alderaan.jpg"); 
    addObject("BROWN", 150, "m", "https://cdn.pixabay.com/photo/2013/07/12/16/33/venus-151142_960_720.png"); 
    addObject("GRAY", 180, "m", "http://www.lpi.usra.edu/lpi_40th/images/1989/neptune.jpg"); 
    //addObject("WHITE", 200, "m", "http://www.clipartkid.com/images/19/log-in-sign-up-upload-clipart-Dpr48a-clipart.png"); 
    addObject("INDIGO", 300, "m", "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Sun_in_February.jpg/155px-Sun_in_February.jpg"); 
    addObject("SKYBLUE", 301, "m", "https://upload.wikimedia.org/wikipedia/commons/e/ea/Uranus_(Edited).jpg"); 
    addObject("BLUE", 1000, "m", "https://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg"); 
} 




void draw() { 

    fill(0,0,0); 
    rect(0, 0, 1500, 800); 

    int x = 0 + xoffset; 
    for (Object drawObject : ObjectList) { 
    float dia = drawObject.diameter; 

    if (x+drawObject.img.width >= 0 && x <= 1500) { 


     //checks if image is too small to be drawn 
     int drawWidth = int(scale * dia); 
     int drawHeight = int(drawWidth * drawObject.hei/drawObject.wid); 
     if (drawWidth > 0 && drawHeight > 0) { 
     drawObject.img.resize(drawWidth, drawHeight); 
     image(drawObject.img, x, 400-(drawObject.img.height/2)); 
     //calculates font size relative to object's current size 
     int textSize; 
     //checks if the name or diameter is longer, then uses the longer one for calculation 
     fill(255,255,255); 
     if (drawObject.name.length() < str(drawObject.diameter).length()) { 
      textSize = int(drawObject.img.width/str(drawObject.diameter).length()); 
     } else { 
      textSize = int(drawObject.img.width/drawObject.name.length()); 
     } 
     if (textSize > 0) { 
      textSize(textSize); 
      float texty = 418+(drawObject.img.height/2); 
      if (texty < (418+(drawObject.img.height/2))) { 
      texty = 418; 
      } 
      text(drawObject.name, x+(drawObject.img.width/2), texty); 
      text(drawObject.diameter+drawObject.unit, x+(drawObject.img.width/2), texty+textSize); 
     } 
     } 
     drawObject.xpos = x; 
     x += (drawObject.img.width*0.08 + drawObject.img.width); 
    } 
    //display deltax 
    textSize(32); 
    text(str(deltax), 1450, 10); 
    text(str(deltascale), 1450, 50); 

    println(str(scale)); 
    } 
} 

void mouseWheel(MouseEvent event) { 
    float e = event.getCount(); 
    if (e < 0) { 
    scale *= (1 + deltascale); 
    } else if (e > 0) { 
    scale *= (1 - deltascale) ; 
    } 
} 

void keyPressed() { 
    if (key == CODED) { 
    if (keyCode == LEFT) { 
     xoffset += deltax; 
    } else if (keyCode == RIGHT) { 
     xoffset -= deltax; 
    } else if (keyCode == UP) { 
     deltax += 5; 
    } else if (keyCode == DOWN) { 
     deltax -= 5; 
    } 
    } 
    if (key == 'r') { 
    //reloadObjects(); 
    } else if (key == 'q') { 
    deltascale += 0.02; 
    } else if (key == 'a') { 
    deltascale -= 0.02; 
    } 
    if (deltax < 0) { 
    deltax = 0; 
    } else if (deltascale < 0) { 
    deltascale = 0; 
    } 
}

下面的原代碼將無法工作，因爲它使用的是隻有我有圖片。

The original code

我希望有人能幫助我解決這個bug，或者幫助我提高我的算法。編輯：代碼現在可以驗證，並提出我遇到的問題

來源

2017-04-24 Xelasetah evets

請發表演示問題的[mcve]。就像你說的那樣，你發佈的代碼不會出現問題，所以調試起來會有點困難。此外，你真的應該嘗試格式化你的代碼 - Processing編輯器甚至會爲你做這件事。還有一件事：你真的不應該使用一個名爲'Object'的類，因爲已經有一個名爲'Object'的Java類，這是令人困惑的。 –

@KevinWorkman我已更新帖子，現在包含可驗證的示例，而不是展示該問題。 –

嗯，我注意到，圖像跳轉，只要你的圖像之一即將離開屏幕的左邊緣。它看起來像你可能會計算出不同的位置，因爲你的每個圖像都離開屏幕。嘗試擺脫您的if (x+drawObject.img.width >= 0 && x <= 1500)測試（暫時將其註銷），但請將代碼保留在if之內。

幾點：

絕對不創建自己的對象類（如凱文說工人）
img.resize()你重新採樣的圖像數據，這將導致質量差隨着時間的推移。將width, height參數用於image()函數（或使用scale()轉換函數 - 但這可能更令人困惑）將會更好。然後在其餘的繪圖代碼中使用drawWidth/Height而不是img.width/height。
如果要居中的圖像，只需使用imageMode(CENTER)，而不是自己做數學的 - 尤其是因爲它看起來像您使用的是「幻數」 400
儘量不要使用原號碼，您的屏幕尺寸 - 改爲使用全局變量 - 當您更改屏幕大小時，這會使您的生活更輕鬆。

來源

2017-04-26 02:48:25 PocketLogic

有趣的是，評論if語句有效！之前我有條件，因爲我不想處理繪製所有的對象，只有屏幕上的對象。將來如果我有很多對象，我應該保留還是刪除if語句？我一定會記住這些要點:) –

重要的if語句的一部分（保持繪圖穩定）是更改'x'值的部分：'x + =（drawObject.img .width * 0.08 + drawObject.img.width）;'如果你將這一行移動到'if'之外，你就可以避免抽搐，並保持優化。一般來說，您希望儘可能少地在繪圖函數內部的循環中進行操作，以保持幀速率。 – PocketLogic

將if語句加回去，同時讓x語句在其外面導致相同的抽搐，所以我嘗試使用圖像（img，a，b，c，d）並且它工作順利！謝謝！ –

繪圖處理中抽搐的圖像

回答

相關問題