0

Estou a trabalhar numa aplicação web que tem uma framework, esta framework foi desenvolvida em ASP.net, sendo que nela posso adicionar javascript aos ecrãs. Num dos ecrãs adicionei uma assinatura digital, em que escreve num quadro "canvas" á medida que detecta eventos dos ratos ou do touch, de seguida guardo os dados na base de dados.

Este javascript executa um onload dentro de um onready fazendo um appendChild a um elemento do ecrã de origem. Desta forma adiciono a minha assinatura digital ao ecrã original.

A minha assinatura digital é um Canvas 2d responsivo. Com o canvas responsivo, é necessário ter um backup do canvas sempre que este recebe alterações nas dimensões, porque sempre que as dimensões do canvas são alteradas todo o seu conteudo é limpo. Desta forma, adicionei um evento window.onresize que desenha o meu backup no canvas, após fazer set da width e da height.

Na próxima secção desta pergunta, deixarei a negrito análises do ponto de vista do programador, em bold normal análises do ponto de vista do utilizador.

O utilizador carrega a página, são disparados onready, onload, dentro do onload adiciono elementos ao DOM

var stringAssina = "<canvas id="quadro" style="display:block;overflow: hidden;width: calc(100% - 10px);height:400px;border:1px solid"></canvas>";

jQuery(document).ready(function() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(function () {

        jQuery(stringAssina).insertAfter("#ctl00_conteudo_pbDadosMB");

        // recarrega canvas com dimensões da janela
        window.onresize = function(event) {
             var quadro = document.getElementById('quadro');
             quadro.width = quadro.clientWidth;
             quadro.height = quadro.clientHeight;
             console.log('resize');
             var img = new Image;
             img.onload = function() {
             var ctx = quadro.getContext("2d");
             ctx.drawImage(img, 0, 0, quadro.clientWidth, quadro.clientHeight);
              };
              img.src = dataURL;

Neste momento o utilizador com os eventos do rato ou touch, ao tentar escrever no canvas. Estará a escrever em sitios que não correspondem ás coordenadas dos rato. Isto porque o canvas.width e canvas.height são undifined. Para resolver este problema ainda no onload, preciso fazer set no canvas.width e canvas.height, desta forma estaremos a escrever nos sítios certos. Por isso, ainda no onload tenho

          var img = new Image;
          var quadro = document.getElementById('quadro');
                   console.log(quadro.clientWidth);
                  quadro.width = quadro.offsetWidth;
                  quadro.height = quadro.offsetHeight;
                  var img = new Image;
          img.onload = function() {
            var ctx = quadro.getContext("2d");
            ctx.drawImage(img, 0, 0, quadro.offsetWidth, quadro.offsetHeight);
          };
          img.src = dataURL;

Este código faz set das dimensões do canvas para 0. Ou seja o quadro.offsetWidth and quandro.offsetHeight são 0.

Conclusão: O meu código funciona a partir do momento que faço um reajuste na janela. O canvas offsetWidth and offsetHeight estão a 0.

Nota: ao código citado não foram adicionados os eventos de escrita no canvas, estes eventos existem dentro do onload.

[UPDATE - 11-06-2019 14:18]

Passei a fazer o insertAfter dentro do ready. O clientWidth e o offsetWidth do canvas, continuam a ser 0 na primeira ocorrencia do onload. Consegui resolver indo buscar a largura do pai, no entanto eticamente não é eficiente, porque deveria ser possível buscar a largura do canvas no primeiro onload.

1 Resposta 1

0

Para adicionares elementos ao DOM deves fazê-lo no ready, pois o onload só acontece depois de toda a DOM e conteúdo (imagens, etc.) estarem carregados. A manipulação dos elementos que adicionares deve acontecer depois de garantires que esses já existem ou em eventos seguintes, como é o caso do onload.

E atenção que poderás ter uma diferença no tamanho do canvas uma vez que estás a tentar obter duas a sua dimensão através de propriedades diferentes.

clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
offsetWidth is the outer width (ie. the space occupied by the element, including padding and borders) scrollWidth is the total width including stuff that is only visible if you scroll

Se necessário cria um JSFiddle para que te possamos ajudar melhor.

8
  • Obrigado pelo teu contributo. Na verdade melhorou o meu código, contudo o clientWidth do canvas continua a 0 no onload. Consegui resolver alternativamente, peguei no elemento pai e fui buscar o offsetWidth.
    – Pedro C.
    11/06/2019 às 13:16
  • Quando inseria o elemento dinamicamente no onload(agora com a tua ajuda coloquei no onready) conseguia pegar na mesma na largura do pai, e fazer set do canvas. No entanto, alguma coisa setava ele de novo para 0.
    – Pedro C.
    11/06/2019 às 13:17
  • Talvez algum conteúdo que fosse acrescentado na página fizesse os elementos ajustar as dimensões, mas é um long shot esta teoria. Ainda bem que resolveste!
    – iamdlm
    11/06/2019 às 13:41
  • Surgiram novos problemas, nesta página em que estou a adicionar elementos via javascript. existem botões que fazem executar o onload, sem executar o ready. Digo isto porque os elementos que insiro no ready, deixam de aparecer no html, ou no DOM.
    – Pedro C.
    11/06/2019 às 13:43
  • 1
    Consegui dar a volta, no onload fiz if(!document.getElementById(mycanvas)) adiciono o canvas e faço set das dimensões do pai.
    – Pedro C.
    11/06/2019 às 14:19

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 .