Использование элемента холста в качестве текста

Question

Я ищу прямое описание того, как использовать элемент Canvas вроде текстовой области.

Я видел такие проекты, как Туз. Анкет Просто интересно, как писать в область, как будто это там, где текстовая сфера. Просто простой текст, ничего особенного.

Заранее спасибо.

Answer 1

Айс раньше был мозиллой Skywriter, который раньше был Mozilla Bespin.

Код для Bespin на самом деле довольно прост в понимании, если вы хотите копаться через него и сделать свой собственный, основываясь на нем, но это своего рода поручение дурака. Спецификация холста на самом деле советует конкретно против этого:

Авторы должны избегать реализации элементов управления редактированием текста с помощью элемента Canvas. Это имеет большое количество недостатков:

Расположение мыши карета должно быть переопределено.

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

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

Нативные функции, такие как копия и вставка, должны быть переопределены.

Нативные функции, такие как проверка орфографии, должны быть переопределены.

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

Нативные функции, такие как текстовый поиск по всей странице, должны быть переосмыслены.

Нативные функции, специфичные для пользователя, например, на пользовательских текстовых службах, должны быть переопределены. Это близко к невозможности, так как у каждого пользователя могут быть установлены разные службы, и существует неограниченный набор возможных таких услуг.

Редактирование двунаправленного текста должно быть переопределено.

Для многослойного редактирования текста необходимо реализовать обертывание линии для всех соответствующих языков.

Выбор текста должен быть переосмыслен.

Затягивание двунаправленного выбора текста должно быть переопределено.

Платформовые сочетания клавиатуры должны быть переосмысливаны.

Редакторы метода ввода платформы (IMES) должны быть переопределены.

Функциональность отмены и повторения должны быть переосмыслены.

Функции доступности, такие как увеличение после кареты или выбора, должны быть переопределены. Это огромный объем работы, и авторам наиболее настоятельно рекомендуется избегать выполнения чего -либо из этого, вместо этого используя входной элемент, элемент Textarea или атрибут довольного.

Answer 2

Проверка живой демонстрации с Chrome показывает, что они используют DOV и простирания для достижения этого. Мигающий курсор - это Div, который, кажется, переключается между скрытым и видимым на регулярной основе. Я думаю, что они просто проверяют нажатую клавишу с события и записывают ее на соответствующий промежуток для строки.