<分区>
Possible Duplicate:
Simple task (SVG vs. Canvas)
我正在尝试绘制/绘制多个圆圈，并希望在鼠标悬停或单击鼠标时使用 ID 来识别它们。 我试图使用 KineticJS 来做到这一点，但由于我是 javascript 的初学者，所以无法实现。
除此之外，我只想捕获正常的鼠标事件(左/右单击)并且除了鼠标事件之外不会移动或玩这些圆圈。 KineticJS 也是正确的库。使用？ Raphael JS/d3 等怎么样？{这很可能仅通过 Jquery/Dojo 轻松实现) 唯一重要的是绘制大量的圆圈，能够唯一地识别它们并将鼠标事件与它们相关联。
PS:是的，我还想实现放大/缩小绘制这些圆圈的空间/ Canvas 的能力。
请推荐。提前致谢。
最佳答案
试试下面的代码，你可以通过在圆圈上移动鼠标找到圆圈 ID
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var circlesLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'purple'];
var colorIndex = 0;
var circleId ;
for(var n = 0; n < 100; n++) {( function() {
var i = n;
var color = colors[colorIndex++];
if(colorIndex >= colors.length) {
colorIndex = 0;
}
circleId = "CircleID_" + i;
var randX = Math.random() * stage.getWidth();
var randY = Math.random() * stage.getHeight();
var circle = new Kinetic.Circle({
x: randX,
y: randY,
radius: 10,
fill: color,draggable:true,
id:circleId
});
circle.on('mousemove', function() {
// update tooltip
var mousePos = stage.getMousePosition();
tooltip.setPosition(mousePos.x + 5, mousePos.y + 5);
tooltip.setText('ID: ' + stage.get("#CircleID_" + i)[0].attrs.id);
tooltip.show();
tooltipLayer.draw();
});
circle.on('mouseout', function() {
tooltip.hide();
tooltipLayer.draw();
});
circlesLayer.add(circle);
}());
}
var tooltip = new Kinetic.Text({
text: '',
fontFamily: 'Calibri',
fontSize: 12,
padding: 5,
visible: false,
fill: 'black',
opacity: 0.75,
textFill: 'white'
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于javascript - 绘制 100 个带 ID 的圆圈并将鼠标事件与它们相关联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12460983/
相关文章：
javascript - 如何将 JavaScript 文字转换为 JSON 数组？
javascript - XSLT 没有获取从 javascript 传递的参数
javascript - 如何在可重用的 React 组件库中捆绑 prop 类型
javascript - 从最近的点击按钮获取值(value)
jquery - 禁用 ctrl-click jquery ui 可选择
javascript - 使用套接字优雅地处理 fork 进程中未捕获的异常
jquery - css3 动画 : how to play css3 animation and keep the last frame displayed?