Javascript 一个函数用于多个元素
我目前正在画布上绘制元素:Javascript 一个函数用于多个元素,javascript,html5-canvas,kineticjs,Javascript,Html5 Canvas,Kineticjs,我目前正在画布上绘制元素: var head = new Kinetic.Ellipse({ x: stage.width() / 2, y: 100, radius: { x: 50, y: 60 }, fill: '#DDDDDD', stroke: 'black', strokeWidth: 2 }); var neck = new Kinetic.RegularP
var head = new Kinetic.Ellipse({
x: stage.width() / 2,
y: 100,
radius: {
x: 50,
y: 60
},
fill: '#DDDDDD',
stroke: 'black',
strokeWidth: 2
});
var neck = new Kinetic.RegularPolygon({
x: stage.width() / 2,
y: 180,
sides: 4,
radius: 70,
fill: '#DDDDDD',
stroke: 'black',
strokeWidth: 2
});
layer.add(neck);
layer.add(head);
当点击或触摸时改变这些元素的颜色,但我会在屏幕上有很多元素,不想用相同的功能改变每一个
有没有一种方法可以把下面的两个结合起来成为一个函数,但却影响上面的两个
head.on('touchstart, mousedown', function() {
var current = this.getFill();
var fill = "";
switch (current) {
case "#DDDDDD":
fill = "#FFC926";
break;
case "#FFC926":
fill = "#FF0000";
break;
case "#FF0000":
fill = "#000000";
break;
default:
fill= "#DDDDDD";
}
this.setFill(fill);
layer.draw();
});
neck.on('touchstart, mousedown', function() {
var current = this.getFill();
var fill = "";
switch (current) {
case "#DDDDDD":
fill = "#FFC926";
break;
case "#FFC926":
fill = "#FF0000";
break;
case "#FF0000":
fill = "#000000";
break;
default:
fill= "#DDDDDD";
}
this.setFill(fill);
layer.draw();
});
您可以提取一个公共函数,并像下面那样使用它
var evaentListener = function(obj) {
return function() {
var current = obj.getFill();
var fill = "";
switch (current) {
case "#DDDDDD":
fill = "#FFC926";
break;
case "#FFC926":
fill = "#FF0000";
break;
case "#FF0000":
fill = "#000000";
break;
default:
fill= "#DDDDDD";
}
obj.setFill(fill);
layer.draw();
}
}
head.on('touchstart, mousedown',evaentListener(this));
neck.on('touchstart, mousedown',evaentListener(this));