Любое предложение высоко ценится.
Как сделать текст холста выбранным?
Ответ 1
Выбор текста имеет много компонентов для него, некоторые визуальные, некоторые не визуальные.
Во-первых, сделайте выбор текста, вы должны сохранить массив, где текст, что текст и какой шрифт был использован. Вы будете использовать эту информацию с помощью функции Canvas measureText.
Используя measureText, с вашей текстовой строкой вы можете определить, на какую букву курсор должен приземлиться, когда вы нажимаете на изображение.
ctx.fillText("My String", 100, 100);
textWidth = ctx.measureText("My String").width;
Вам все равно придется разбирать высоту шрифта из свойства "font", поскольку в настоящее время он не включен в текстовые метрики. Текст холста выровнен к базовой линии по умолчанию.
С этой информацией у вас теперь есть ограничивающая рамка, с которой вы можете проверить. Если курсор находится внутри ограничивающей рамки, теперь у вас есть неудачная задача выведения которое было намеренно выбрано; где должно быть размещено начало вашего курсора. Это может включать несколько раз вызов measureText.
В этот момент вы знаете, куда должен идти курсор; вам нужно будет текстовую строку как текстовую строку, в переменной, конечно.
После того, как вы определили точки старта и остановки вашего диапазона, вы должны сделать индикатор выбора. Это можно сделать в новом слое (второй элемент холста), или путем рисования прямоугольника с использованием режима композиции XOR. Это также можно сделать просто очистка и перерисовка текста поверх заполненного прямоугольника.
Все сказанное, выбор текста, редактирование текста в Canvas довольно трудоемкий, чтобы программировать, и было бы разумно повторно использовать компоненты, уже написанные, Bespin - отличный пример.
Я отредактирую свой пост, если мне удастся найти другие публичные примеры. Я считаю, что Bespin использует метод выбора на основе сетки, возможно, требующий моноширинного шрифта. Лигатуры, кернинг, двунаправленность и другие дополнительные функции визуализации шрифтов требуют дополнительного программирования; это сложная проблема.
Ответ 2
текст, нарисованный в элементах холста, не может быть выбран из-за природы тега canvas. Но есть несколько обходных решений, подобных тем, которые используются в typefaceJS.
Другим решением было бы добавить текст с позиционируемыми элементами div вместо использования strokeText или fillText.
Ответ 3
Если вам нужен выбор текста, было бы намного проще просто создать div или что-то еще, а также разместить его поверх холста, где вы хотите, чтобы текст показывался.
canvas не имеет встроенного механизма для выбора текста, поэтому вам придется развернуть свой собственный рендеринг текста и выбрать код - что может быть довольно сложным для правильного выбора.
Ответ 4
Я бы предложил использовать EaselJS библиотеку, вы можете добавить каждую букву в качестве дочернего элемента и даже добавить события мыши к этому объекту, удивительная библиотека, пойдите, проверьте это!
Ответ 5
Вы можете получить некоторые идеи от Bespin.
Они реализовали текстовый редактор в javascript, используя холст с выбором текста, полосы прокрутки, мигание курсора и т.д.
Ответ 6
Теперь FabricJS имеет возможность взаимодействовать с объектами вне элемента canvas - например, эта демонстрация показывает кнопку, связанную с загруженным изображением в элементе холста.
Такой же подход может использоваться в других библиотеках, таких как Raphael, путем подключения любого события перемещения, получения ограничивающего блока элемента и повторной позиционирования элемента HTML.
Ответ 7
холст - это просто поверхность рисования. Вы визуализируете, а результат - пиксели. Таким образом, вам нужно будет отслеживать позиции всего текста, который вы отобразили на холсте, в какой-то структуре данных, которую вы обрабатывали бы во время событий мыши.
Ответ 8
Простым ответом будет: либо использовать HTML, либо SVG вместо холста. Если вам действительно не нужна степень управления холстом с низким уровнем уровня.