kinetic.js加載階段...失去的基準

我在理解 Kinetic.Node.create（myJson，'container'）函數是如何工作的問題。kinetic.js加載階段...失去的基準

我有一個簡單的項目。生成一個circleLayer並添加一個圓。現在我可以通過circleLayer.removeChildren（）; 但是，當我將舞臺保存到JSON並重新加載時，對圓的引用得到了洛杉磯...現在我無法刪除它... 這是我的代碼。

有沒有人有想法？

var myJson; 
var stage; 
var circleLayer; 
var myWidth = 500; 
var myHeigth = 350; 

function createStagesAndLayer() { 

    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: myWidth, 
     height: myHeigth 
    }); 

    circleLayer = new Kinetic.Layer(); 
    stage.add(circleLayer); 
} 
function deleteCircle() { 
    circleLayer.removeChildren(); 
    circleLayer.draw(); 
} 
function saveData() { 
    myJson = null; 
    myJson = stage.toJSON(); 
}function loadData() { 
    if (myJson == null) { 
     alert("Keine Daten gefunden!!"); 
     return; 
    } 


    // I need to remoce it...otherwise my drawing area will grow. But I think here somewhere is the problem 
    stage.remove(circleLayer); 
    stage = Kinetic.Node.create(myJson, 'container'); 
} 
function generateCircle() { 
    var circle = new Kinetic.Circle({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 30, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true 
    }); 
    circleLayer.add(circle); 
    circleLayer.draw(); 
}

來源

2013-04-16 user2286914

從KineticJS documentation：

Kinetic.Node.create（JSON，容器）創建具有JSON 串節點。反序列化不會生成自定義形狀圖函數，圖像或事件處理程序（這將使序列化的對象變大）。如果您的應用使用自定義形狀，圖像和事件處理程序（它可能會這樣做），那麼在加載舞臺並通過on（）， setDrawFunc（）和setImage（）設置這些屬性之後，您需要選擇合適的形狀。方法

所以我相信，局部變量賦值變量也不會工作，因此你的問題。我正在做一個類似的項目，你的問題讓我擔心另一件事:(但+1的擡頭:)

來源

2013-04-17 09:34:35 Ani

這個答案給了我一點點從這個角度來看這是如何創建從json的工作。它給我的撤消/重做方法超過它的頭:)。那麼我必須找到另一種方式。 – Ervin

它取決於你在哪裏調用你的函數saveData（）。如果你第一次刪除circleLayer而不是保存舞臺，那麼你的圈子肯定會丟失。

如果您不會放棄對圓的引用，請嘗試隱藏它，而不是刪除。

circle.hide（）;

如果您有多個生成的圓圈，您可以通過在圓圈創建中使用ID或名稱來隱藏所有圓圈。

例如：

function generateCircle() { 
var circle = new Kinetic.Circle({ 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2, 
    radius: 30, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 2, 
    draggable: true, 
    name: circle 
}); 
circleLayer.add(circle); 
circleLayer.draw(); 
} 

var Circle_hide = circleLayer.get('.circle'); 

if (Circle_hide[0].attrs.visible == true){ 
    for (var i=0; i < Circle_hide.length; i++){ 
    Circle_hide[i].hide(); 
} 
} 
else { 
for (var i=0; i < Circle_hide.length; i++){ 
    Circle_hide[i].show(); 
} 
} 
circleLayer.draw();

您可以隱藏或顯示圈子中添加一個按鈕點擊事件，可以將數據保存到JSON和圓將仍保存在您的JSON文件。

來源

2013-04-17 13:02:47

kinetic.js加載階段...失去的基準

回答

相關問題