Gibt es einen Trick, um Text in PDFKit zu drehen?
Ich verwende PDFKit.org , um PDF über JavaScript zu generieren.
Die Dokumentation ist ziemlich selbsterklärend, aber ich stehe vor einem ungelösten Problem, und ich nehme an, einige StackOverflow-Mitglieder haben vielleicht schon einen Trick dafür gefunden.
Ich muss irgendwann einen Text drehen, und in der Dokumentation wird nur erklärt, wie man eine Form dreht (zB rect() ).
Ich habe schon verschiedene Dinge ausprobiert, aber keiner von ihnen funktioniert so weit.
Ich suche also nach einer Möglichkeit, es zu drehen, indem ich den Code verändere, oder vielleicht können einige von Ihnen mir einen Teil der Dokumentation zeigen, die ich vielleicht übersehen habe?
3 Antworten
Es gibt keinen speziellen Trick, aber es ist wichtig zu verstehen, wie Transformationen in PDFKit angewendet werden.
Die Hauptsache ist, dass Sie keinen Text oder eine Form drehen: Sie drehen Ihr Dokument , wie von doc.rotate(...).rect(...) impliziert.
Es könnte Ihnen helfen, Ihr Dokument als Leinwand mit physikalischen Eigenschaften zu sehen. Eine seiner Eigenschaften ist seine Rotation.
Wenn Sie gedrehten Text auf einer Papierseite zeichnen möchten, drehen Sie Ihre Seite wahrscheinlich physisch, schreiben Sie dann wie gewohnt einen Text horizontal und drehen Sie dann die Seite in den normalen Zustand zurück
Am Ende steht dann ein gedrehter Text auf einer geraden Seite:
Genau so funktioniert PDFKit: Sie wenden eine Transformation auf Ihr Dokument an, zeichnen alles, was Sie zum Zeichnen in diesem transformierten Kontext benötigen, und setzen das Dokument in den vorherigen Zustand zurück.
Um das zu erreichen, haben Sie zwei Methoden: doc.save() und doc.restore() .
- Verwenden Sie
save()vor , um eine Transformation anzuwenden, so dass alles, was zuvor gezeichnet wurde, nicht davon betroffen ist. - Sie können dann Ihre Leinwand umwandeln und zeichnen, was Sie brauchen
- Sobald Sie alles gezeichnet haben, was transformiert werden muss, rufen Sie
restore()auf, um das Dokument in seinen ursprünglichen Zustand zurückzuversetzen. Es wird im Grunde alle Transformationen (dh Rotation, Skalierung, Translation), die nach dem letztensave()-Aufruf durchgeführt wurden, rückgängig machen.
Um das obige Diagramm (irgendwie) zu reproduzieren, tun Sie Folgendes:
%Vor%Eine letzte Sache zu verstehen ist, dass das Koordinatensystem Ihres Dokuments durch Transformationen beeinflusst wird:
Wenn also text an den Koordinaten (0, 0) gezeichnet wurde, dann wurde rotated text an etwas wie (0, documentHeight / 2 - offset) gezeichnet.
Es ist ziemlich einfach, mit vielfachen 90 Grad Rotationen umzugehen, aber Sie müssen mit Trigonometrie spielen, ansonsten:)
Um Dinge zu vereinfachen, können Sie mit dem Ursprung der Drehung spielen, um sicherzustellen, dass Sie das Dokument um einen Punkt drehen, der für Ihre nächsten Zeichnungen sinnvoll ist!
Ich habe mir mit dem Problem oder der Tatsache, die in der Antwort beschrieben sind, ein wenig die Haare ausgezogen. Habe viele Dinge probiert, aber der Text ging immer auf seine eigene Art und Weise.
Hier ist ein kleiner Clip, den ich benutzt habe, um Texte in verschiedenen Orientierungen zu platzieren. Diese Funktion berechnet neue x und y im gedrehten Koordinatensystem.
%Vor%Dieser geht dann durch ein Array von Texten, die x, y, rotation haben. Uncerscore zum Schleifen verwendet.
%Vor%Zuerst wird die "Welt" gedreht und dann wird der Text auf die neue (x, y) platziert, die die gleiche Stelle ist wie (t.x, t.y), aber in der gedrehten Welt.
Der beste Weg, um gedrehten Text zu schreiben, besteht darin, pdf um einen bestimmten Punkt herum zu drehen (wo Sie einen Anfangspunkt Ihres Textes haben möchten), ihn dann zu schreiben und das PDF-Dokument zurück zu drehen. Codebeispiel:
%Vor%Auf diese Weise müssen Sie keine neue Position berechnen.
Auch ist es wert zu wissen, dass pdfkit x und y unseres Textes als linken oberen Punkt unserer Texte "Box" nimmt (es war in meinem Fall wichtig).
Tags und Links javascript pdf pdfjs node-pdfkit