1

Olá, estou aprendo programação, e já estou em um desafio para conseguir atualizar um desenho feito com a função em cavas, a partir de um arquivo xml, estou tentando com javaScript. Utilizando o mouse ja consegui o efeito desejado, mas quando tento extrair os dados do arquivo xml, os resultados não são os mesmo. Obrigado.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<!--    <meta http-equiv="refresh" content="5"> -->
    <title>Teste 6</title>
    <script>
        function atualiza(){

            var largura = 200;
            var altura = 200;

            var quadro = document.getElementById("quadro");
            quadro.setAttribute("width", largura);
            quadro.setAttribute("height", altura);
            var pincel = quadro.getContext("2d");


            pincel.beginPath();    
            pincel.font="12px Verdana";
            pincel.fillStyle="white";
            pincel.fillText("Teste 06",60,10);


            var desenhando = false;

            quadro.onmousedown = function (evt) {
                desenhando = true;

                pincel.beginPath();
                pincel.arc(100,100,50,0,2*Math.PI);
                pincel.fillStyle= 'red';
                pincel.strokeStyle= '#003300';
                pincel.lineWidth= 5;
                pincel.fill(); 
                pincel.stroke();

            }

            quadro.onmouseup = function () {
                desenhando = false; 

                pincel.beginPath();
                pincel.arc(100,100,50,0,2*Math.PI);
                pincel.fillStyle= 'blue';
                pincel.strokeStyle= '#003300';
                pincel.lineWidth= 5;
                pincel.fill(); 
                pincel.stroke();

            }

 /*           quadro.getElementById = function () {
//            document.getElementById("quadro").innerHTML = (getXMLValue(xmlData, 'btn(0)') == 'up') ? desenhando = true; : desenhando = false; {

//            window.onload = function (){
                 if (desenhando) {
                        pincel.beginPath();
                        pincel.arc(100,100,50,0,2*Math.PI);
                        pincel.fillStyle= 'red';
                        pincel.strokeStyle= '#003300';
                        pincel.lineWidth= 5;
                        pincel.fill(); 
                        pincel.stroke();

 
                    }
                    if(!desenhando)  {
     
                        pincel.beginPath();
                        pincel.arc(100,100,50,0,2*Math.PI);
                        pincel.fillStyle= 'blue';
                        pincel.strokeStyle= '#003300';
                        pincel.lineWidth= 5;
                        pincel.fill(); 
                        pincel.stroke();


                    }
            }
*/

        }

    window.setInterval("atualiza()", 1000);
    </script>

</head>
<body onload="atualiza()">  <!-- background Cor da caixa -->
    <div style="background-color: red"> <h1 style="color:white;">Teste 06</h1></div>
    <div> <canvas id="quadro" style="background:#363636"></canvas></div>
</body>
</html>

Arquivo xml

<response>

    <BTN0>~btn(0)~</BTN0>

</response>

1 Resposta 1

0

Tens que definir as variáveis globalmente. Definir os eventos quando a janela carrega e definir o booleano para verdadeiro ou falso de cada vez que atualiza.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<!--    <meta http-equiv="refresh" content="5"> -->
    <title>Teste 6</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        

        var quadro, pincel;
        var largura = 200;
        var altura = 200;
        var desenhando = false;

        window.onload = function() {
            quadro = document.getElementById("quadro");
            quadro.setAttribute("width", largura);
            quadro.setAttribute("height", altura);
            pincel = quadro.getContext("2d");

            quadro.onmousedown = function () {
                desenhando = true;
            }

            quadro.onmouseup = function () {
                desenhando = false; 
            }
        }

        function atualiza(){
            pincel.beginPath();    
            pincel.font="12px Verdana";
            pincel.fillStyle="white";
            pincel.fillText("Teste 06",60,10);

            (getXMLValue(xmlData, 'btn(0)') == 'up') ? desenhando = true : desenhando = false;

            if (desenhando) {
                pincel.beginPath();
                pincel.arc(100,100,50,0,2*Math.PI);
                pincel.fillStyle= 'red';
                pincel.strokeStyle= '#003300';
                pincel.lineWidth= 5;
                pincel.fill(); 
                pincel.stroke();
            }
            if(!desenhando)  {
                pincel.beginPath();
                pincel.arc(100,100,50,0,2*Math.PI);
                pincel.fillStyle= 'blue';
                pincel.strokeStyle= '#003300';
                pincel.lineWidth= 5;
                pincel.fill(); 
                pincel.stroke();
            }

        }

    window.setInterval("atualiza()", 1000);
    </script>

</head>
<body>  <!-- background Cor da caixa -->
    <div style="background-color: red"> <h1 style="color:white;">Teste 06</h1></div>
    <div> <canvas id="quadro" style="background:#363636"></canvas></div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .