KineticJS刪除和添加圖層

Question

我覺得我是令人難以置信的愚蠢，但由於某種原因無法解決這個問題。

我想要3個單獨的圖層，每個圖層上可以有多個對象/形狀，然後單擊我希望可見圖層被刪除或隱藏並顯示下一圖層。

我認爲我的問題是死於邏輯和調用函數。下面是函數和的jsfiddle：

var version = 0;  
function layerVersion() { 
    if (version === 1) { 
    stage.add(layerBlue); 
    layerBlue.on('click', function() { 
     layerOrange.hide; 
     version = 2; 
    }); 
    } else if (version === 2) { 
    stage.add(layerOrange); 
    } else { 
    stage.add(layerPink); 
    layerpink.on('click', function() { 
     layerPink.hide; 
     version = 1; 
    }); 
    } 
} 

這裏是的jsfiddle鏈接：http://jsfiddle.net/TJ96r/2/

任何幫助將是非常感激我覺得不能夠弄清楚這麼愚蠢。

Answer 1

看看這個。 http://jsfiddle.net/TJ96r/3/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 300, 
    height: 300 
}); 
var layerPink = new Kinetic.Layer(); 
layerPink.hide(); 
var layerBlue = new Kinetic.Layer(); 
var layerOrange = new Kinetic.Layer(); 
layerOrange.hide(); 

    // pink box 
    var pink = new Kinetic.Rect({ 
    x: 50, 
    y: 50, 
    width: 100, 
    height: 100, 
    fill: 'pink', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 
    // blue box 
    var blue = new Kinetic.Rect({ 
    x: 100, 
    y: 100, 
    width: 100, 
    height: 100, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 
    // orange box 
    var orange = new Kinetic.Rect({ 
    x: 150, 
    y: 150, 
    width: 100, 
    height: 100, 
    fill: 'orange', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 

    layerPink.add(pink); 
    layerBlue.add(blue); 
    layerOrange.add(orange); 

    var version = 0; 
     stage.add(layerBlue); 
     stage.add(layerOrange); 
     stage.add(layerPink); 

layerBlue.on('click', function() { 
     layerBlue.hide(); 
     layerOrange.show(); 
     layerPink.hide(); 
    stage.draw(); 
     }); 
layerOrange.on('click', function() { 
     layerBlue.hide(); 
     layerOrange.hide(); 
     layerPink.show(); 
    stage.draw(); 
     }); 
layerPink.on('click', function() { 
     layerPink.hide(); 
     layerOrange.hide(); 
     layerBlue.show(); 
    stage.draw(); 
     });