如何在kinetic.js中向函数和事件名称中添加可计数变量
How to add an countable variable into an function and eventnames in kinetic.js?
如何在kinetic.js中向函数和事件名称中添加可计数变量？我有两个圆圈，想要更多，圆圈有鼠标悬停事件和函数等等。我不想复制粘贴圆圈函数，我想把它放在"for"循环中。但我不知道如何在函数名和事件名中添加变量。谢谢你的回答！
这是我的代码：
<head>
<script src="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'
var sradius = 50
var strokeWidth = 1
function drawCircle1/*here an countable variable*/(sx, sy, sradius, sstrokeWidth, containerID) {
var stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
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/*here an countable var*/ = 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/*here an countable var*/");
circleLayer.draw();
};
scircle.on("mouseover.event1/*here an countable var*/", mouseover_event1/*here an countable var*/);
mouseout_event1/*here an countable var*/ = 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/*here an countable var*/");
circleLayer.draw();
}
scircle.on("mouseout.event1/*here an countable var*/", mouseout_event1/*here an countable var*/);
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/*here an countable var*/");
scircle.off("mouseover.event1/*here an countable var*/");
scircle.off("click.event1/*here an countable var*/");
scircle.on("click.event2/*here an countable var*/", click_event2/*here an countable var*/);
circleLayer.draw();
};
click_event2/*here an countable var*/ = 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.on("mouseout.event1/*here an countable var*/", mouseout_event1/*here an countable var*/);
scircle.on("mouseover.event1/*here an countable var*/", mouseover_event1/*here an countable var*/);
scircle.on("click.event1/*here an countable var*/", click_event1/*here an countable var*/);
scircle.off("click.event2/*here an countable var*/");
circleLayer.draw();
};
scircle.on("click.event1"/*here an countable var*/, click_event1/*here an countable var*/);
circleLayer.add(scircle);
stage.add(circleLayer);
}
function drawCircle2/*here an countable var*/(sx, sy, sradius, sstrokeWidth, containerID)/*it is the same function with the variables count up manual*/ {
var stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
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_event3/*here an countable var*/ = 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.event4/*here an countable var*/");
circleLayer.draw();
};
scircle.on("mouseover.event3/*here an countable var*/", mouseover_event3/*here an countable var*/);
mouseout_event3/*here an countable var*/ = 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.event4/*here an countable var*/");
circleLayer.draw();
}
scircle.on("mouseout.event3/*here an countable var*/", mouseout_event3/*here an countable var*/);
click_event3/*here an countable var*/ = 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.event3/*here an countable var*/");
scircle.off("mouseover.event3/*here an countable var*/");
scircle.off("click.event3/*here an countable var*/");
scircle.on("click.event4/*here an countable var*/", click_event4/*here an countable var*/);
circleLayer.draw();
};
click_event4/*here an countable var*/ = 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.on("mouseout.event3/*here an countable var*/", mouseout_event3/*here an countable var*/);
scircle.on("mouseover.event3/*here an countable var*/", mouseover_event3/*here an countable var*/);
scircle.on("click.event3/*here an countable var*/", click_event3/*here an countable var*/);
scircle.off("click.event4/*here an countable var*/");
circleLayer.draw();
};
scircle.on("click.event3/*here an countable var*/", click_event3/*here an countable var*/);
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle1/*here an countable var*/(sradius, sradius, sradius, strokeWidth, "1"/*here an countable var*/);
drawCircle2/*here an countable var*/(sradius, sradius, sradius, strokeWidth, "2"/*here an countable var*/);
};
</script>
</head>
<body>
<table border="2">
<tr>
<td> <div id="1"></div> </td>
</tr>
<tr>
<td> <div id="2"></div> </td>
</tr>
</table>
</body>
很抱歉，您真的需要统计事件id吗？似乎你想有几个圈子，每个圈子都有自己的孤立事件，是吗？
看看下面的代码是否是你想要的
<head>
<script src="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'
var sradius = 50
var strokeWidth = 1
function drawCircle(sx, sy, sradius, sstrokeWidth, containerID) {
this.stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
this.circleLayer = new Kinetic.Layer();
//circle
this.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
});
this.mouseover_eventA = 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);
this.off("click.eventB");
this.parent.draw();
};
this.scircle.on("mouseover.eventA", mouseover_eventA);
this.mouseout_eventA = 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);
this.off("click.eventB");
this.parent.draw();
}
this.scircle.on("mouseout.eventA", mouseout_eventA);
this.click_eventA = 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);
this.off("mouseout.eventA");
this.off("mouseover.eventA");
this.off("click.eventA");
this.on("click.eventB", click_eventB);
this.parent.draw();
};
this.click_eventB = 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);
this.on("mouseout.eventA", mouseout_eventA);
this.on("mouseover.eventA", mouseover_eventA);
this.on("click.eventA", click_eventA);
this.off("click.eventB");
this.parent.draw();
};
this.scircle.on("click.eventA", click_eventA);
this.circleLayer.add(this.scircle);
this.stage.add(this.circleLayer);
}
window.onload = function() {
for (i=1; i<=6; i++){
drawCircle(sradius, sradius, sradius, strokeWidth, i.toString());
}
};
</script>
</head>
<body>
<table border="2">
<tr>
<td> <div id="1"></div> </td>
</tr>
<tr>
<td> <div id="2"></div> </td>
</tr>
<tr>
<td> <div id="3"></div> </td>
</tr>
<tr>
<td> <div id="4"></div> </td>
</tr>
<tr>
<td> <div id="5"></div> </td>
</tr>
<tr>
<td> <div id="6"></div> </td>
</tr>
</table>
</body>
您可以使用for循环（如果我正确理解您的问题）创建一个组并添加圆圈
看看这个：http://jsfiddle.net/9vsps/2/
相关文章：
- 将单击事件添加到数据表
- 将单击事件添加到附加的项目中
- 使用引导事件添加动画
- 如何将单击事件添加到JQuery中动态添加的元素中
- 如何在jQuery中将事件添加到新生儿元素中
- JQuery将侦听事件添加到.rezable(），然后附加DIV's
- jQuery:使用实时事件添加tabindex属性
- 将单击事件添加到显示字段
- 如何将事件添加到jQuery's on(）回调
- 将此事件添加到工具栏
- TinyMCE 将另一个事件添加到粗体和斜体按钮
- 当用户在输入字段事件中输入内容时，为该字段事件添加动画占位符
- 使用 JQuery 将 onclick 事件添加到动态创建的定位点
- Raphaeljs 将点击事件添加到饼图的一部分
- 将事件添加到网格的coffeescript实现中
- 将事件添加到谷歌地图标记
- Javascript:将onkeydown事件添加到prompt(）中
- 如何将onclick事件添加到joint.js元素中
- 角度指令:绑定'鼠标悬停'事件添加到元素
- 将事件添加到涉及for(）的索引中的多个子节点
