Nie mogę dodać tekstu do obszaru roboczego, jeśli tekst zawiera „\ n”. To znaczy, podziały linii nie pokazują / nie działają.
ctxPaint.fillText("s ome \n \\n <br/> thing", x, y);
Powyższy kod będzie rysowany "s ome \n <br/> thing"
w jednej linii.
Czy to jest ograniczenie fillText, czy robię to źle? "\ n" są tam i nie są drukowane, ale też nie działają.
fillText()
wiele razy i użyj wysokości czcionki do oddzielenia lub użyj developer.mozilla.org/en-US/docs/Web/API/TextMetrics developer.mozilla.org/en-US/docs/Web/API /… - lub użyj jednego z bardzo skomplikowanych „rozwiązań” poniżej, które nie używają TextMetrics ...Odpowiedzi:
Obawiam się, że to ograniczenie Canvas ”
fillText
. Nie ma obsługi wielu linii. Co gorsza, nie ma wbudowanego sposobu pomiaru wysokości linii, tylko szerokość, co sprawia, że robienie tego samemu jest jeszcze trudniejsze!Wiele osób napisało własne wsparcie dla wielu linii, być może najbardziej znanym projektem, jaki ma Mozilla Skywriter .
Istotą tego, co musisz zrobić, jest wiele
fillText
wywołań, za każdym razem dodając wysokość tekstu do wartości y. (Wydaje mi się, że mierzenie szerokości M jest tym, co robią skywriterowie, aby przybliżać tekst).źródło
measureText()
zostały dodane, które myślę, że może rozwiązać ten problem. Chrome ma flagę, która je włącza, ale inne przeglądarki nie ... jeszcze!Jeśli chcesz tylko zająć się znakami nowej linii w tekście, możesz to zasymulować, dzieląc tekst na nowe linie i wywołując wielokrotnie
fillText()
Coś jak http://jsfiddle.net/BaG4J/1/
Właśnie wykonałem zawijany dowód koncepcji ( absolutne zawijanie przy określonej szerokości. Nie ma jeszcze łamania słów obsługujących ),
przykład na http://jsfiddle.net/BaG4J/2/
Oraz zawijanie słów ( przerywanie spacjami ) dowód koncepcji.
przykład pod adresem http://jsfiddle.net/BaG4J/5/
W drugim i trzecim przykładzie używam
measureText()
metody, która pokazuje, jak długo ( w pikselach ) ciąg będzie drukowany.źródło
Może przyjdę na tę imprezę trochę późno, ale poniższy samouczek dotyczący zawijania tekstu na płótnie był idealny.
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
Z tego powodu mogłem pomyśleć, aby działało wiele linii (przepraszam Ramirez, twój nie działa dla mnie!). Mój kompletny kod do zawijania tekstu na płótnie jest następujący:
Gdzie
c
jest identyfikator mojego płótna itext
jest identyfikatorem mojego pola tekstowego.Jak pewnie widzisz, używam niestandardowej czcionki. Możesz użyć @ font-face, o ile użyłeś czcionki na jakimś tekście PRZED manipulowaniem płótnem - w przeciwnym razie płótno nie pobierze czcionki.
Mam nadzieję, że to komuś pomoże.
źródło
Podziel tekst na linie i narysuj je osobno:
źródło
Oto moje rozwiązanie, modyfikujące popularną funkcję wrapText (), która jest już tutaj przedstawiona. Używam funkcji prototypowania JavaScript, aby można było wywołać funkcję z kontekstu kanwy.
Podstawowe użycie:
Oto prezentacja, którą przygotowałem: http://jsfiddle.net/7RdbL/
źródło
Właśnie rozszerzyłem CanvasRenderingContext2D o dwie funkcje: mlFillText i mlStrokeText.
Ostatnią wersję można znaleźć w GitHub :
Dzięki tym funkcjom możesz wypełnić / obrysować tekst miltilinowy w ramce. Możesz wyrównać tekst w pionie i poziomie. (Bierze pod uwagę \ n i może również uzasadniać tekst).
Prototypy to:
funkcja mlFillText (text, x, y, w, h, vAlign, hAlign, lineheight); function mlStrokeText (text, x, y, w, h, vAlign, hAlign, lineheight);
Gdzie vAlign może być: „top”, „center” lub „button”, a hAlign może być: „left”, „center”, „right” lub „justify”
Możesz przetestować bibliotekę tutaj: http://jsfiddle.net/4WRZj/1/
Oto kod biblioteki:
A oto przykład użycia:
źródło
Uncaught ReferenceError: Words is not defined
Jeśli spróbuję zmienić czcionkę. Na przykład:ctx.font = '40px Arial';
- spróbuj włożyć to w swoje skrzypceWords
bierze się zmienna (uwzględniająca wielkość liter)? Nigdzie nie jest zdefiniowane. Ta część kodu jest wykonywana tylko wtedy, gdy zmienisz czcionkę ...for in
nie działa dobrze z rozszerzonymArray.prototype
. Czy możesz umieścić go na githubie, abyśmy mogli go powtórzyć?Korzystając z javascript opracowałem rozwiązanie. To nie jest piękne, ale zadziałało:
Mam nadzieję, że to pomoże!
źródło
Bardzo pomocny jest kod zawijania wyrazów (łamanie spacji) dostarczony przez @Gaby Petrioli . Rozszerzyłem jego kod, aby zapewnić obsługę znaków nowej linii
\n
. Ponadto często warto mieć wymiary obwiedni, więcmultiMeasureText()
zwraca zarówno szerokość, jak i wysokość.Możesz zobaczyć kod tutaj: http://jsfiddle.net/jeffchan/WHgaY/76/
źródło
Oto wersja Colina,
wrapText()
która obsługuje również tekst wyśrodkowany w pionie zcontext.textBaseline = 'middle'
:źródło
Jeśli potrzebujesz tylko dwóch wierszy tekstu, możesz podzielić je na dwa różne wywołania fillText i nadać każdemu inny punkt odniesienia.
źródło
To pytanie nie dotyczy tego, jak działa płótno. Jeśli chcesz przerwać linię, po prostu dostosuj współrzędne następnego
ctx.fillText
.źródło
Myślę, że nadal możesz polegać na CSS
Na szczęście dzięki hack-ardry CSS (zobacz Metryki typograficzne, aby uzyskać więcej sposobów naprawienia starszych implementacji pomiarów CSS), możemy znaleźć wysokość tekstu, mierząc offsetHeight a z tymi samymi właściwościami czcionki:
z: http://www.html5rocks.com/en/tutorials/canvas/texteffects/
źródło
ctx.save()
wtedy,ctx.font = '12pt Arial'
wtedyparseInt( ctx.font, 10 )
. Zauważ, że podczas ustawiania używam „pt”. Następnie zostanie przetłumaczony na PX i będzie mógł przekształcić się w cyfrę do spożycia jako wysokość czcionki.Stworzyłem małą bibliotekę dla tego scenariusza tutaj: Canvas-Txt
Renderuje tekst w wielu wierszach i oferuje przyzwoite tryby wyrównania.
Aby z tego skorzystać, musisz go zainstalować lub użyć CDN.
Instalacja
JavaScript
Spowoduje to wyświetlenie tekstu w niewidocznym polu z pozycją / wymiarami:
Przykład Fiddle
źródło
ctx.fillText(txtline.trim(), textanchor, txtY)
Zauważyłem to tylko w twojej interaktywnej demonstracji na twojej stronie.2.0.9
wersję. Witryna demonstracyjna jest naprawiana poprzez aktualizację wersji pakietu. Wystąpił problem z wieloma spacjami. Nie wiem, czy lepiej iść z upartym pakietem, czy zignorować problem. Otrzymuję prośby o to z wielu miejsc. Poszedłem dalej i dodałem trymowanie.Lorem ipsum dolor, sit <many spaces> amet
to był powód, dla którego tego nie zrobiłem. Jak myślisz, co powinienem wziąć pod uwagę wiele spacji i usunąć tylko wtedy, gdy jest tylko jedna?Nie sądzę, żeby to było również możliwe, ale obejściem tego problemu jest utworzenie
<p>
elementu i umieszczenie go za pomocą JavaScript.źródło
fillText()
istrokeText()
możesz robić rzeczy wykraczające poza możliwości CSS.Zdarzyło mi się to z powodu tego samego problemu. Pracuję ze zmiennym rozmiarem czcionki, więc bierze to pod uwagę:
gdzie .noteContent to edytowalny element div edytowany przez użytkownika (jest to zagnieżdżone w jQuery każdej funkcji), a ctx.font to „14px Arial” (zwróć uwagę, że rozmiar piksela jest na pierwszym miejscu)
źródło
Element Canvas nie obsługuje takich znaków jak nowy wiersz '\ n', tab '\ t' czy znacznik <br />.
Spróbuj:
lub może wiele linii:
źródło
Moje rozwiązanie problemu z ES5:
Więcej informacji na ten temat na moim blogu .
źródło