0

Estou a tentar fazer uma ferramenta de texto de uma aplicação de desenho com uma input box, usando a livraria CanvasInput.

Eu consigo aplicar o texto que escrevo no canvas ao clicar no enter, mas não estou a conseguir remover a input box de lá depois de aplicar o texto.

Da forma que tentei com input.destroy(); a input box deixa de funcionar mas continua a aparecer no canvas e não consigo voltar a usar a ferramenta de texto.

Alguém sabe como remover a input box do canvas?

Projecto

Screenshot

JS

var inputBox=0;
var input;

function text(e) {
  console.log(e.target);
  console.log(e.target.value);

  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);
  input.destroy();
}

function drawText(ctx,x,y,size) {
    if (inputBox==0){
        inputBox=1;
           input = new CanvasInput({
              x: mouseX,
              y: mouseY,
              canvas: document.getElementById('sketch'),
              fontSize: 18,
              fontFamily: 'Arial',
              fontColor: '#212121',
              fontWeight: 'bold',
              width: 200,
              padding: 8,
              borderWidth: 1,
              borderColor: '#000',
              borderRadius: 3,
              boxShadow: '1px 1px 0px #fff',
              innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
              placeHolder: 'Enter message here...',
              onsubmit : text
        });
    }
}
2
  • E quanto ao HTML?
    – Aline
    Commented 14/06/2017 às 16:37
  • No HTML penso que não tem nada relevante para o problema, no entanto tem um link do projecto completo com o código todo.
    – Pedro
    Commented 14/06/2017 às 16:51

1 Resposta 1

0

Hey o problema é que ao desenhar no canvas através de JS a única maneira de remover esse elemento é voltar a redesenhar o canvas.

Então deves fazer algo como isto:

  //Limpar o canvas, ou seja a inputbox que já lá estava (se não me engano)
  ctx.clearRect(0, 0, canvas.width, canvas.height); 

  //E prosseguir a preencher o canvas 
  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);

Qualquer dúdiva por favor comenta.

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 .