Gibt es einen Trick, um Text in PDFKit zu drehen?

Question

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 denke, einige StackOverflow-Mitglieder haben vielleicht schon einen Trick dafür gefunden.

Ich muss einen Text an einem bestimmten Punkt drehen, und in der Dokumentation wird nur erklärt, wie man eine Form dreht (wie eine rect()).

Ich habe schon einige Dinge ausprobiert, aber keiner von ihnen funktioniert so weit.

Also ich suche nach einer Möglichkeit, es zu drehen, indem Sie den Code optimieren, oder vielleicht können einige von Ihnen mir einen Teil der Dokumentation zeigen, die ich verpasst habe?

Answer 1

Es gibt keinen speziellen Trick, aber es ist wichtig zu verstehen, wie Transformationen in PDFKit angewendet werden.

Die wichtigste Sache zu verstehen ist, dass Sie nicht Text oder eine Form drehen: Sie drehen Ihr Dokument, wie durch doc.rotate(...).rect(...) impliziert.

Es kann Ihnen helfen, Ihr Dokument als Zeichenfläche mit physikalischen Eigenschaften zu sehen. Eine seiner Eigenschaften ist seine Rotation.
Wenn Sie gedrehten Text auf einer Papierseite zeichnen möchten, drehen Sie wahrscheinlich Ihre Seite physisch, schreiben Sie dann wie gewohnt einen Text horizontal und drehen Sie dann die Seite in den Normalzustand zurück.
Was Sie mit dann am Ende, ist ein gedrehter Text auf einer geraden Seite:

Das ist genau, wie PDFKit funktioniert: Sie eine Transformation auf das Dokument anwenden, müssen ziehen alles, was Sie in diesem ziehen transformierten Kontext und setzen das Dokument in den vorherigen Zustand zurück.

Um dies zu erreichen, haben Sie zwei Methoden: doc.save() und doc.restore().

• Verwenden save()vor eine Transformation anwenden, so dass alles, was vorher gezogen worden ist, ist nicht betroffen.
• Anschließend können Sie Ihre Leinwand verwandeln und zeichnen, was Sie
• brauchen Wenn Sie alles gezeichnet haben, die, rufen Sie transformiert werden benötigt, um restore() das Dokument in seinen ursprünglichen Zustand zurück zu setzen. Es wird im Grunde alle Transformationen (z. B. Rotation, Skalierung, Translation) nach dem letzten Aufruf save() rückgängig machen.

Um (ein bisschen), um das Diagramm oben zu reproduzieren würden Sie tun:

doc.text('text', ...) 
doc.save() 
doc.rotate(90).text('rotated text', ...) 
doc.restore() 

Eine letzte Sache zu verstehen ist, dass Koordinatensystem Ihres Dokuments durch Transformationen beeinflusst:

Wenn also text an den Koordinaten (0, 0) gezeichnet wurde, dann wurde rotated text auf etwas wie (0, documentHeight/2 - offset) gezeichnet.
Es ist ziemlich einfach, mit bei der Verwendung von Vielfachen von 90 Grad Drehungen zu tun, aber Sie werden mit Trigonometrie sonst spielen :)

Dinge zu erleichtern, können Sie mit dem Ursprung der Rotation spielen Sie, um sicherzustellen, drehen das Dokument um einen Punkt, der für deine nächsten Zeichnungen Sinn macht!

Answer 2

Ich zog meine Haare ein wenig mit dem Problem oder der Tatsache in der Antwort beschrieben. Habe viele Dinge ausprobiert, aber Text ging immer auf seine eigene Art und Weise.

Hier ist ein kleiner Clip, den ich verwendet habe, um Texte in verschiedenen Orientierungen zu platzieren. Diese Funktion berechnet neue x und y im gedrehten Koordinatensystem.

var doTransform = function (x, y, angle) { 
var rads = angle/180 * Math.PI; 
var newX = x * Math.cos(rads) + y * Math.sin(rads); 
var newY = y * Math.cos(rads) - x * Math.sin(rads); 

return { 
    x: newX, 
    y: newY, 
    rads: rads, 
    angle: angle 
    }; 
}; 

Dieser geht dann durch ein Array von Texten, die x, y, Rotation haben. Uncerscore zum Schleifen verwendet.

var drawTexts = function (doc, texts) { 

_.each(texts, t => { 
    doc.save(); 
    doc.fontSize(t.size); 
    var loc = doTransform(t.x, t.y, t.rotation);   
    doc.rotate(t.rotation);   
    doc.text(t.text, loc.x, loc.y);    
    doc.restore(); 
    }); 

}; 

Zuerst wird die ‚Welt‘ gedreht wird, und dann wird der Text an den neuen (x, y) angeordnet, die die gleiche Stelle wie (T. x, t.y), aber in gedrehten Welt.

Answer 3

Die beste Möglichkeit, um gedrehten Text zu schreiben, besteht darin, PDF um einen bestimmten Punkt zu drehen (wo Sie einen Anfangspunkt Ihres Textes haben möchten), dann schreiben Sie es und drehen Sie das PDF-Dokument zurück. Code-Beispiel:

doc.rotate(angle, { origin: [x,y] }; 
doc.text('TEST', x, y); 
doc.rotate(angle * (-1), { origin: [x,y] }; 

Auf diese Weise brauchen Sie nicht neue Position zu 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).