Как сделать текст холста можно выбрать?
Я знаю для того, что для доступа к необщим каталогам целевой машины, необходимо сделать что-то как \machinename\c$, где c$ представляет C:\ drive. Я не уверен, если это так, в этом случае.
6 ответов
Выделение текста имеет много компонентов, некоторые визуальные и некоторые невизуальные.
Во-первых, сделайте текст доступным для выбора, вы должны сохранить массив, где находится текст, что это за текст, и какой шрифт использовался. Вы будете использовать эту информацию с функцией Canvas measureText.
Используя measureText, с вашей текстовой строкой, вы можете определить, на какую букву должен попасть курсор, когда вы щелкаете изображение.
ctx.fillText("My String", 100, 100);
textWidth = ctx.measureText("My String").width;
Вам все равно придется анализировать высота шрифта из свойства "font", поскольку в настоящее время он не включается в текстовые показатели. Текст холста выровнен по умолчанию на базовый уровень.
С этой информацией теперь у вас есть ограничивающая рамка, которую вы можете проверить. Если курсор находится внутри ограничивающей рамки, теперь у вас есть досадная задача вывести какая буква была выбрана намеренно; где должно быть начало вашего курсора. Это может включать вызов метода measureText несколько раз.
В этот момент вы знаете, куда должен идти курсор; вам нужно будет хранить свой текстовая строка в виде текстовой строки, конечно же в переменной.
После того, как вы определили начальную и конечную точки вашего диапазона, вы должны нарисовать индикатор выбора. Это можно сделать на новом слое (второй элемент холста), или рисованием прямоугольника с использованием режима композиции XOR. Это также можно сделать просто очистить и перерисовать текст поверх заполненного прямоугольника.
В общем, выделение текста, редактирование текста в Canvas довольно трудоемко для программирования, и было бы разумно повторно использовать уже написанные компоненты, Bespin - отличный пример .
Я отредактирую свой пост, если найду другие публичные примеры. Я считаю, что Беспин использует метод выбора на основе сетки, возможно, требующий моноширинного шрифта. Лигатуры, кернинг, двунаправленность и другие расширенные функции рендеринга шрифтов требуют дополнительного программирования; это сложная проблема.
текст, нарисованный в элементах холста, не может быть выделен из-за природы тега холста. Но есть несколько обходных путей, например, тот, который используется в typefaceJS .
Другое решение - добавить текст с позиционированными элементами div вместо использования strokeText или fillText.
Если вам нужен текст с возможностью выбора, было бы намного проще просто создать div или что-то еще и расположить его поверх холста, где вы хотите, чтобы текст отображался.
В холсте нет встроенного механизма для выбора текста, поэтому вам придется развернуть свой собственный код отрисовки и выбора текста, что может быть довольно сложно сделать правильно.
Вы можете почерпнуть некоторые идеи из Беспина .
Они реализовали текстовый редактор в JavaScript, используя холст с выделением текста , полосы прокрутки, курсор мигание и т. д.
холст - это просто поверхность для рисования. Вы визуализируете, и результат - пиксели. Итак, вам нужно будет отслеживать позиции всего текста, который вы визуализировали на холсте, в какой-то структуре данных, которую вы обрабатываете во время событий мыши.
Простой ответ: используйте HTML или SVG вместо холста. Если вам действительно не нужна степень низкоуровневого холста управления.