Question

我在一个应用程序中使用kineticJS，允许用户在屏幕上绘制一些行，其信息保存在localStorage中，因此当用户返回时可以恢复它们。

问题在于我使用哪种方法来存储和恢复它们并不重要，每条线总是绘制两次，其中一个副本是某种“鬼线”（不在Kinetic里面的任何地方）。这只发生在Android的默认浏览器中，当我为此应用程序生成apk时在webView中发生...

至于存储/恢复程序，我尝试了两种不同的方法：

第一个：

//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();

在做“恢复”部分之前，我已经尝试了一切来清除Kinetic阶段，比如

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

使用任何方法，我在屏幕上获得“重复”行。很容易发现它们，因为它们变得比它们刚刚绘制时更少的透明度，并且因为当我尝试删除一行（参见它们中的.on（mousedown）方法）时，只删除其中一行，剩下的另一个，并且无法通过单击删除它（当每行应该附加该侦听器时）。

如果我尝试类似

的话

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

我只获得屏幕中应该存在的那些，而不是重复的那些。

如果我做的话，KineticStage是我找到的唯一阶段

console.log(Kinetic.stages);

我真的迷失了这个问题，我尝试了很多方法，但我总是得到相同的bug，正如我所说，只有在Android默认浏览器和apk webView中。

我将非常感谢任何帮助！感谢。

Answer 1

这只是android的错误画布。你可以使用一些黑客来避免这种行为。例如，在将其插入页面后以较小的延迟绘制到画布（图层）。在那里查看更多信息：http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

在KineticJS中复制所有内容

1 个答案: