plug-in de filigrane de page jquery, prend en charge les filigranes multilignes et l'échelonnement des lignes

Les exigences de travail récentes m'obligent à ajouter un filigrane à la page, mais j'ai trouvé que les exemples en ligne ne pouvaient pas répondre à mes besoins, j'ai donc décidé de l'écrire moi-même.

Il existe plusieurs exigences particulières :

1 Vous pouvez écrire plusieurs lignes de filigranes et les aligner au centre.

2. Chaque rangée de filigranes est décalée.

PS : Les exemples que j'ai trouvés sont tous des filigranes sur une seule ligne, ils ne peuvent donc pas être utilisés. L'effet que je souhaite obtenir est le suivant.

(Figure 1)
Idées de mise en œuvre

Page de mise en œuvre Il existe deux méthodes principales de filigrane.

1. L'élément DOM

consiste à placer le filigrane dans l'élément DOM et à le poser dans la zone cible selon certaines règles.

Avantages :

(1). La méthode de calcul des éléments est relativement simple.

Inconvénients :

(1). La zone peut changer, les éléments du filigrane doivent être définis de manière dynamique.

(2). Dans une zone, il peut y avoir trop d'éléments DOM sur la page.

2. toile

Écrivez d'abord le filigrane sur la toile, puis générez une image d'arrière-plan et disposez-la avec l'image d'arrière-plan.

Avantages :

(1). Pas besoin de vous soucier des changements dynamiques dans la zone cible.

Inconvénients :

(2). La méthode de calcul est complexe.

Après réflexion, j'ai choisi la deuxième méthode de mise en œuvre, axée sur la performance.

Difficultés de mise en œuvre

1. La toile ne tourne pas pour le texte

Dans le dessin sur toile, il n'y a aucun contrôle sur la rotation du texte, vous pouvez donc uniquement faire pivoter la toile et organiser chaque ligne de texte une par une selon des règles.

Comme indiqué ci-dessous, x0y est la fenêtre d'affichage (c'est-à-dire ce que vous pouvez voir), x'0y' est le canevas après avoir fait pivoter l'angle A, donc lorsque nous dessinons le canevas, la position de chaque ligne de le texte doit être Faire une correction.

(Figure 2)

PS : Le rectangle représente chaque ligne de texte, la largeur est l'espacement horizontal de chaque ligne de texte et la hauteur est l'espacement horizontal de chaque ligne de texte. coordonnée y de la première ligne de texte.

La formule pour les coordonnées de chaque ligne de texte est (pseudocode) :

x = largeur * cosA;

y = x * tanA + hauteur;

2. Chaque rangée de filigranes est décalée

Si nous ne générons qu'une seule rangée de filigranes, alors lorsqu'ils sont utilisés comme image d'arrière-plan, ils seront la pareil dans le sens vertical. Cela semble un peu raide, comme indiqué ci-dessous.

(Photo 3)

Donc dans la méthode décalée, j'ai utilisé trois toiles, la première toile est officiellement dessinée, et la seconde sera Le texte Le tableau est dessiné à l'envers et les deux premiers sont dessinés sur la troisième toile, de sorte qu'ils soient décalés.

3. Le problème d'espacement horizontal causé par les différentes longueurs de chaque ligne de texte

Comme indiqué ci-dessous, a et b sont deux paragraphes. de texte, qui sont plus longs. Le b entraînera un élargissement de l'espacement horizontal. S'il est utilisé directement comme image d'arrière-plan, lorsque l'arrière-plan se répète, la longueur horizontale sera différente, ce qui semble inconfortable.

(Image 4)

Pour ce problème, ma solution est de dessiner les deux paragraphes a et b horizontalement plusieurs fois. Cela devient le dessin a, b. , a, b, a, b. Après suffisamment de temps, vous verrez que l'espacement est normal.

4. La première ligne de texte x ne commence pas à 0

En fait, après la rotation du canevas, c'est la première ligne vue dans la fenêtre Elle ne part pas de 0 (bien qu'elle soit tracée à 0). Comme vous pouvez le voir sur la figure 2, il y a encore une distance.

(Figure 5)

Par exemple, si vous déplacez la première ligne jusqu'au point p dans la fenêtre, vous devez apporter des corrections à tx et ty . Pseudocode :

tx = height * sinA * cosA;

ty = height * sinA * sinA;

PS : Si quelqu'un regarde mon code ici, il trouvera que ty est multiplié par un sinA supplémentaire, le déplacement est correct, je ne comprends pas non plus. J'espère que quelqu'un le sait et pourra me le dire.

Code

J'ai mis le code sur GitHub, merci de me faire des suggestions.

Adresse du code :

L'effet final est en fait la figure 1.

Résumé

Il s'agit d'un simple plug-in avec peu de code. en fait, pas besoin de jquery, juste une implémentation habituelle. Il y a en fait un point clé ici, qui est la fenêtre et le canevas. Je l'ai résumé dans l'article svg. De plus, j'espère que vous pourrez trouver des solutions à plusieurs difficultés que j'ai rencontrées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!