2013-06-22 3 views
0

Я ищу способ рисовать многострочный текст на элементе canvas непосредственно без использования HTML/DOM. Лучшим сценарием будет поиск библиотеки JavaScript, но мои попытки Google не придумали ничего.Как сделать богатый набор текста для текста в элементе холста?

В идеале было бы иметь следующие функциональные возможности:

  • Возможность задать стили абзаца: первой строки абзаца, межстрочный интервал и т.д.
  • Быстрая и надежная реализация алгоритмов текста оборачивания с выравнивающей/обоснование варианты
  • форматирование текста через некоторое упрощенное подмножество HTML или Markdown и т.д.

Я в надежде найти решение, которое немного более продвинутый т han this tutorial и this answer, которые просто касаются базового слова/линии упаковки.

Кто-нибудь знает о любом возможном решении? Может показаться, что это сумасшедшая вещь, но думаю, что у меня есть довольно хорошее оправдание! Я оцениваю Ejecta как возможную среду iOS, чтобы сделать кросс-платформенную игру, которая опирается на текст с красивой типографикой, поэтому HTML и DOM недоступны. (We сделать в основном текстовые игры)

+0

Это: https://github.com/bramstein/typeset содержит хорошую линию нарушение алгоритма, включая различные варианты выравнивания текста, в Hyphenator, и использует 'measureText' холста функция, хотя выходы как 'span'. Можно использовать, хотя в сочетании с базовым рендерером линии. –

+1

Мы поддерживаем многострочный рендеринг текста в [fabric.js] (http://fabricjs.com), а также семейство шрифтов, выравнивание текста, текстовое оформление, штрих текста и т. Д. Нет встроенной автоматической упаковки, но вы должны уметь расширять класс 'fabric.Text' и работать оттуда. – kangax

+0

Спасибо @kangax, выглядит довольно мощно! –

ответ

0

Холст имеет минимальную текстовую поддержку, как вы обнаружили.

Чтобы получить богатые текстовые возможности, посмотрите исходный код для TinyMCE.

TinyMCE - это широко используемый широко используемый текстовый редактор на основе javascript, который находится в активной разработке. Он имеет отличные функции и широко используется, а активная разработка позволяет в значительной степени отлаживать и использовать богатый код.

Вы можете начать с этой рамки и потянуть куски, которые вам нужны для использования в холсте.

Проект доступен здесь: https://github.com/tinymce/tinymce

+0

Выглядит многообещающе, спасибо! Я посмотрю ... –

+0

Не похоже, что он использует холст, и поэтому не требует какого-либо специального кода для реализации переноса/форматирования текста и т. Д.? Кажется, используется встроенный iframe ... –