添加元素後FabricJS畫布「卡住」

我使用fabric.js創建應用程序，並且遇到了非常奇怪的行爲。我使用常規的fabric.Canvas（不是fabric.StaticCanvas）添加圖像和文本實例，並且無法在添加後移動或調整這些項目的大小。我只添加了每種類型的幾個。其基本功能是包裹在拴在一些按鈕點擊事件的回調，但核心面料的功能看起來像這樣（簡化，但幾乎所有的東西是一樣的，只要面料相關的代碼）：添加元素後FabricJS畫布「卡住」

<canvas id="myCanvas" height=600 width=800></canvas> 
<input id="addStuff" type="button" value="Add!" /> 
.... 
var canvas = new fabric.Canvas('myCanvas'); 
canvas.renderOnAddition = true; 

$(function(){ 
    $('#addStuff').on('click', function(e) { 

     var text = new fabric.Text("Hello, world", { 
     top  : 100, 
     left  : 100, 
     fontSize : 12, 
     fontFamily : 'Delicious_500' 
     }); 
     text.hasControls = false; 

     canvas.add(text); 

     fabric.Image.fromURL('./img/pic.png', function(img) { 
     var imgX = img.set({ 
      top: 200, 
      left: 100, 
     }); 

     canvas.add(imgX); 
     }); 

     canvas.renderAll(); 
    }); 
});

上面的代碼很好地呈現了元素，但是它們不能被調整大小或移動，並且是靜態的。 奇怪的是，如果我打開和關閉我的chrome dev-panel（使用F12或[Ctrl/CMD] + SHIFT + I兩次），畫布重新獲得功能，並且所有內容都可以再次運行。我也有一些服務器端的東西在發生（這只是我正在做的一個模擬樣本），但我不知道如何進一步追蹤這種奇怪的行爲。我正在使用最新的代碼（由github repo構建）。思考？

來源

2012-06-19 sa125

畫布內部偏移可能沒有正確更新。頁面上的某些內容可能會更改尺寸/位置，使畫布位於與初始化期間不同的位置。嘗試在'renderAll'調用之後或在添加這些對象之後調用'canvas.calcOffset（）'。 – kangax

解決了！出於好奇 - 爲什麼不在'renderAll（）'裏面調用？請添加它作爲答案，這樣我就可以標記出來 - 謝謝！ – sa125

當然，補充說明。很高興幫助。 – kangax

畫布內部偏移可能沒有正確更新。頁面上的某些內容可能會更改尺寸/位置，使畫布位於與初始化期間不同的位置。嘗試在renderAll()調用後或在添加這些對象之後嘗試撥打canvas.calcOffset()。

原因calcOffset未被調用renderAll是出於性能原因。 renderAll是整個畫布的重繪。它每次都會在畫布上發生變化並且畫布需要重新繪製時發生。正如你可以想象的那樣，它經常被調用（有時每秒幾十次），並且每次重繪發生時計算新的偏移量都是非常浪費的。

還要考慮到在大多數情況下，畫布位置在整個頁面生命期間都不會改變。這很可能發生很少。主要在頁面加載期間。

在高度動態的環境中 - 畫布經常改變位置 - 您可以通過明確地調用calcOffset()來解決偏移「問題」。

來源

2012-06-24 17:46:11 kangax

我有同樣的問題，在kangax解決方案的基礎上，在極端極端的環境中，您可以強制它在發生渲染時隨時重新計算偏移量。

canvas.on('after:render', function(){ this.calcOffset(); });

來源

2014-08-09 14:45:13

添加元素後FabricJS畫布「卡住」

回答

相關問題