Come rendere selezionabile il testo su tela?

Question

Qualsiasi suggerimento è molto apprezzato.

Answer 1

La selezione del testo ha molte componenti, alcune visive, alcune non visive.

Per prima cosa, rendere selezionabile il testo è necessario conservare una matrice, di dove si trova il testo, di che testo si tratta e di quale tipo di carattere è stato utilizzato. Utilizzerai queste informazioni con la funzione Canvas measureText.

Utilizzando measureText, con la stringa di testo, è possibile identificare su quale lettera deve essere posizionato il cursore quando si fa clic su un'immagine.

ctx.fillText("My String", 100, 100); 
textWidth = ctx.measureText("My String").width; 

si avrà ancora per analizzare l'altezza dei caratteri dalla proprietà "font", in quanto non è attualmente incluso nel metriche del testo. Il testo della tela è allineato alla baseline per impostazione predefinita.

Con queste informazioni, ora si dispone di un riquadro di delimitazione, che è possibile verificare. Se il cursore si trova all'interno del riquadro di delimitazione, ora si ha lo spiacevole compito di dedurre quale lettera è stata intenzionalmente selezionata; dove deve essere posizionato l'inizio del cursore. Ciò può comportare la chiamata di measureText diverse volte.

A quel punto si sa dove deve andare il cursore; è necessario memorizzare la stringa di testo come stringa di testo, in una variabile, ovviamente.

Dopo aver definito i punti di inizio e fine dell'intervallo, è necessario disegnare un indicatore di selezione. Questo può essere fatto in un nuovo livello (un secondo elemento canvas), o disegnando un rettangolo usando la modalità di composizione XOR.Può anche essere fatto da semplicemente cancellando e ridisegnando il testo sopra un rettangolo pieno.

Tutto sommato, la selezione del testo e la modifica del testo in Canvas sono piuttosto laboriosi da programmare, e sarebbe saggio riutilizzare i componenti già scritti, essendo Bespin un eccellente esempio.

Modificherò il mio post se dovessi trovare altri esempi pubblici. Credo che Bespin usi un metodo di selezione basato sulla griglia, che potrebbe richiedere un font monospaced. Legature, crenatura, bidirezionalità e altre funzioni avanzate di rendering dei caratteri richiedono una programmazione aggiuntiva; è un problema complesso

Answer 2

canvas è solo una superficie di disegno. Si esegue il rendering e il risultato è pixel. Quindi, dovresti tenere traccia delle posizioni di tutto il testo che hai reso sull'area di disegno in una sorta di struttura dati che elaboreresti durante gli eventi del mouse.

Answer 3

Se è necessario disporre di testo selezionabile, sarebbe molto più semplice creare un div o qualsiasi altro e posizionarlo sopra l'area di disegno in cui si desidera visualizzare il testo.

canvas non dispone di alcun meccanismo incorporato per la selezione del testo, quindi è necessario eseguire il rendering del testo e selezionare il codice, che può essere piuttosto complicato per essere corretto.

Answer 4

non è possibile selezionare il testo disegnato negli elementi canvas, a causa della natura del tag canvas. Ma ci sono alcune soluzioni alternative, come quella utilizzata in typefaceJS.

Un'altra soluzione potrebbe essere quella di aggiungere testo con elementi div posizionati invece di usare strokeText o fillText.

Answer 5

È possibile ottenere alcune idee da Bespin.

hanno implementato un editor di testo in JavaScript utilizzando tela con la selezione del testo, barre di scorrimento, cursore lampeggiante, ecc

Source Code

Answer 6

Una risposta semplice potrebbe essere: o utilizzare HTML o SVG al posto di tele . A meno che tu non abbia davvero bisogno del livello di controllo del livello inferiore delle offerte di canvas.

Answer 7

FabricJS ora ha la capacità di interagire con oggetti esterni all'elemento canvas, ad esempio this demo mostra un pulsante collegato a un'immagine caricata in un elemento canvas.

Lo stesso approccio può essere utilizzato in altre librerie come Raphael agganciare qualsiasi evento di spostamento, ottenere il riquadro di delimitazione dell'elemento e riposizionare l'elemento HTML.

Answer 8

Suggerisco di utilizzare la libreria EaselJS, è possibile aggiungere ogni lettera come un bambino e persino aggiungere eventi del mouse a quell'oggetto, è una libreria incredibile, vai a dare un'occhiata!