Die Spezifikation verfügt über eine Funktion context.measureText (Text), die angibt, wie viel Breite zum Drucken dieses Textes erforderlich ist. Ich kann jedoch nicht herausfinden, wie hoch er ist. Ich weiß, dass es auf der Schriftart basiert, aber ich weiß nicht, wie ich eine Schriftzeichenfolge in eine Texthöhe konvertieren kann.
javascript
text
canvas
Sumpfjohn
quelle
quelle
M̶̢̹̝͖̦̖̭͕̭̣͆̃̀̅̒̊͌̿ͅ
, die so aussehen. Dies ist also ein wirklich kniffliges Problem. Lösen Sie es also für den allgemeinen Fall.Antworten:
UPDATE - Als Beispiel für diese Arbeit habe ich diese Technik im Carota-Editor verwendet .
Im Anschluss an ellisbben Antwort, hier ist eine erweiterte Version den Auf- und Abstieg von der Basislinie zu erhalten, dh gleiche wie
tmAscent
undtmDescent
zurückgegeben von Win32 GetTextMetric API. Dies ist erforderlich, wenn Sie einen Textlauf mit Zeilenumbrüchen in verschiedenen Schriftarten / Größen ausführen möchten.Das obige Bild wurde in Safari auf einer Leinwand generiert, wobei Rot die oberste Zeile ist, in der die Leinwand den Text zeichnen soll, Grün die Grundlinie und Blau die Unterseite (also Rot bis Blau ist die volle Höhe).
Verwenden von jQuery für Prägnanz:
Zusätzlich zu einem Textelement füge ich ein div hinzu,
display: inline-block
damit ich seinenvertical-align
Stil festlegen und dann herausfinden kann, wo der Browser es abgelegt hat.So erhalten Sie ein Objekt mit zurück
ascent
,descent
undheight
(was gerade istascent
+ derdescent
Einfachheit halber). Um es zu testen, lohnt es sich, eine Funktion zu haben, die eine horizontale Linie zeichnet:Dann können Sie sehen, wie der Text relativ zur Ober-, Grundlinie und Unterseite auf der Leinwand positioniert ist:
quelle
getTextHeight()
in geändert habevar text = $('<span>Hg</span>').css({ 'font-family': fontName, 'font-size' : fontSize });
, dh die Größe separat hinzugefügt habe.<div></div>
,<div style="white-space : nowrap;"></div>
um sehr lange Saite zu behandelnSie können eine sehr genaue Annäherung an die vertikale Höhe erhalten, indem Sie die Länge eines Großbuchstaben M überprüfen.
quelle
Die Canvas-Spezifikation gibt uns keine Methode zum Messen der Höhe eines Strings. Sie können jedoch die Größe Ihres Textes in Pixel festlegen und in der Regel relativ einfach herausfinden, wie hoch die vertikalen Grenzen sind.
Wenn Sie etwas Präziseres benötigen, können Sie Text auf die Leinwand werfen und dann Pixeldaten abrufen und herausfinden, wie viele Pixel vertikal verwendet werden. Dies wäre relativ einfach, aber nicht sehr effizient. Sie könnten so etwas tun (es funktioniert, zeichnet aber Text auf Ihre Leinwand, den Sie entfernen möchten):
Für Bespin fälschen sie eine Höhe, indem sie die Breite eines Kleinbuchstaben 'm' messen ... Ich weiß nicht, wie dies verwendet wird, und ich würde diese Methode nicht empfehlen. Hier ist die relevante Bespin-Methode:
quelle
em
ist eine relative Schriftgröße, bei der ein Em der Höhe des BuchstabensM
in der Standardschriftgröße entspricht.Browser beginnen, erweiterte Textmetriken zu unterstützen , was diese Aufgabe trivial macht, wenn sie weitgehend unterstützt wird:
fontHeight
Sie erhalten die Höhe des Begrenzungsrahmens, die unabhängig von der gerenderten Zeichenfolge konstant ist.actualHeight
ist spezifisch für die Zeichenfolge, die gerendert wird.Spezifikation: https://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-textmetrics-fontboundingboxascent und die Abschnitte direkt darunter.
Support-Status (20.08.2017):
quelle
EDIT: Verwenden Sie Canvas-Transformationen? In diesem Fall müssen Sie die Transformationsmatrix verfolgen. Die folgende Methode sollte die Höhe des Texts bei der anfänglichen Transformation messen.
BEARBEITEN # 2: Seltsamerweise liefert der folgende Code keine korrekten Antworten, wenn ich ihn auf dieser StackOverflow-Seite ausführe. Es ist durchaus möglich, dass das Vorhandensein einiger Stilregeln diese Funktion beeinträchtigt.
Die Zeichenfläche verwendet Schriftarten, wie sie von CSS definiert wurden. Theoretisch können wir dem Dokument also einfach einen entsprechend gestalteten Textblock hinzufügen und dessen Höhe messen. Ich denke, dies ist wesentlich einfacher als das Rendern von Text und das anschließende Überprüfen von Pixeldaten und sollte auch Auf- und Abwärtsbewegungen berücksichtigen. Überprüfen Sie Folgendes:
Sie müssen sicherstellen, dass der Schriftstil für das DOM-Element, dessen Höhe Sie messen, korrekt ist, aber das ist ziemlich einfach. wirklich solltest du so etwas benutzen
quelle
Entspricht die Höhe des Texts in Pixel nicht der Schriftgröße (in Punkten), wenn Sie die Schriftart mit context.font definieren?
quelle
Wie JJ Stiff vorschlägt, können Sie Ihren Text einer Spanne hinzufügen und dann die Offset-Höhe der Spanne messen.
Wie auf HTML5Rocks gezeigt
quelle
Nur um Daniels Antwort hinzuzufügen (was großartig ist! Und absolut richtig!), Version ohne JQuery:
Ich habe gerade den obigen Code getestet und funktioniert hervorragend mit den neuesten Versionen von Chrome, FF und Safari auf dem Mac.
BEARBEITEN: Ich habe auch die Schriftgröße hinzugefügt und mit Webfont anstelle von Systemschriftart getestet - funktioniert fantastisch.
quelle
Ich habe dieses Problem direkt gelöst - mithilfe der Pixelmanipulation.
Hier ist eine grafische Antwort:
Hier ist Code:
quelle
Ich schreibe einen Terminalemulator, also musste ich Rechtecke um Zeichen zeichnen.
Wenn Sie genau den Platz benötigen, den der Charakter einnimmt, hilft das natürlich nicht weiter. Aber es gibt Ihnen eine gute Annäherung für bestimmte Verwendungen.
quelle
Ich habe eine schöne Bibliothek implementiert, um die genaue Höhe und Breite von Text mithilfe von HTML-Canvas zu messen. Dies sollte tun, was Sie wollen.
https://github.com/ChrisBellew/text-measurer.js
quelle
Hier ist eine einfache Funktion. Keine Bibliothek erforderlich.
Ich habe diese Funktion geschrieben, um die oberen und unteren Grenzen relativ zur Grundlinie zu erhalten. If
textBaseline
ist auf gesetztalphabetic
. Es erstellt eine weitere Leinwand, zeichnet dort und findet dann das oberste und das unterste nicht leere Pixel. Und das ist die obere und untere Grenze. Es gibt es als relativ zurück. Wenn also die Höhe 20 Pixel beträgt und sich nichts unter der Grundlinie befindet, ist die Obergrenze-20
.Sie müssen Zeichen angeben. Andernfalls erhalten Sie natürlich 0 Höhe und 0 Breite.
Verwendung:
Hier ist die Funktion:
relativeBot
,,relativeTop
undheight
sind die nützlichen Dinge im Rückgabeobjekt.Hier ist ein Beispiel für die Verwendung:
Das
relativeBot
undrelativeTop
sind das, was Sie in diesem Bild hier sehen:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
quelle
einzeilige Antwort
CSS "Zeilenhöhe: normal" liegt zwischen 1 und 1,2
Lesen Sie hier für weitere Informationen
quelle
Komisch, dass TextMetrics nur Breite und keine Höhe hat:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics
Können Sie eine Spanne wie in diesem Beispiel verwenden?
http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix
quelle
Dies ist, was ich basierend auf einigen der anderen Antworten hier getan habe:
quelle
Zunächst müssen Sie die Höhe einer Schriftgröße festlegen und dann anhand des Werts der Schriftgröße, um die aktuelle Höhe Ihres Textes zu bestimmen, wie viel Kreuztextzeilen natürlich dieselbe Höhe wie die Die Schrift muss akkumuliert werden. Wenn der Text die größte Textfeldhöhe nicht überschreitet, werden alle angezeigt. Andernfalls wird nur der Text im Feldtext angezeigt. Hohe Werte benötigen eine eigene Definition. Je größer die voreingestellte Höhe ist, desto größer ist die Höhe des Texts, der angezeigt und abgefangen werden muss.
Nachdem der Effekt verarbeitet wurde (lösen)
Bevor der Effekt verarbeitet wird (ungelöst)
quelle
Ich fand, dass JUST FOR ARIAL der einfachste, schnellste und genaueste Weg ist, die Höhe des Begrenzungsrahmens zu ermitteln, indem die Breite bestimmter Buchstaben verwendet wird. Wenn Sie vorhaben, eine bestimmte Schriftart zu verwenden, ohne dass der Benutzer eine andere auswählen kann, können Sie ein wenig nachforschen, um den richtigen Buchstaben für diese Schriftart zu finden.
quelle
Das Einstellen der Schriftgröße ist jedoch möglicherweise nicht praktikabel, da das Einstellen
ctx.font = ''
verwendet das durch CSS definierte sowie alle eingebetteten Schriftart-Tags. Wenn Sie die CSS-Schriftart verwenden, wissen Sie programmgesteuert nicht, wie hoch die Höhe ist, wenn Sie die sehr kurzsichtige MeasureText-Methode verwenden. In einem anderen Punkt gibt IE8 DOES die Breite und Höhe zurück.
quelle
Dies funktioniert 1) auch für mehrzeiligen Text 2) und sogar in IE9!
quelle
Ich weiß, dass dies eine alte beantwortete Frage ist, aber zum späteren Nachschlagen möchte ich eine kurze, minimale Lösung nur für JS (keine Abfrage) hinzufügen, von der ich glaube, dass die Leute davon profitieren können:
quelle
In normalen Situationen sollte Folgendes funktionieren:
quelle
Das ist verrückt ... Die Höhe des Textes ist die Schriftgröße. Hat keiner von Ihnen die Dokumentation gelesen?
Dadurch wird die Höhe auf 22 Pixel eingestellt.
der einzige Grund gibt es eine ..
Dies liegt daran, dass die Breite der Zeichenfolge nur bestimmt werden kann, wenn die gewünschte Zeichenfolge bekannt ist, jedoch für alle mit der Schriftart gezeichneten Zeichenfolgen. Die Höhe beträgt 22 Pixel.
Wenn Sie eine andere Messung als px verwenden, ist die Höhe immer noch dieselbe, aber mit dieser Messung müssten Sie höchstens die Messung konvertieren.
quelle
Ungefähre Lösung:
Dies ist ein genaues Ergebnis in monospaced Schriftart.
quelle