KinectJS показать и скрыть текст на уровне изображения

Если у меня есть слой с изображениями, то как мне скрыть и показать текстовый слой на слой с изображением. До сих пор я создал слой изображения. И получил это, чтобы обучить меня текстовому слою, но затем удаляет слой изображения. Также я не могу заставить его работать на сцене с помощью мыши.KinectJS показать и скрыть текст на уровне изображения

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

источник

2013-06-11 Sven

У вас его почти нет!

Просто добавьте ваш слой на сцену:

stage.add(layer);

Вот код и Fiddle: 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>

источник

2013-06-11 20:29:32 markE

Спасибо йо Koolaidman! – Sven

KinectJS показать и скрыть текст на уровне изображения

ответ

Смежные вопросы