Ответ 1
Выбор текста имеет много компонентов для него, некоторые визуальные, некоторые не визуальные.
Во-первых, сделайте выбор текста, вы должны сохранить массив, где текст, что текст и какой шрифт был использован. Вы будете использовать эту информацию с помощью функции Canvas measureText.
Используя measureText, с вашей текстовой строкой вы можете определить, на какую букву курсор должен приземлиться, когда вы нажимаете на изображение.
ctx.fillText("My String", 100, 100);
textWidth = ctx.measureText("My String").width;
Вам все равно придется разбирать высоту шрифта из свойства "font", поскольку в настоящее время он не включен в текстовые метрики. Текст холста выровнен к базовой линии по умолчанию.
С этой информацией у вас теперь есть ограничивающая рамка, с которой вы можете проверить. Если курсор находится внутри ограничивающей рамки, теперь у вас есть неудачная задача выведения которое было намеренно выбрано; где должно быть размещено начало вашего курсора. Это может включать несколько раз вызов measureText.
В этот момент вы знаете, куда должен идти курсор; вам нужно будет текстовую строку как текстовую строку, в переменной, конечно.
После того, как вы определили точки старта и остановки вашего диапазона, вы должны сделать индикатор выбора. Это можно сделать в новом слое (второй элемент холста), или путем рисования прямоугольника с использованием режима композиции XOR. Это также можно сделать просто очистка и перерисовка текста поверх заполненного прямоугольника.
Все сказанное, выбор текста, редактирование текста в Canvas довольно трудоемкий, чтобы программировать, и было бы разумно повторно использовать компоненты, уже написанные, Bespin - отличный пример.
Я отредактирую свой пост, если мне удастся найти другие публичные примеры. Я считаю, что Bespin использует метод выбора на основе сетки, возможно, требующий моноширинного шрифта. Лигатуры, кернинг, двунаправленность и другие дополнительные функции визуализации шрифтов требуют дополнительного программирования; это сложная проблема.