AJUDA click com o mouse.

Ademir Antonio Comerlatto Junior · Abril 22

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>

// 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>

Entrar

AJUDA click com o mouse.

Pergunta

Ademir Antonio Comerlatto Junior

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades