我想在圈子上显示上下文菜单，向用户显示一些选项，然后点击执行某些操作，但我无法做到。
如何在鼠标悬停事件中显示带有raphael元素的上下文菜单（例如，circle，line），并在选择特定菜单项时执行某些操作？这就是我试过的：
circle.hover(function () { showMenu(this); }).mouseout(function () { hideMenu(this); });;
以下是我使用HTML的完整代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/raphael-min.js"></script>
<script src="js/scale.raphael.js"></script>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<title></title>
</head>
<body>
<div id="divsCirclePts"></div>
<div id="divCanvas"></div>
<div id="subMenuContainer" style="display: none; background-color: whitesmoke; ">
<ul id="rankSubMenu" style="list-style-type: none;">
<li onclick="alert('open view')">Open View</li>
<li onclick="alert('open Live Dashboard')">Open Live Dashboard</li>
<li onclick="alert('call branch manager')">Call Branch Manager</li>
</ul>
</div>
<div id="divColors">
</div>
<style>
li:hover
{
background: #A5A5A5 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var screenWidth = screen.width
var screenHeight = screen.height;
var circleRadius = 400;
var strokeWidth = 3;
var paper = ScaleRaphael("divCanvas", screenWidth, screenHeight);
// Creating big circle
var circle = paper.circle(screenWidth / 2, screenHeight / 2, circleRadius);
// Sets the fill attribute of the circle to red (#f00)
//circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#000");
circle.attr("stroke-width", 10);
var eltext = paper.set();
el = circle;
text = paper.text(screenWidth / 2, screenHeight / 2, "0 Min(s)").attr({ fill: '#ff0000' });
eltext.push(el);
eltext.push(text);
//var t = r.text(100, 100, 'test');
//t.attr({ "font-size": 16, "font-family": "Arial, Helvetica, sans-serif" });
eltext.attr({ "font-size": 22, "font-family": "Arial, Helvetica, sans-serif" });
eltext.translate(100, 100)
function resizePaper() {
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
}
var arrayPointX = [];
var arrayPointY = [];
var arrayPointLineX = [];
var arrayPointLineY = [];
var arrayCount = 0;
for (var i = 0; i < 360;)
{
arrayPointX[arrayCount] = (screenWidth / 2) + (circleRadius * Math.cos((i) * Math.PI / 180));
arrayPointY[arrayCount] = (screenHeight / 2) + (circleRadius * Math.sin((i) * Math.PI / 180));
arrayPointLineX[arrayCount] = (screenWidth / 2) + ((i +1) * Math.cos((i) * Math.PI / 180));
arrayPointLineY[arrayCount] = (screenHeight / 2) + ((i + 1) * Math.sin((i) * Math.PI / 180));
arrayCount++;
i = i + 360 / 100;
}
//$("#divColors").append("");
for (var i = 0; i < arrayPointX.length; i++) {
var zColor = getRandomColor();
//$("#divColors").append(i + ": " + zColor + " zcolorlength:" + zColor.length + "</br>");
var imgURL = "img/markers/marker-ready.png";
var myImg = new Image();
myImg.src = imgURL;
var width = myImg.width;
var height = myImg.height;
//create the image with the obtained width and height:
var xDisplace = 100;
var yDisplace = 100;
var xImageDisplace = 90;
var yImageDisplace = 90;
//Drawing small circle on edge of big circle
//var circle = paper.circle(arrayPointX[i] + xDisplace, arrayPointY[i] + yDisplace, 10);
var image_1 = paper.image(imgURL, (arrayPointX[i] + xImageDisplace), (arrayPointY[i] + yImageDisplace), 20, 20);
//var circleLinetoCenterX = (arrayPointX[i] + xDisplace) - 350;
//var circleLinetoCenterY = (arrayPointX[i] + xDisplace) - 350;
var lnstr = "M" + (arrayPointLineX[i] + xDisplace) + " " + (arrayPointLineY[i] + yDisplace) + "L" + (arrayPointX[i] + xDisplace) + " " + (arrayPointY[i] + yDisplace);
//var line = paper.path(lnstr);/*.attr({ 'stroke-width': 5, });*/
//line.attr("stroke-width", 5)
var line;
if (i % 2 == 0) {
line = drawpath(paper, lnstr, 4000, { "stroke-width": strokeWidth, 'stroke': zColor }, function () { });
}
else
{
line = drawpath(paper, lnstr, 1500, { "stroke-width": strokeWidth, 'stroke': zColor }, function () { });
}
image_1.hover(function () { changeCircleColor(this); }).mouseout(function () { changeCircleColorBack(this); });;
line.hover(function () { /*alert(i)*/ });
line.insertBefore(image_1);
//line.animate({ "stroke-width": 5 }, 2000);
var midPointArrowLineX = ((arrayPointLineX[i] + xDisplace) + (arrayPointX[i] + xDisplace)) / 2;
var midPointArrowLineY = ((arrayPointLineY[i] + yDisplace) + (arrayPointY[i] + yDisplace)) / 2;
if (i % 2) {
//backward Arrow
// drawing from point to mid point
var lnstr = "M" + (arrayPointLineX[i] + xDisplace) + " " + (arrayPointLineY[i] + yDisplace) + "L" + (midPointArrowLineX) + " " + (midPointArrowLineY);
var line1 = paper.path(lnstr).attr({ 'arrow-end': 'classic-wide-long', 'stroke': zColor });
//var line1 = drawpath(paper, lnstr, 400, { "stroke-width": 5}, function () { });
line1.insertBefore(circle);
line1.animate({ "stroke-width": strokeWidth }, 2000);
}
else {
//forward Arrow
// drawing from mid point to point
var lnstr = "M" + (midPointArrowLineX) + " " + (midPointArrowLineY) + "L" + (arrayPointX[i] + xDisplace) + " " + (arrayPointY[i] + yDisplace);
var line2 = paper.path(lnstr).attr({ 'arrow-start': 'classic-wide-long', 'stroke': zColor });
//var line2 = drawpath(paper, lnstr, 400, { "stroke-width": 5, 'arrow-start': 'classic-wide-long' }, function () { });
line2.insertBefore(circle);
line2.animate({ "stroke-width": strokeWidth }, 2000);
}
}
resizePaper();
$(window).resize(resizePaper);
});
function changeCircleColor(circle) {
alert('q');
}
function changeCircleColorBack(circle) {
alert('q');
}
function getRandomColor()
{
var zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
return zColor;
}
function drawpath(canvas, pathstr, duration, attr, callback) {
var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" });
var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
var total_length = guide_path.getTotalLength(guide_path);
var last_point = guide_path.getPointAtLength(0);
var start_time = new Date().getTime();
var interval_length = 50;
var result = path;
var interval_id = setInterval(function () {
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath(0, this_length);
attr.path = subpathstr;
path.animate(attr, interval_length, 'bounce');
if (elapsed_time >= duration) {
clearInterval(interval_id);
if (callback != undefined) callback();
guide_path.remove();
}
}, interval_length);
return result;
}
</script>
</body>
</html>
答案 0 :(得分：1)
从OP的评论中复制的答案：
这可以通过显示div来解决：
$('#subMenuContainer').css({ 'top': image.getBBox().y + displace, 'left': image.getBBox().x + displace, 'position': 'absolute', 'border': '2px solid black' });