Текст переносится в <холст> элемент
Я пытаюсь добавить текст на изображении с помощью <canvas> элемент. Сначала изображение оттянуто, и на изображении оттянут текст.Пока все хорошо.
Но то, где я сталкиваюсь с проблемой, - то, что, если текст является слишком длинным, он отключен в запуске и конце холстом. Я не планирую изменить размер холста, но я задавался вопросом, как перенести длинный текст в несколько строк так, чтобы все это было отображено. Кто-либо может указать на меня на правильное направление?
2 ответа
посмотрите на https://developer.mozilla.org/en/Drawing_text_using_a_canvas#measureText%28%29
. Если вы видите выделенный текст, он шире, чем ваш холст, вы можете удалять слова, пока текст не станет достаточно коротким. После удаления слов вы можете начать со второй строки и сделать то же самое.
Конечно, это будет не очень эффективно, поэтому вы можете улучшить его, удалив не одно слово, а несколько слов, если вы видите, что текст намного шире, чем ширина холста.
Я не исследовал, но, возможно, это даже библиотеки javascript, которые делают это за вас
context.measureText (text) .width - это то, что вы ищете ...