É necessária a criação de uma página de cartão-convite, na qual a quantidade de palavras do título é dinâmica e pode exibir até 2 linhas. Caso ultrapasse 2 linhas, serão adicionadas reticências ao final da segunda linha do conteúdo. De acordo com a personalidade da garota do produto, há uma grande chance de que a configuração de quatro linhas seja alterada no futuro, por isso não deve ser codificada aqui. Como resultado, há alguns dias, eu realmente pedi para fazer isso. altere-o para exibir até 4 linhas e as demais permanecem as mesmas. A garota do produto é muito jovem :)!
Sem mais delongas, aqui está o código para mostrar! Antes de carregar o código, dê uma olhada nos parâmetros que precisam ser passados! !
Descrições de parâmetros com imagens e textos, perdoe-me pela minha impaciente tecnologia e design PS
// Função de quebra automática de linha de texto textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = '' // O conteúdo atualmente desenhado var drawLine = 1; = 0; // Índice do conteúdo do desenho atual // Determina se o conteúdo pode ser desenhado em uma linha if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY } else { for (var i = 0; i <= content.length; i++) { drawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // Adicione reticências à última linha ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY } else { // Se não for a última linha, ctx.fillText(); content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // Registra o próximo idnex da última string da linha atual, que é usado para desenhar a primeira palavra da próxima linha drawLine; += 1; // Número de linhas + 1 drawY += lineHeight; // A coordenada y do conteúdo desenhado aumenta a altura da linha adequadamente drawTxt = ''; descoberta inesperadaNo processo de desenho do texto, descobri que a coordenada y do desenho do texto deveria ser baseada no topo do texto. Uma imagem vale mais palavras, a imagem acima!
Ambiente do navegador: chrome 71.0.3578.98 (versão oficial) (64 bits)
O tamanho da fonte é 40px
Quando a coordenada y desenhada é 0, você pode ver que o texto vaza apenas um pouco no canto superior esquerdo.Quando a coordenada y é desenhada em 40, você pode ver que o texto pode ser totalmente exibido
pós-escritoEste é um efeito de código relativamente impopular, mas espero que possa ajudar os amigos necessitados. Também espero que todos apoiem a Rede VeVb Wulin.