使用大畫布可以更快地滾動/平移？

Question

我的頁面基本上是一塊大畫布，上面有許多用線連接的小圖標，用戶需要能夠平移/縮放。 我已經完成所有工作，但是非常不穩定。 似乎是問題所在（如果我刪除圖標，它會變得非常順暢），但是如果我運行Chrome的分析器，則我的所有功能根本不會占用大量時間。

有沒有更好的平移方法，而不必重塗所有內容？ 例如，在WinAPI中，有一個功能可以滾動窗口內容，並且只會使剛滾動到視圖中的薄區域無效。 有什么辦法可以用Javascript / canvas做類似的事情，因為我真正需要的只是移動整個窗口？

我曾嘗試做它的一切，一個巨大的帆布彩塗，即再用scrollLeft / scrollTop的搬來搬去，但這需要太多的內存（還有什么我應該從4000x4000圖像預期），使代替變焦速度很慢。

如果有人感興趣的話，這是頁面，我希望代碼可讀性強：

http://poe.rivsoft.net/

Answer 1

您將不得不忍受一些較慢的部分。 考慮創建臟區。 這些是平移時需要重繪的區域。 使后緩沖區的大小與畫布相同。 將副本從后台緩沖區平移到其自身時，該區域將保持可見並將新可見的區域標記為臟區域。 然后，每幀僅將臟區重新渲染到后台緩沖區上。 對於縮放，您可以縮放后緩沖區，並在用戶暫停或漸進時重新渲染，這將在放大時創建像素化視圖（如google地圖），在縮小時將創建像素化別名和側面的臟區，直到您對其進行更新。

您還可以限制每幀重繪的臟區數量，以保持恆定的幀速率。 它看起來不太好，但是會改善平移和縮放。 在我的機器上，它運行良好（順便說一句，順便說一句），因此您可能要考慮僅在無法處理負載的機器上實施優化。

DrawNode函數，因為您有很多冗余代碼（尤其是在加載所有資產之后）， DrawNode還有很多優化空間

這只是一個建議，因為我不知道節點是否唯一，或者x，y坐標是否更改，但是也可以容納。 您有很多搜索和檢查應避免。 使用字符串而不是數字或布爾值來檢查狀態和類型也很慢。

  function DrawNode(ctx, node, x, y, active) {
      // Has this node got quick render information 
      if (node.qNode) {  
          // if so render the quick version
          var qn = node.qNode; // creating the var qn and then qn.? is quicker than access node.qNode.? 
          ctx.drawImage(qn.image, qn.coords.x, qn.coords.y, qn.coords.w, qn.coords.h, qn.x, qn.y, qn.size, qn.size);
          return;
      }
      var type = NodeTypes[node.type];
      var frameType = "frame" + (active ? "Active" : "Inactive");  // active should be a boolean
      if (type && type.size && node.type !== "jewel") { // should be !node.isJewel with isJewwl a boolean
          var spriteType = node.type;
          if (node.type !== "mastery") // Should be boolean
              spriteType += (active ? "Active" : "Inactive");
          var sprites = SkillTree.skillSprites[spriteType][3];
          var image = GetImage("Assets/" + sprites.filename);
          var coords = sprites.coords[node.icon];
          if (image && image.loaded && coords) {
              ctx.drawImage(image, coords.x, coords.y, coords.w, coords.h,
                  x - type.size * 0.5, y - type.size * 0.5, type.size, type.size);

              // add the information to quickly render the node next time. 
              // You may want to add sub objects for Mastery Active,inactive
              node.qNode = {
                  image : image,
                  coords : coords,
                  x : x - type.size * 0.5,
                  y : y - type - sise * 0.5,
                  size : type.size
              }

          } else if (!image || !image.loaded) {
              return false;
          }
      }
      // same deal for the other type.
  }

優化時，請從最慢的點開始，使該代碼盡可能高效，然后逐步解決。 這是寫得很好的代碼，但它並不追求速度，所以我想說代碼還有很多改進的余地。