如何恢复Kinetic.js事件？
我编写了一个Kinetic.js“shape-button”，它会监听mouseover和mouseout事件。当我点击它时，它会改变颜色，不再听鼠标悬停/退出。当我再次点击它时，我希望它再次收听鼠标悬停和鼠标移动。我尝试删除一个单击事件并在两个事件中恢复另一个，但我无法恢复一个事件
circle.on("eventname")
我必须定义一个像这样的函数
circle.on("eventname", function(){//do stuff here});
但是thad会以定义函数的连续循环结束
感谢您的回答！
这是我的代码：
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("mouseout.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("click.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1");
scircle.on("mouseover.event1");
scircle.on("click.event1");
scircle.off("click.event2");
circleLayer.draw();
});
circleLayer.draw();
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
答案 0 :(得分：2)
“开”功能需要两个参数。第一个是事件名称。第二个是处理程序。 您需要传递处理程序才能正确恢复事件。
我认为你应该尝试将你的事件分配给处理程序并将它们传递给scircle.on
查看以下代码是否有效
干杯！
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
mouseover_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("mouseover.event1", mouseover_event1);
mouseout_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
}
scircle.on("mouseout.event1", mouseout_event1);
click_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", click_event2);
circleLayer.draw();
};
click_event2 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1", mouseout_event1);
scircle.on("mouseover.event1", mouseover_event1);
scircle.on("click.event1", click_event1);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("click.event1", click_event1);
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>