Необходимо создать страницу пригласительного билета, на которой количество слов в заголовке является динамическим и может отображать до 2 строк. Если оно превышает 2 строки, в конце второй строки контента будет добавлено многоточие. По словам девушки-разработчика, существует высокая вероятность того, что настройка четырех строк будет изменена в будущем, поэтому ее не следует жестко запрограммировать здесь. В результате несколько дней назад я действительно попросил об этом. измените его, чтобы отображалось до 4 строк, а остальные останутся прежними. Продавщица слишком молода :)!
Без лишних слов, вот код, которым можно похвастаться! Прежде чем загружать код, взгляните на параметры, которые необходимо передать! !
Описания параметров с картинками и текстами, простите меня за нетерпеливость ПС по технологии и дизайну
// Функция автоматического переноса строк текста textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = '' // Текущее рисуемое содержимое var drawLine = 1 // Какую строку начать рисовать var drawIndex; = 0; // Индекс текущего содержимого рисования // Определяем, можно ли отобразить содержимое в одну строку 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) { // Добавьте многоточие в последнюю строку ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY);break; } else { // Если это не последняя строка, ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1 // Записываем следующий идентификатор последней строки текущей строки, который используется для рисования первого слова следующей строки drawLine; += 1; // Количество строк + 1 drawY += lineHeight; // Координата y нарисованного содержимого соответственно увеличивает высоту строки drawTxt = '' // Сбрасываем нарисованное содержимое } } } }} неожиданное открытиеВ процессе рисования текста я обнаружил, что координата y рисуемого текста должна располагаться относительно верхней части текста. Изображение стоит большего количества слов, изображение выше!
Среда браузера: chrome 71.0.3578.98 (официальная версия) (64-разрядная версия)
Размер шрифта 40 пикселей.
Когда нарисованная координата y равна 0, вы можете видеть, что текст немного вытекает только в верхнем левом углу.Когда координата Y нарисована на отметке 40, вы можете видеть, что текст может отображаться полностью.
постскриптумЭто относительно непопулярный эффект кода, но я надеюсь, что он поможет нуждающимся друзьям. Я также надеюсь, что все поддержат сеть VeVb Wulin.