Jump to content
Fórum Script Brasil
  • 0

AJUDA click com o mouse.


Question

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>

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.7k
×
×
  • Create New...