Este artigo apresenta como resolver o problema de quebra de linha de drawText durante o processo de desenho da tela. Vejamos primeiro um problema que todos geralmente encontram ao desenhar texto na tela:
Uma tela 150*100 com borda transparente
<canvas id=canvas style=border:solid 1px darkgoldenrod width=200px height=100px></canvas>
Vejamos primeiro o método fillText(), e o método strokeText() é o mesmo.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); obrigado!ctx.fillText(str,0,20);
Você pode ver que fillText() não será quebrado automaticamente quando houver muitas palavras em uma tela de largura fixa. Podemos aumentar a largura da tela em si, mas esta não é a maneira fundamental de resolver o problema. Ainda me lembro que quando apresentei a API básica do canvas antes, havia uma função, context.measureText(text) Essa função pode medir a largura e a altura da fonte, o que é fácil de manusear. e adicione uma largura aproximada. Basicamente, esse problema de quebra de linha pode ser resolvido.
Vejamos o método de implementação específico:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); obrigado!var lineWidth = 0;var canvasWidth = c.width;//Calcular a largura da tela var initHeight=15;//A altura inicial da fonte desenhada a partir do topo da tela var lastSubStrIndex= 0; A string interceptada cada vez Index of for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//Desenhe a parte interceptada initHeight+=20;//20 é a altura da fonte lineWidth=0; eu; } if(i==str.length-1){//Desenhe a parte restante ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight }}Veja as renderizações:
Algoritmo: Calcule a soma da largura e lineWidth de cada caractere da string str. Se for maior que a largura da tela, intercepte esta parte para desenho, depois redefina o lineWidth, salve o último índice onde a interceptação começou e quando a variável de loop i for o último caractere, desenhe as partes restantes diretamente.
Próximo: Nós o encapsulamos em um método para que possa ser chamado diretamente mais tarde:
/*str: string a ser desenhada canvas: objeto canvas initX: iniciando a coordenada x da string de desenho initY: iniciando a coordenada y da string de desenho lineHeight: altura da linha da palavra, você mesmo pode definir um valor */function canvasTextAutoLine(str, canvas, initX,initY,lineHeight){ var ctx = canvas.getContext(2d); lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//Subtraia initX para evitar problemas com limites ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.