[英]KineticJS removing and adding layers
I feel I am being incredible stupid but for some reason am blind to being able to fix this issue. 我感到自己非常愚蠢,但出于某种原因却无法解决此问题。
I want 3 individual layers, each that can have multiple object/shapes on them and then on click I want the visible layer to be removed or hid and the next layer to appear. 我想要3个单独的图层,每个图层上可以具有多个对象/形状,然后单击,我希望将可见的图层删除或隐藏,然后显示下一个图层。
I think my issue is dying in the logic and calling the function. 我认为我的问题死于逻辑并调用函数。 Here is the function and the jsfiddle:
这是函数和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;
});
}
}
Here is the jsFiddle link: http://jsfiddle.net/TJ96r/2/ 这是jsFiddle链接: http : //jsfiddle.net/TJ96r/2/
Any help would be much appreciate I feel so dumb for not being able to figure it out. 任何帮助将不胜感激,因为我无法解决问题,我感到非常愚蠢。
Check this out. 看一下这个。 http://jsfiddle.net/TJ96r/3/
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.