javascript - 如何使用 Canvas 在鼠标悬停在饼图的每个切片上时添加工具提示

Question

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var cw = canvas.width;
    var ch = canvas.height;
    ctx.lineWidth = 2;
    ctx.font = '14px verdana';

    var PI2 = Math.PI * 2;
    var myColor = ["Green", "Red", "Blue"];
    var myData = [30, 15, 38, 22, 30, 20, 10];
    var cx = 150;
    var cy = 150;
    var radius = 100;

    ctx.globalAlpha = 0.50;
    pieChart(myData, myColor);
    ctx.globalAlpha = 1.00;

    function pieChart(data, colors) {
    // calc data total
    var total = 0;
    for (var i = 0; i < data.length; i++) {
        total += data[i];
    }
    // calc sweep angles for each piece of pie
    var sweeps = []
    for (var i = 0; i < data.length; i++) {
        sweeps.push(data[i] / total * PI2);
    }
    // draw outer pie
    var accumAngle = 0;
    for (var i = 0; i < sweeps.length; i++) {
        var f = randomColor();
        drawWedge(radius, accumAngle, accumAngle + sweeps[i], f, data[i]);
        accumAngle += sweeps[i];
    }
 
    }

    function drawWedge(radius, startAngle, endAngle, fill, label) {
    // draw the wedge
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, radius, startAngle, endAngle, false);
    ctx.closePath();
    ctx.fillStyle = fill;
    ctx.strokeStyle = 'white';
    ctx.fill();
    ctx.stroke();
    }

    function randomColor() {
    return ('#' + (Math.floor(Math.random() * 0x1000000) + 
    0x1000000).toString(16).substr(1));
    }
    
    

<canvas id="canvas" width=512 height=512></canvas>

我有一个简单的问题 - 是否有任何选项可以在 Canvas 饼弧上的鼠标悬停事件上添加工具提示？谁能帮我，我该怎么做。 我可以使用 Canvas 绘制饼图，请修改以下代码片段:

Answer 1

Canvas.title = "工具提示文本"

在最基本的级别上，您可以使用 canvas.title 属性来设置工具提示。只需获取鼠标移动事件并记录鼠标位置即可。然后，当您检测到鼠标已更改位置时，检查鼠标位于哪个切片(如果有)上，并设置工具提示以匹配。

请注意，浏览器工具提示对更改的响应有点慢。

为了更好的响应。

您还可以在渲染循环的每一帧绘制图表，并突出显示鼠标所在的饼图部分，并创建比浏览器默认响应更灵敏的工具提示，这有时可能会有点慢。

下面的示例只是您的代码，经过修改后即可获取基本工具提示。

请注意，我将鼠标事件监听器和更改工具提示的函数分开，这是因为在某些系统上鼠标可以具有非常高的采样率(我当前的游戏鼠标每秒可以触发 700+ 次)并执行mousemove 事件过多可能会导致对用户输入的响应滞后。

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var cw = canvas.width;
    var ch = canvas.height;
    ctx.lineWidth = 2;
    ctx.font = '14px verdana';

    var PI2 = Math.PI * 2;
    var myColor = ["Green", "Red", "Blue"];
    var myData = [30, 15, 38, 22, 30, 20, 10];
    var cx = 150;
    var cy = 150;
    var radius = 100;
    var mouse = {x :0,y:0,oldx : 0,oldy:0};

    ctx.globalAlpha = 0.50;
    pieChart(myData, myColor);
    ctx.globalAlpha = 1.00;
    

    function pieChart(data, colors) {
        // calc data total
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            total += data[i];
        }
        // calc sweep angles for each piece of pie
        var sweeps = []
        for (var i = 0; i < data.length; i++) {
            sweeps.push(data[i] / total * PI2);
            data[i] = {
                value : data[i],
                angle : data[i] / total * PI2,
                text : "Data is "+((data[i] / total) * 100).toFixed(0) + "%",
            }
        }
        // draw outer pie
        var accumAngle = 0;
        for (var i = 0; i < sweeps.length; i++) {
            var f = randomColor();
            drawWedge(radius, accumAngle, accumAngle + sweeps[i], f, data[i].value);
            accumAngle += sweeps[i];
        }

    }

    function drawWedge(radius, startAngle, endAngle, fill, label) {
        // draw the wedge
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, radius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fillStyle = fill;
        ctx.strokeStyle = 'white';
        ctx.fill();
        ctx.stroke();
    }

    function randomColor() {
        return ('#' + (Math.floor(Math.random() * 0x1000000) +
                0x1000000).toString(16).substr(1));
    }
    canvas.addEventListener("mousemove",function(event){
        mouse.x = event.clientX; 
        mouse.y = event.clientY;
    })
    
    function update(){
        // only on change in mouse position
        if(mouse.x !== mouse.oldx || mouse.y !== mouse.oldy){
            var x = mouse.oldx = mouse.x;
            var y = mouse.oldy = mouse.y;
            x -= cx; // vector from pie center
            y -= cy;
            var newText = "My pie chart. Mouse over slices for more info.";
            var dist = Math.sqrt(x * x + y * y); // get distance from center
            if(dist < radius){
                var ang = Math.atan2(y,x); // get angle note y is first
                ang += Math.PI * 2; // rotate 360 as atan2 starts at -Pi
                ang %= Math.PI * 2; // normalize to range 0 to 2Pi
                var i = 0;
                var tAng = 0
                while(i < myData.length-1){
                    if(ang < tAng + myData[i].angle){
                        break;
                    }
                    tAng +=  myData[i].angle;
                    i += 1;
                }
                newText = myData[i].text;
            }
            canvas.title = newText;
        }
        requestAnimationFrame(update);
    }
    update();

<canvas id="canvas" width=512 height=512></canvas>