HTML5-Leinwand ctx.fillText wird keine Zeilenumbrüche machen?

Ich fürchte, es ist eine Einschränkung von Canvas 'fillText. Es gibt keine mehrzeilige Unterstützung. Was noch schlimmer ist, es gibt keine eingebaute Methode, um die Zeilenhöhe zu messen, sondern nur die Breite, was es noch schwieriger macht, es selbst zu machen!

Viele Leute haben ihre eigene mehrzeilige Unterstützung geschrieben, vielleicht ist das bemerkenswerteste Projekt Mozilla Skywriter .

Sie müssen mehrere fillText-Aufrufe ausführen, während Sie die Höhe des Textes jedes Mal zum y-Wert addieren. (Das Messen der Breite von M ist, was die Skywriter Leute tun, um Text zu approximieren, glaube ich.)

Wenn Sie sich nur um die Zeilenumbruchzeichen im Text kümmern möchten, können Sie es simulieren, indem Sie den Text an den Zeilenumbrüchen teilen und das fillText()

Etwas wie Ссылка

Ich habe gerade einen Wrapping-Proof-of-Concept gemacht ( absoluter Zeilenumbruch in der angegebenen Breite. Keine handlungswörter brechen, ) Beispiel bei Ссылка

Und ein Wortumbruch ( breaking at spaces ), ein Proof of Concept.
Beispiel bei Ссылка

Im zweiten und dritten Beispiel verwende ich die measureText() -Methode, die zeigt, wie lang ( in Pixeln ) wird beim Ausdruck eine Zeichenfolge angezeigt.

Vielleicht komme ich etwas spät zu dieser Party, aber ich fand das folgende Tutorial, um Text auf einer Leinwand perfekt zu verpacken.

Ссылка

Davon konnte ich denken, dass mehrere Zeilen funktionieren (sorry Ramirez, deine hat bei mir nicht funktioniert!). Mein vollständiger Code zum Umbrechen von Text in eine Zeichenfläche lautet wie folgt:

Dabei ist c die ID meiner Zeichenfläche und text ist die ID meiner Textbox.

Wie Sie wahrscheinlich sehen, verwende ich eine nicht standardmäßige Schriftart. Sie können @ font-face verwenden, solange Sie die Schriftart in einem Text PRIOR zum Bearbeiten der Zeichenfläche verwendet haben - andernfalls wird die Zeichenfläche nicht von der Zeichenfläche übernommen.

Hoffe das hilft jemandem.

Teilen Sie den Text in Zeilen auf und zeichnen Sie jedes getrennt:

Hier ist meine Lösung, indem ich die populäre wrapText () Funktion modifiziere, die hier bereits vorgestellt wurde. Ich verwende die Prototyping-Funktion von JavaScript, so dass Sie die Funktion aus dem Canvas-Kontext aufrufen können.

Grundlegende Verwendung:

Hier ist eine Demonstration, die ich zusammengestellt habe: Ссылка

Der Code für den Zeilenumbruch (Leerzeichen), der von @ Gaby Petrioli ist sehr hilfreich. Ich habe seinen Code erweitert, um Unterstützung für Newline-Zeichen \n zu bieten. Oftmals ist es auch nützlich, die Abmessungen des Begrenzungsrahmens zu haben, sodass multiMeasureText() sowohl die Breite als auch die Höhe zurückgibt.

Sie können den Code hier sehen: Ссылка

Mit Javascript habe ich eine Lösung entwickelt. Es ist nicht schön, aber es hat für mich funktioniert:

Hoffe das hilft!

Ich habe gerade den CanvasRenderingContext2D um zwei Funktionen erweitert: mlFillText und mlStrokeText.

Sie können die letzte Version in GitHub finden:

Mit diesen Funktionen können Sie Text in eine Box füllen / streichen. Sie können den Text vertikal und horizontal ausrichten. (Es nimmt account \ n's und kann auch den Text rechtfertigen).

Die Prototypen sind:

Funktion mlFillText (Text, x, y, w, h, vAlign, hAlign, Zeilenhöhe); Funktion mlStrokeText (Text, x, y, w, h, vAlign, hAlign, Zeilenhöhe);

Wo vAlign sein kann: "top", "center" oder "button" Und hAlign kann sein: "links", "zentriert", "rechts" oder "rechtfertigen"

Sie können die Lib hier testen: Ссылка

Hier ist der Code der Bibliothek:

Und hier ist das Anwendungsbeispiel:

Hier ist eine Version von Colins wrapText() , die auch vertikal zentrierten Text mit context.textBaseline = 'middle' :

Ich denke, Sie können sich immer noch auf CSS verlassen

Glücklicherweise können wir die Höhe des Textes durch CSS-Hack-ardry (sieheTypographische Metriken für mehr Möglichkeiten, um ältere Implementierungen von CSS-Messungenzu korrigieren) durch Messen der offsetHeight von a mit den gleichen Font-Eigenschaften finden:

von: Ссылка

Ich denke nicht, dass dies auch nicht möglich ist, aber ein Workaround dafür ist, ein <p> -Element zu erstellen und es mit Javascript zu positionieren.

Ich passierte darüber, weil ich das gleiche Problem hatte. Ich arbeite mit variabler Schriftgröße, das berücksichtigt das:

Dabei ist .noteContent das zufriedengestellte div, das der Benutzer bearbeitet hat (dies ist in einer jQuery-Funktion verschachtelt), und ctx.font ist "14px Arial" (beachten Sie, dass die Pixelgröße zuerst kommt)

Das Canvas-Element unterstützt keine Zeichen wie Newline '\ n', Tab '\ t' oder & lt; br / & gt; Tag.

Probieren Sie es aus:

oder vielleicht mehrere Zeilen:

Meine ES5-Lösung für das Problem:

Weitere Informationen zum Thema finden Sie in meinem Blog .