如何在鼠标悬停时显示带有 raphael 元素（圆、线）的上下文菜单

Question

我想在圆圈悬停时显示上下文菜单以向用户显示一些选择并在单击时执行一些操作，但我做不到。

如何在鼠标悬停事件中显示带有 raphael 元素（例如圆、线）的上下文菜单并在选择特定菜单项时执行某些操作？这是我试过的：

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>

Answer 1

从 OP 的评论中复制的答案：

这可以通过如下显示div来解决：

$('#subMenuContainer').css({ 'top': image.getBBox().y + displace, 'left': image.getBBox().x + displace, 'position': 'absolute', 'border': '2px solid black' });

如何在鼠标悬停时显示带有 raphael 元素（圆、线）的上下文菜单

how to show context menu with raphael elements (circle, line) on mouse hover

javascript

contextmenu

raphael

mouseover