Question

setupStage显示图像但handleButtonClick功能不显示图像。我做错了什么这是代码

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style>
    body { margin:0px; padding:0px; background:#666; }
</style>
</head>

<body>
<div id="container">

<button onclick="handleButtonClick('selection1')">Selection1</button>
<button onclick="handleButtonClick('selection2')">Selection2</button>
<button onclick="resetLayer(window.NettieData.clothesLayer)">Reset</button>

</div>

<script src="kinetic-v4.3.0-beta2.js"></script>

<script>
function loadImages(backgroundImages, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in backgroundImages) { numImages++; }
for(var src in backgroundImages) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = backgroundImages[src];
}
}

function loadImages1(clothImages, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in clothImages) { numImages++; }
for(var src in clothImages) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};



images[src].src = clothImages[src];
}

}

function setupStage(images) {
var stage = new Kinetic.Stage({ container:'container', width:1290, height:600 });
var layer = new Kinetic.Layer();
var xpub = 347;
var ypub = 454; // Pub
var x = 10;
var y = 10;

// BG
var bgImg = new Kinetic.Image({
image:images.bg,
x:0,
y:y-5,
width:1200,
height:600,
draggable:false,  

});
layer.add(bgImg);

// Menu
var menuImg = new Kinetic.Image({
image:images.menu,
x:x+10,
y:y+50,
width:403,
height:403,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled:true

});
layer.add(menuImg);

// Nettie
var nettieImg = new Kinetic.Image({
image:images.nettie,
x:520,
y:100,
width:203,
height:394,
draggable:false,

});
layer.add(nettieImg);

// Pub
var pubImg = new Kinetic.Image({
image:images.pub,
x:x+820,
y:y+50,
width:xpub,
height:ypub,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled: false
});
layer.add(pubImg);

stage.add(layer);

}

function resetLayer(layer){
layer.clear(); 
}

function handleButtonClick(select, images){

var layer = new Kinetic.Layer();
var x = 10;
var y = 10;

if ( select == "selection1" ) {

// BG var bgImg = new Kinetic.Image（{ 图片：images.bg， X：X + 50， Y：Y + 50，宽度：403，高度：403，拖动：真实，行程：“蓝”， strokeWidth：2， strokeEnabled：真

}）; layer.add（bgImg）;

var menuImg = new Kinetic.Image({
image:images.menu,
x:x+10,
y:y+50,
width:403,
height:403,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled:true

});
layer.add(menuImg);

var n101Img = new Kinetic.Image({
image:images.n101,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n101Img);

}
if ( select == "selection2" ) {

// BG var bgImg = new Kinetic.Image（{ 图片：images.bg， X：X + 50， Y：Y + 50，宽度：403，高度：403，拖动：真实，行程：“蓝”， strokeWidth：2， strokeEnabled：真

});
layer.add(bgImg);

var n200Img = new Kinetic.Image({
image:images.n200,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n200Img);

var n201Img = new Kinetic.Image({
image:images.n201,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n201Img);

}
stage.add(layer); }

var backgroundImages = {

bg:"bg.gif",
menu:"menu.gif",
nettie:"010a.gif",
pub:"pub1.jpg",
};
loadImages(backgroundImages, setupStage);

var clothImages = {

bg:"bg.gif",
n100:"100.gif",
n101:"101.gif",
n200:"200.gif",
n201:"201.gif",
};
loadImages1(clothImages, handleButtonClick);
</script>

</body></html>

动态图像不显示

0 个答案: