Existe-t-il une astuce pour faire pivoter le texte dans PDFKit ?

Question

J'utilise PDFKit.org pour générer des PDF via JavaScript.

La documentation est assez explicite, mais je suis confronté à un problème non résolu, et je suppose que certains membres de StackOverflow ont déjà trouvé une astuce pour y parvenir.

Je dois faire pivoter un texte à un moment donné, et la documentation n'explique comment faire pivoter qu'une forme ( comme un rect() ).

J'ai déjà essayé plusieurs choses, mais aucune ne fonctionne pour l'instant.

Je cherche donc un moyen de le faire pivoter en modifiant le code, ou peut-être que certains d'entre vous peuvent m'indiquer une partie de la documentation que j'ai peut-être manquée ?

Answer 1

Il n'y a pas d'astuce particulière, mais il est essentiel de bien comprendre comment les transformations sont appliquées dans PDFKit.

La principale chose à comprendre est qu'on ne fait pas pivoter un texte ou une forme : vous faites pivoter votre document , comme l'implique doc.rotate(...).rect(...) .

Il peut être utile de considérer votre document comme une toile dotée de propriétés physiques. L'une de ses propriétés est sa rotation.
Si vous souhaitez dessiner un texte en rotation sur une page de papier, vous ferez probablement pivoter physiquement votre page, puis vous écrirez du texte horizontalement comme vous le feriez habituellement, puis vous ferez pivoter la page pour la ramener à son état normal.
Vous obtenez alors un texte tourné sur une page droite :

C'est exactement comme cela que fonctionne PDFKit : vous appliquez une transformation à votre document, dessinez tout ce que vous avez besoin de dessiner dans ce contexte transformé, et ramenez le document à son état précédent.

Pour ce faire, deux méthodes s'offrent à vous : doc.save() y doc.restore() .

• Utilisation save() avant en appliquant une transformation, de sorte que tout ce qui a été dessiné auparavant n'est pas affecté.
• Vous pouvez ensuite transformer votre toile et dessiner ce dont vous avez besoin
• Une fois que vous avez dessiné tout ce qui devait être transformé, appelez restore() pour remettre le document dans son état initial. Il s'agit essentiellement d'annuler toutes les transformations (c'est-à-dire la rotation, la mise à l'échelle, la translation) effectuées après la dernière modification du document. save() appel.

Pour reproduire (en quelque sorte) le diagramme ci-dessus, vous devez procéder comme suit :

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

Une dernière chose à comprendre est que le système de coordonnées de votre document est affecté par les transformations :

Ainsi, si text a été dessiné aux coordonnées (0, 0) alors rotated text a été fixé à quelque chose comme (0, documentHeight / 2 - offset) .
C'est assez facile à gérer lorsque l'on utilise des multiples de 90 degrés de rotation, mais vous devrez jouer avec la trigonométrie dans le cas contraire :)

Pour faciliter les choses, vous pouvez jouer avec l'origine de la rotation pour vous assurer que vous faites pivoter le document autour d'un point qui a du sens pour vos prochains dessins !

Answer 2

La meilleure façon d'écrire un texte avec rotation est de faire pivoter le document PDF autour d'un certain point (où vous voulez avoir le point de départ de votre texte), puis de l'écrire et de faire pivoter le document PDF en sens inverse. Exemple de code :

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

Ainsi, il n'est pas nécessaire de calculer une nouvelle position.

Il faut aussi savoir que pdfkit prend les x et y de notre texte comme le point supérieur gauche de notre "boîte" de texte (cela a eu de l'importance dans mon cas).

Answer 3

Je me suis un peu arraché les cheveux avec ce problème ou ce fait décrit dans la réponse. J'ai essayé beaucoup de choses, mais le texte finissait toujours par suivre sa propre voie.

Voici un petit clip que j'ai utilisé pour placer des textes dans différentes orientations. Cette fonction calcule les nouveaux x et y dans le système de coordonnées pivotées.

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
    };
};

Celui-ci passe ensuite par un tableau de textes qui ont x,y,rotation. Uncerscore est utilisé pour le bouclage.

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();
    });

};

Tout d'abord, le "monde" est tourné et le texte est placé au nouveau (x,y) qui est le même endroit que (t.x,t.y) mais dans le monde tourné.