在画布图中显示工具提示
在画布图中显示工具提示
提问于 2013-06-12 11:58:12
我使用html5画布元素绘制一个用点表示这里中不同点的图形。
我想显示不同的工具提示在不同的点上鼠标hover.the文本显示作为工具提示将由用户提供。
我试过，但不知道如何将工具提示添加到graph.The代码中用于显示点的各个点是。
// Draw the dots
c.fillStyle = '#333';
for (var i = 0; i < data.values.length; i++) {
c.beginPath();
c.arc(getXPixel(data.values[i].X), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
c.fill();
}我应该在这段代码中添加什么，这样我才能将用户输入作为工具提示来显示？
Stack Overflow用户
发布于 2021-10-18 14:07:13
非常感谢以上的回答，因为它们帮助我制定了我自己的解决方案，所以我想为那些试图这样做的人作出贡献。
<!-- https://jsfiddle.net/7kj2g5ur/ -->
<!-- https://stackoverflow.com/questions/17064913/display-tooltip-in-canvas-graph -->
<!-- https://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code -->
<!-- http://phrogz.net/tmp/canvas_zoom_to_cursor.html -->
<!-- https://www.w3schools.com/jsref/jsref_regexp_newline.asp -->
<!-- https://stackoverflow.com/questions/17064913/display-tooltip-in-canvas-graph -->
<!-- https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V5</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
<script src="functions.js"></script>
<script src="script.js"></script>
</body>
</html>CSS
body {
background:#eee;
/* text-align:center; */
margin: 0;
padding: 0;
}
#canvas {
display:block;
background:#fff;
border:1px solid #ccc;
}JS
/**
* Mensura a largura e altura da fonte
* @param {*} text
* @param {*} font
* @returns
*/
function measureText(text, font) {
const span = document.createElement('span');
span.appendChild(document.createTextNode(text));
Object.assign(span.style, {
font: font,
margin: '0',
padding: '0',
border: '0',
whiteSpace: 'nowrap'
});
document.body.appendChild(span);
const {width, height} = span.getBoundingClientRect();
span.remove();
return {width, height};
}
/**
* Desenha o ponto na tela
* @param {*} context
* @param {*} x
* @param {*} y
* @param {*} circleRadius
* @param {*} fillStyle
* @param {*} labels
*/
function drawPoint(context,x,y,circleRadius,fillStyle,labels=null) {
context.beginPath();
context.fillStyle=fillStyle;
var point = new Path2D();
point.arc(x,y, circleRadius, 0, 2 * Math.PI);
context.fill(point);
if(labels)
{
drawTooltips(context,x,y,labels);
}
context.closePath();
}
/**
* Desenha o tooltip na tela
* @param {*} context
* @param {*} x
* @param {*} y
* @param {*} label
* @param {*} alignY
*/
function drawTooltip(context,x,y,label,alignY=10) {
const { width, height } = measureText(label, '8px Arial, Helvetica, sans-serif');
const reactWidth = width + 10;
const reactHeight = height + 10;
const reactX = x+12;
const reactY = y-alignY;
const labelX = reactX+((reactWidth-width)/2);
const labelY = reactY+12;
context.beginPath();
context.fillStyle = "black";
context.fillRect(reactX,reactY,reactWidth,reactHeight);
context.font = '8px Arial, Helvetica, sans-serif';
context.strokeStyle = 'white';
context.strokeText(label,labelX,labelY);
context.closePath();
}
/**
* Desenha todos os tooltips na tela
* @param {*} context
* @param {*} x
* @param {*} y
* @param {*} labels
*/
function drawTooltips(context,x,y,labels) {
for (const key in labels) {
if (Object.hasOwnProperty.call(labels, key)) {
const label = labels[key];
drawTooltip(context,x,y+(key*20),label,labels.length*10);
}
}
}const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
drawPoint(context,50,50,5,'black',[
'LOREM 1',
'Lorem ipsum dolor sit amet',
'View more'
]);
drawPoint(context,150,100,5,'black',[
'LOREM 2',
'Lorem ipsum dolor sit amet',
'View more'
]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17064913
复制相关文章
相似问题
腾讯云开发者
