Ademir Antonio Comerlatto Junior
-
Total de itens
1 -
Registro em
-
Última visita
Sobre Ademir Antonio Comerlatto Junior
Ademir Antonio Comerlatto Junior's Achievements
0
Reputação
-
O código abaixo deve excluir o sinal atual, em cada coluna, sempre que um novo sinal for plotado. OK, ele faz isso, mas está deixando uma sombra branca em cima do sinal anterior como se tivesse "apagado", isso faz com que as linhas de fundo sejam apagadas. Podem me auxiliar a manter as linhas de fundo, sem esta sombra branca sobre elas? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> #canvas { border: 1px solid black; } table { border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid black; padding: 8px; text-align: center; } </style> </head> <body> <h2></h2> <p></p> <table id="audiogramTable" width="650" height="15"> </table> <br> <canvas id="canvas" width="650" height="400"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var pointSize = 8 // Tamanho do ponto preto var thresholds = new Map(); // Mapa para armazenar os limiares auditivos por frequência // Valores para o eixo x superior var xValues = [250, 500, 1000, 2000, 3000, 4000, 6000, 8000]; // Valores para o eixo y var yValues = [120, 115, 110, 105, 100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]; // Desenhar as colunas com os valores especificados no eixo x ctx.font = '12px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = 'black'; var totalWidth = canvas.width; // Largura total disponível para os valores do eixo x var columnWidth = totalWidth / xValues.length; // Largura de cada coluna for (var i = 0; i < xValues.length; i++) { var x = i * columnWidth; ctx.fillText(xValues[i], x + columnWidth / 2, 10); drawVerticalLine(x + columnWidth / 2, 20, canvas.height - 20); } // Desenhar as linhas horizontais e os valores do eixo y ctx.textAlign = 'right'; for (var i = 0; i < yValues.length; i++) { var y = mapYValueToCanvas(yValues[i]); ctx.fillText(yValues[i], 60, y + 4); drawHorizontalLine(0, canvas.width, y); } // Event listener para clique no canvas canvas.addEventListener('click', function(event) { var rect = canvas.getBoundingClientRect(); var mouseX = event.clientX - rect.left; var mouseY = event.clientY - rect.top; // Encontrar a frequência mais próxima do ponto clicado var closestX = findClosestX(mouseX); // Encontrar a intensidade mais próxima do ponto clicado var closestY = findClosestY(mouseY); // Verificar se já existe uma marcação na coluna clicada if (thresholds.has(closestX)) { // Remover a marcação existente var existingThreshold = thresholds.get(closestX); thresholds.delete(closestX); // Desenhar a nova marcação na nova posição ctx.clearRect(existingThreshold.x - pointSize, mapYValueToCanvas(existingThreshold.y) - pointSize, pointSize * 2, pointSize * 2); } // Armazenar o limiar auditivo na nova posição thresholds.set(closestX, { x: closestX, y: closestY }); // Desenhar o ponto no canvas ctx.beginPath(); ctx.arc(closestX, mapYValueToCanvas(closestY), pointSize, 0, 2 * Math.PI); ctx.fillStyle = 'black'; ctx.fill(); }); // Função para mapear valores de y para o canvas function mapYValueToCanvas(yValue) { return (yValue / 120) * (canvas.height - 40) + 20; } // Função auxiliar para desenhar linhas verticais function drawVerticalLine(x, y1, y2) { ctx.beginPath(); ctx.moveTo(x, y1); ctx.lineTo(x, y2); ctx.strokeStyle = '#bbb'; ctx.stroke(); } // Função auxiliar para desenhar linhas horizontais function drawHorizontalLine(x1, x2, y) { if (y % 10 !== 5 && yValues.indexOf(y) !== yValues.length - 1) { var reducedLength = (x2 - x1) * 0.9; var newX2 = x1 + reducedLength; ctx.beginPath(); ctx.moveTo(x1, y); ctx.lineTo(newX2, y); ctx.strokeStyle = '#ddd'; ctx.stroke(); } } // Função para encontrar a frequência mais próxima do ponto clicado function findClosestX(x) { var columnWidth = canvas.width / xValues.length; var columnIndex = Math.floor(x / columnWidth); return (columnIndex + 0.5) * columnWidth; } // Função para encontrar a intensidade mais próxima do ponto clicado function findClosestY(y) { var closestY = yValues[0]; var minDistance = Math.abs(mapYValueToCanvas(closestY) - y); for (var i = 1; i < yValues.length; i++) { var distance = Math.abs(mapYValueToCanvas(yValues[i]) - y); if (distance < minDistance) { closestY = yValues[i]; minDistance = distance; } } return closestY; } </script> </body> </html>
