獲取在KineticJS中複製的所有東西

我在一個應用程序中使用kineticJS，該應用程序允許用戶在屏幕上繪製一些行，其信息保存在localStorage中，因此當用戶返回時可以恢復它們。獲取在KineticJS中複製的所有東西

問題是，我用什麼方法來存儲和恢復它們並不重要，每行總是繪製兩次，其中一個副本是某種「鬼線」（不是任何內部的動力學）。而這只是發生在Android系統的默認瀏覽器，並在web視圖，當我生成該應用程序的APK ...

至於存儲/恢復過程，我已經嘗試了兩種不同的技術途徑：

第一招：

//Store 
localStorage.setItem('stage', KineticStage.toJSON()); 

//Restore 
KineticStage = Kinetic.Node.create (localStorage.getItem('stage'), 'container');

第二個：

//Store 
var linesArray = []; 
KineticStage.find('.line').each(function(line){ 
    linesArray.push({ 'points':line.points(), 'color':line.getAttr('stroke') }); 
}); 

//Restore 
KineticStage = new Kinetic.Stage({container: 'container'}); 
KineticLayer = new Kinetic.Layer(); 
var savedStage = localStorage.getItem('stage'); 
for (var i=0; i<savedStage.length; i++){ 
    var newline = new Kinetic.Line({ 
     points: savedStage[i].points, 
     stroke: savedStage[i].color, 
     opacity : 0.5,    
    });  
    newline.on('mousedown touchstart', function(){ 
     this.remove(); 
     KineticLayer.draw(); 
    }); 
    KineticLayer.add(newline); 
} 
KineticStage.add(KineticLayer); 
KineticLayer.draw();

做「恢復」部分之前，我已經試過各種方法來清除動力學階段，像

if (KineticLayer != null){ 
    KineticLayer.destroyChildren(); 
    KineticLayer.clearCache(); 
    KineticLayer.clear(); 
    KineticLayer.destroy(); 
} 
if (KineticStage != null){ 
    KineticStage.destroyChildren(); 
    KineticStage.clearCache(); 
    KineticStage.clear(); 
    KineticStage.destroy(); 
}

用任何方法，我在屏幕上獲得「重複」行。很容易發現它們，因爲它們比最初繪製時的透明度要少得多，並且因爲當我嘗試刪除一行時（請參閱其中的.on（mousedown）方法），只會刪除其中的一行，剩下另一個，並且不能通過點擊來刪除它（當everyline應該附加該監聽器時）。

如果我嘗試像

console.log(KineticStage.find('.line'));

我只獲得了那些應該在屏幕上，而不是複製的。

而且KineticStage是我找到的唯一舞臺，如果我做

console.log(Kinetic.stages);

我真的失去了這個問題，我已經試過的方法多了很多，但我總是得到同樣的錯誤，當我比方說，只在Android默認瀏覽器和apk webView中。

我會很感激任何幫助！謝謝。

來源

2014-04-18 mei

這只是android的錯誤畫布。你可以使用一些黑客來避免這種行爲。例如，在插入到頁面後以小延遲繪製到畫布（圖層）。查看更多的信息有：http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

來源

2014-04-19 06:34:35 lavrton

這正是解決了這個問題！在向圖層添加形狀之前插入100ms的延遲。（所以我必須堅持我的「第二種方法」，因爲第一種方法一次創建場景）。非常感謝！ – mei

獲取在KineticJS中複製的所有東西

回答

相關問題