Javascript KinectJS在图像层上显示和隐藏文本_Javascript_Html_Kineticjs_Layer

Javascript KinectJS在图像层上显示和隐藏文本

javascript html

Javascript KinectJS在图像层上显示和隐藏文本,javascript,html,kineticjs,layer,Javascript,Html,Kineticjs,Layer,如果创建了图像层，那么如何在图像层上隐藏和显示文本层。到目前为止，我已经创建了图像层。让它给我鞋的文字层，但它删除了图像层然后。我也不能让它在舞台上用鼠标点击工作 <!DOCTYPE HTML> <html> <head> </head> <body> <div id="container"></div> <div id="nupud"> <button id="show"> show &

如果创建了图像层，那么如何在图像层上隐藏和显示文本层。到目前为止，我已经创建了图像层。让它给我鞋的文字层，但它删除了图像层然后。我也不能让它在舞台上用鼠标点击工作

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="container"></div>
<div id="nupud">
<button id="show">
show
</button> 
<button id="hide">
hide
</button>

</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 1600,
height: 800
});

var layer = new Kinetic.Layer();
var tekst = new Kinetic.Text({
x:stage.getWidth() / 2,
y: 15,
text: 'Simple Tekst',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
});

var imageObj = new Image();
imageObj.onload = function() {
var taust = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1600,
height: 800
});
// add the shape to the layer
layer.add(taust);

};

//add the text layer
layer.add(tekst);


// add button event bindings
document.getElementById('show').addEventListener('click', function() {
tekst.show();
layer.draw();
}, false);
document.getElementById('hide').addEventListener('click', function() {
tekst.hide();
layer.draw();
}, false);

imageObj.src = 'Untitled.png';
//taust lõppeb
</script>
</body>
</html>


显示
隐藏
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1600，
身高：800
});
var layer=新的动能层（）；
var-tekst=新的动能文本({
x:stage.getWidth（）/2，
y:15，
文本：“简单的Tekst”，
尺寸：30，
fontFamily：“Calibri”，
填充：“绿色”
});
var imageObj=新图像（）；
imageObj.onload=函数（）{
var taust=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：1600，
身高：800
});
//将形状添加到层中
层。添加（taust）；
};
//添加文本层
层。添加（tekst）；
//添加按钮事件绑定
document.getElementById（'show'）.addEventListener（'click'，function（）{
tekst.show（）；
layer.draw（）；
}，假）；
document.getElementById（'hide'）.addEventListener（'click'，function（）{
tekst.hide（）；
layer.draw（）；
}，假）；
imageObj.src='Untitled.png'；
//托斯特·勒佩布

你几乎拥有了它

只需将图层添加到舞台：

stage.add(layer);

下面是代码和小提琴：


显示
隐藏
var阶段=新的动力学阶段({
容器：'容器'，
宽度：300，
身高：300
});
var taust；
var tekst；
var layer=新的动能层（）；
阶段。添加（层）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
taust=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：300，
身高：300
});
//将形状添加到层中
层。添加（taust）；
tekst=新的动能文本({
x:25，
y:15，
文本：“简单的Tekst”，
尺寸：50，
fontFamily：“Calibri”，
填充：“绿色”
});
层。添加（tekst）；
layer.draw（）
};
imageObj.src='koolaidman.png'；
//添加按钮事件绑定
document.getElementById（'show'）.addEventListener（'click'，function（）{
tekst.show（）；
layer.draw（）；
}，假）；
document.getElementById（'hide'）.addEventListener（'click'，function（）{
tekst.hide（）；
layer.draw（）；
}，假）；
//托斯特·勒佩布

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="container"></div>
<div id="nupud">
<button id="show">
show
</button> 
<button id="hide">
hide
</button>

</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});

var taust;
var tekst;

var layer = new Kinetic.Layer();
stage.add(layer);

var imageObj = new Image();
imageObj.onload = function() {

    taust = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: 300,
        height: 300
    });
    // add the shape to the layer
    layer.add(taust);

    tekst = new Kinetic.Text({
        x:25,
        y: 15,
        text: 'Simple Tekst',
        fontSize: 50,
        fontFamily: 'Calibri',
        fill: 'green'
    });
    layer.add(tekst);

    layer.draw()
};
imageObj.src = 'koolaidman.png';


// add button event bindings
document.getElementById('show').addEventListener('click', function() {
tekst.show();
layer.draw();
}, false);
document.getElementById('hide').addEventListener('click', function() {
tekst.hide();
layer.draw();
}, false);

//taust lõppeb
</script>
</body>
</html>