个人中心
gpt4 book ai didi

javascript - 如何在鼠标悬停时显示带有拉斐尔元素(圆形、线条)的上下文菜单

转载 作者：行者123 更新时间：2023-12-03 10:32:24 27 4
gpt4 key购买 nike

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

如何在鼠标悬停事件上显示带有拉斐尔元素(例如圆圈、线条)的上下文菜单，并在选择特定菜单项时执行某些操作？这是我尝试过的:

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>

最佳答案

从OP评论中复制的答案:

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

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

关于javascript - 如何在鼠标悬停时显示带有拉斐尔元素(圆形、线条)的上下文菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29147836/

27 4 0
文章推荐： XSLT 样式表 : Changing text to upper case
文章推荐： c# - 使用 ctrl+z 键在 WPF 中实现我们自己的 Undo 方法/功能并禁用默认的 undo 命令
文章推荐： r - 按组选择具有最小值的行
文章推荐： c# - TabControl 未找到 TabControl 项的数据模板
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com