Question

如果我创建了图像图层，那么如何在图像图层上隐藏和显示文本图层。到目前为止，我已经创建了图像层。并得到它给我的文本图层，但它删除了图像层。我也无法通过鼠标点击它在舞台上工作。

<!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>

Answer 1

你几乎拥有它！

只需将您的图层添加到舞台：

stage.add(layer);

这是代码和小提琴：http://jsfiddle.net/m1erickson/2bvHJ/

<!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>

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

1 个答案: