Não consigo adicionar texto a uma tela se o texto inclui "\ n". Quer dizer, as quebras de linha não mostram / funcionam.
ctxPaint.fillText("s ome \n \\n <br/> thing", x, y);
O código acima será desenhado "s ome \n <br/> thing"
em uma linha.
Isso é uma limitação do fillText ou estou fazendo errado? os "\ n" estão lá e não são impressos, mas também não funcionam.
fillText()
várias vezes e use a altura da fonte para separar ou use developer.mozilla.org/en-US/docs/Web/API/TextMetrics developer.mozilla.org/en-US/docs/Web/API /… - ou, use uma das "soluções" muito complicadas abaixo que não usam TextMetrics ...Respostas:
Receio que seja uma limitação do Canvas '
fillText
. Não há suporte para várias linhas. O que é pior, não há uma maneira embutida de medir a altura da linha, apenas a largura, tornando ainda mais difícil fazer você mesmo!Muitas pessoas escreveram seu próprio suporte multi-linha, talvez o projeto mais notável que tem é o Mozilla Skywriter .
A essência do que você precisa fazer são várias
fillText
chamadas enquanto adiciona a altura do texto ao valor y a cada vez. (medir a largura de M é o que o pessoal do skywriter faz para aproximar o texto, acredito.)fonte
measureText()
foram adicionadas, o que eu acho que podem resolver o problema. O Chrome tem um sinalizador para ativá-los, mas outros navegadores não ... ainda!Se você apenas deseja cuidar dos caracteres de nova linha no texto, você pode simular dividindo o texto nas novas linhas e chamando várias vezes o
fillText()
Algo como http://jsfiddle.net/BaG4J/1/
Acabei de fazer uma prova de conceito de empacotamento ( envoltório absoluto na largura especificada. Sem quebra de palavras de manipulação, ainda )
exemplo em http://jsfiddle.net/BaG4J/2/
E uma prova de conceito de quebra de linha ( quebra de espaços ).
exemplo em http://jsfiddle.net/BaG4J/5/
No segundo e terceiro exemplos, estou usando o
measureText()
método que mostra quanto tempo ( em pixels ) uma string terá quando impressa.fonte
Talvez chegue a esta festa um pouco tarde, mas achei o seguinte tutorial para embrulhar texto em uma tela perfeito.
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
A partir disso, pude pensar em fazer várias linhas funcionarem (desculpe Ramirez, a sua não funcionou para mim!) Meu código completo para quebrar o texto em uma tela é o seguinte:
Onde
c
está o ID da minha tela etext
é o ID da minha caixa de texto.Como você provavelmente pode ver, estou usando uma fonte fora do padrão. Você pode usar @ font-face contanto que tenha usado a fonte em algum texto ANTES de manipular a tela - caso contrário, a tela não pegará a fonte.
Espero que isso ajude alguém.
fonte
Divida o texto em linhas e desenhe cada uma separadamente:
fonte
Esta é minha solução, modificando a popular função wrapText () que já é apresentada aqui. Estou usando o recurso de prototipagem do JavaScript para que você possa chamar a função do contexto da tela.
Uso básico:
Aqui está uma demonstração que fiz: http://jsfiddle.net/7RdbL/
fonte
Acabei de estender o CanvasRenderingContext2D adicionando duas funções: mlFillText e mlStrokeText.
Você pode encontrar a última versão no GitHub :
Com essas funções, você pode preencher / traçar texto miltiline em uma caixa. Você pode alinhar o texto verticalmente e horizontalmente. (Leva em consideração \ n's e também pode justificar o texto).
Os protótipos são:
função mlFillText (texto, x, y, w, h, vAlign, hAlign, lineheight); função mlStrokeText (texto, x, y, w, h, vAlign, hAlign, lineheight);
Onde vAlign pode ser: "top", "center" ou "button" E hAlign pode ser: "left", "center", "right" ou "justify"
Você pode testar a lib aqui: http://jsfiddle.net/4WRZj/1/
Aqui está o código da biblioteca:
E aqui está o exemplo de uso:
fonte
Uncaught ReferenceError: Words is not defined
Se eu tentar mudar a fonte. Por exemplo:ctx.font = '40px Arial';
- tente colocar isso no seu violinoWords
variável (sensível a maiúsculas e minúsculas) vem ?? Não está definido em lugar nenhum. Essa parte do código só é executada quando você altera a fonte ..for in
que não funciona bem com estendidoArray.prototype
. Você poderia colocá-lo no github para que possamos iterar nele?Usando javascript desenvolvi uma solução. Não é bonito, mas funcionou para mim:
Espero que ajude!
fonte
O código para quebra de linha (quebra de espaços) fornecido por @Gaby Petrioli é muito útil. Eu estendi seu código para fornecer suporte para caracteres de nova linha
\n
. Além disso, muitas vezes é útil ter as dimensões da caixa delimitadora, portanto,multiMeasureText()
retorna a largura e a altura.Você pode ver o código aqui: http://jsfiddle.net/jeffchan/WHgaY/76/
fonte
Esta é uma versão do Colin
wrapText()
que também oferece suporte a texto centralizado verticalmente comcontext.textBaseline = 'middle'
:fonte
Se você só precisa de duas linhas de texto, pode dividi-las em duas chamadas fillText diferentes e dar a cada uma uma linha de base diferente.
fonte
Esta questão não está pensando em termos de como a tela funciona. Se você quiser uma quebra de linha, basta ajustar as coordenadas da próxima
ctx.fillText
.fonte
Acho que você ainda pode contar com CSS
Felizmente, por meio de hackear CSS (consulte Métricas tipográficas para obter mais maneiras de corrigir implementações mais antigas de usar medições CSS), podemos encontrar a altura do texto medindo o offsetHeight de um com as mesmas propriedades de fonte:
de: http://www.html5rocks.com/en/tutorials/canvas/texteffects/
fonte
ctx.save()
, em seguida,ctx.font = '12pt Arial'
em seguida,parseInt( ctx.font, 10 )
. Observe que eu uso 'pt' ao configurá-lo. Em seguida, será traduzido em PX e poderá se transformar em um dígito para consumo como a altura da fonte.Criei uma pequena biblioteca para este cenário aqui: Canvas-Txt
Ele renderiza o texto em várias linhas e oferece modos de alinhamento decentes.
Para usar isso, você precisará instalá-lo ou usar um CDN.
Instalação
JavaScript
Isso renderizará o texto em uma caixa invisível com posição / dimensões de:
Exemplo de violino
fonte
ctx.fillText(txtline.trim(), textanchor, txtY)
eu só percebi isso na demonstração interativa do seu site.2.0.9
versão. O site de demonstração é corrigido com a atualização da versão do pacote. Há um problema com vários espaços. Não sei se é melhor ir com um pacote opinativo ou ignorar o problema. Tenho recebido pedidos para isso de vários lugares. Eu fui em frente e acrescentei o corte de qualquer maneira.Lorem ipsum dolor, sit <many spaces> amet
esta foi a razão pela qual eu não fiz isso em primeiro lugar. O que você acha que devo considerar vários espaços e remover apenas se houver apenas um?Também não acho que isso seja possível, mas uma solução alternativa para isso é criar um
<p>
elemento e posicioná-lo com Javascript.fonte
fillText()
estrokeText()
, você pode fazer coisas além do que o CSS pode fazer.Eu me deparei com isso devido a ter o mesmo problema. Estou trabalhando com tamanho de fonte variável, então isso leva isso em consideração:
onde .noteContent é o div contenteditable que o usuário editou (aninhado em um jQuery em cada função) e ctx.font é "14px Arial" (observe que o tamanho do pixel vem primeiro)
fonte
O elemento Canvas não oferece suporte a caracteres como nova linha '\ n', tab '\ t' ou tag <br />.
Tente:
ou talvez várias linhas:
fonte
Minha solução ES5 para o problema:
Mais informações sobre o assunto estão no meu blog .
fonte