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

Question

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

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

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

Answer 1

Эйсом раньше был Mozilla Skywriter, а раньше - Mozilla Bespin.

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

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

Необходимо переопределить расположение курсора при помощи мыши.

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

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

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

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

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

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

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

Необходимо переопределить двунаправленное редактирование текста.

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

Необходимо переопределить выделение текста.

Необходимо переопределить перетаскивание выделенных фрагментов текста.

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

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

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

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

Answer 2

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