0x0 Эффекты
Сначала о рендерах:
0x1 Причина
В приложении есть модуль документа.Эта часть представляет собой встроенную интерфейсную разработанную веб-страницу, которая поддерживает доступ в клиенте и WeChat.Есть функция, называемая подчеркиванием заметок, то есть после длительного нажатия на текст выделенный будет отображаться текст.Отметьте, это фон.
В процессе итерации требований продукт поднял некоторые вопросы о функции подчеркивания заметок, например, почему стили iOS и Android не одинаковы (используется собственный выбор системы долгим нажатием) и можно ли выделить текст с помощью одним щелчком мыши вы можете настроить стиль, можете ли вы выбрать положительные и отрицательные...
Я слышу это в своем сердце
В соответствии с принципом ладить с продуктом, я сразу сказал, что эти потребности велики, мне нужно хорошо подумать об этомкак отказаться.
0x2.Анализ
Конечно, идея есть идея, и вам еще нужно найти способ воплотить ее в жизнь.
С точки зрения требований к продукту, только моделируя длительный выбор системы, она может удовлетворить потенциальные потребности продукта на данном этапе и в будущем. Если вы имитируете выделение долгим нажатием, вам, вероятно, потребуется решить следующие проблемы:
- Необходимо отключить длительное нажатие системы для выбора текста
- Нужно получить точную позицию нажатого символа
- Должна быть возможность имитировать прямоугольный фон при выборе
0x3.Реализация
Просто для анализа, вероятно, может быть достигнуто:
Сначала добавьтеuser-select: noneстиль, который может напрямую отключить выделение текста системой;
Второй момент, API-интерфейс dom, который может получить позицию символа косвенно или напрямую, вероятно, только косвенно черезRange.getClientRects()
Третий момент, есть две изначально задуманные схемы, одна это вставка тегов прямо в текст, что неизбежно изменит структуру всего dom и повлияет на последующие отметки, поэтому принята вторая схема, добавление слоя svg напрямую, через svg многоугольники и прямоугольники для рисования
Наконец, см. конкретную реализациюGitHub.com/Logiclab/EA…, у нас есть это решение с открытым исходным кодом
Данная схема имеет следующие преимущества:
- Пользовательский стиль выбора
- Нажмите, чтобы выбрать текущее предложение
- Нажмите и удерживайте, чтобы выбрать текущее предложение
- прямой и обратный выбор
- Выделить выделенный текст
- ......
Нуждающиеся друзья приветствуют звезду, iusse, pr to go.
Статья впервые опубликована вЛо Цзи думает, что интерфейс знает колонку, добро пожаловать, чтобы следовать.