Javascript 我通过kinetic创建draw image 2 image，但我可以'；t单击按钮，然后移动到顶部（）
请帮帮我。我通过kinetic-v5.0.1.min.js创建draw image 2 image。但我不能点击按钮然后移动到顶部 代码Javascript 我通过kinetic创建draw image 2 image，但我可以'；t单击按钮，然后移动到顶部（）,javascript,canvas,Javascript,Canvas,请帮帮我。我通过kinetic-v5.0.1.min.js创建draw image 2 image。但我不能点击按钮然后移动到顶部 代码 身体{ 边际：0px； 填充：0px； } #容器{ 边框：1px纯色灰色； 宽度：80%； } 将黄色框移到顶部 var click_totop=null； 函数更新（activeAnchor）{ var group=activeAnchor.getParent（）； var topLeft=group.find（'.topLeft'）[0]； var t
身体{
边际：0px；
填充：0px；
}
#容器{
边框：1px纯色灰色；
宽度：80%；
}
将黄色框移到顶部
var click_totop=null；
函数更新（activeAnchor）{
var group=activeAnchor.getParent（）；
var topLeft=group.find（'.topLeft'）[0]；
var topRight=group.find（'.topRight'）[0]；
var bottomRight=group.find（'.bottomRight'）[0]；
var bottomLeft=group.find（'.bottomLeft'）[0]；
var image=group.find（'.image'）[0]；
var anchorX=activeAnchor.x（）；
var anchorY=activeAnchor.y（）；
//更新锚点位置
开关（activeAnchor.name（））{
案例“左上角”：
右上角.y（锚定）；
左下角.x（anchorX）；
打破
案例“右上角”：
左上角。y（锚定）；
右下角.x（anchorX）；
打破
案例“右下角”：
左下角.y（锚定）；
右上角.x（主播x）；
打破
案例“左下角”：
右下角.y（锚定）；
左上角.x（anchorX）；
打破
}
image.setPosition（topLeft.getPosition（））；
var width=topRight.x（）-topLeft.x（）；
var height=bottomLeft.y（）-topLeft.y（）；
if（宽度和高度）{
setSize（{width:width，height:height}）；
}
}
函数addAnchor（组、x、y、名称）{
var stage=group.getStage（）；
var layer=group.getLayer（）；
var-toptop=null；
var anchor=新的动力学圆({
x:x，
y:y，
笔划：'#666'，
填写：“#ddd”，
冲程宽度：2，
半径：8，
姓名:姓名,，
真的，
龙顶：错
});
anchor.on（'dragmove'，function（）{
更新（本）；
layer.draw（）；
});
on（'mousedown touchstart'，function（）{
组。可设置拖动（false）；
这是moveToTop（）；
});
on（'dragend'，function（）{
group.SetDragable（真）；
layer.draw（）；
});
//添加悬停样式
on（'mouseover'，function（）{
var layer=this.getLayer（）；
document.body.style.cursor='pointer'；
这是设置行程宽度（4）；
layer.draw（）；
});
anchor.on（'mouseout'，function（）{
var layer=this.getLayer（）；
document.body.style.cursor='default'；
这是冲程宽度（2）；
layer.draw（）；
});
//试验
顶部=锚；
组。添加（锚定）；
}
函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
函数初始化阶段（图像）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：469，
身高：637
});
var darthVaderGroup=新的动力学组({
x:2，
y:2，
德拉格布尔：是的
});
var yodaGroup=新的动力学组({
x:2，
y:2，
德拉格布尔：是的
});
var layer=新的动能层（）；
/*
*继续添加组
*到图层和到图层的图层
*阶段，使小组有知识
*它的层次和阶段
*/
单击_totop=darthVaderGroup；
图层添加（darthVaderGroup）；
图层添加（yodaGroup）；
阶段。添加（层）；
//达斯维德
var darthVaderImg=新动能图({
x:0,，
y:0，
image:images.darthVader，
宽度：469，
身高：637，
名称：“图像”
});
添加（darthVaderImg）；
addAnchor（darthVaderGroup，0,0，'左上'）；
addAnchor（darthVaderGroup，469,0，'右上角'）；
addAnchor（darthVaderGroup，469637，“右下角”）；
addAnchor（darthVaderGroup，0637，“左下角”）；
darthVaderGroup.on（'单击'，函数（））{
这是moveToTop（）；
});
//尤达
var yodaImg=新的动力学图像({
x:0,，
y:0，
图片：images.yoda，
宽度：469，
身高：637，
名称：“图像”
});
yodaGroup.add（yodaImg）；
addAnchor（yodaGroup，0，0，'左上'）；
addAnchor（yodaGroup，469，0，'topRight'）；
addAnchor（yodaGroup，469637，“右下角”）；
addAnchor（yodaGroup，0637，'bottomLeft'）；
yodaGroup.on（'dragstart'，function（））{
这是moveToTop（）；
});
stage.draw（）；
}
风险值来源={
darthVader:'user.jpg'
，尤达：“cover.png”
};
loadImages（源、初始阶段）；
document.getElementById（“toTop”）.addEventListener（“单击”，函数（）{
警报（点击按钮）；
单击_totop.moveToTop（）；
layer.draw（）；
}，假）；
我用了两张图片。我点击按钮1图像1移动到顶部，如果我点击按钮2图像2移动到顶部。请帮帮我。你有什么问题？从这个链接中，我需要一个按钮来单击以将层移动到顶部
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container{
border: 1px solid gray;
width: 80%;
}
</style>
</head>
<body onmousedown="return false;">
<center>
<button id="toTop">
Move yellow box to top
</button>
<div id="container">
</div>
</center>
<script src="kinetic-v5.0.1.min.js"></script>
<script>
var click_totop = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.find('.topLeft')[0];
var topRight = group.find('.topRight')[0];
var bottomRight = group.find('.bottomRight')[0];
var bottomLeft = group.find('.bottomLeft')[0];
var image = group.find('.image')[0];
var anchorX = activeAnchor.x();
var anchorY = activeAnchor.y();
// update anchor positions
switch (activeAnchor.name()) {
case 'topLeft':
topRight.y(anchorY);
bottomLeft.x(anchorX);
break;
case 'topRight':
topLeft.y(anchorY);
bottomRight.x(anchorX);
break;
case 'bottomRight':
bottomLeft.y(anchorY);
topRight.x(anchorX);
break;
case 'bottomLeft':
bottomRight.y(anchorY);
topLeft.x(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.x() - topLeft.x();
var height = bottomLeft.y() - topLeft.y();
if(width && height) {
image.setSize({width:width, height: height});
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var toptop = null;
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.strokeWidth(2);
layer.draw();
});
// test
toptop = anchor;
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 469,
height: 637
});
var darthVaderGroup = new Kinetic.Group({
x: 2,
y: 2,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 2,
y: 2,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
click_totop = darthVaderGroup;
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 469,
height: 637,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 469, 0, 'topRight');
addAnchor(darthVaderGroup, 469, 637, 'bottomRight');
addAnchor(darthVaderGroup, 0, 637, 'bottomLeft');
darthVaderGroup.on('click', function() {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 469,
height: 637,
name: 'image'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 469, 0, 'topRight');
addAnchor(yodaGroup, 469, 637, 'bottomRight');
addAnchor(yodaGroup, 0, 637, 'bottomLeft');
yodaGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
var sources = {
darthVader: 'user.jpg'
,yoda: 'cover.png'
};
loadImages(sources, initStage);
document.getElementById("toTop").addEventListener("click", function() {
alert(click_totop);
click_totop.moveToTop();
layer.draw();
}, false);
</script>
</body>
</html>