jquery ページ ウォーターマーク プラグイン、複数行のウォーターマークと行のずらしをサポート

最近の仕事の要件では、ページにウォーターマークを追加する必要がありますが、オンラインのサンプルではニーズを満たすことができないことがわかったので、自分で書くことにしました。

いくつかの特別な要件があります:

1. 複数行の透かしを書き込み、中央に揃えることができます。

2. 各行の透かしは交互に配置されます。

追記：私が見つけた例はすべて単一行の透かしなので、使用できません。私が実現したい効果は次のとおりです。

(写真 1)
実装のアイデア

ページのウォーターマークを実装するには、主に 2 つの方法があります。

1. DOM要素

は、DOM要素にウォーターマークを配置し、特定の規則に従ってターゲット領域に配置します。

利点:

(1)。要素の計算方法は比較的簡単です。

欠点:

(1)。ターゲット領域の長さと幅は動的に設定する必要があります。

(2)。ある領域では、ページ上の DOM 要素が多すぎる可能性があります。

2.canvas

まずキャンバスにウォーターマークを書き込み、次に背景画像を生成し、背景画像とともにレイアウトします。

利点:

(1) ターゲット領域の動的な変化を心配する必要はありません。

デメリット:

(2) 計算方法が複雑です。

考えた結果、私はパフォーマンスを重視して 2 番目の実装方法を選択しました。

実装の難しさ

1. キャンバスにはテキストの回転がありません

キャンバス描画では、テキストの回転を制御できないため、キャンバスを 1 つずつ回転することしかできません。本文行 それぞれルールに従って排出されます。

下の図に示すように、x0y はビューポート (つまり、見えるもの)、x'0y' は角度 A を回転した後のキャンバスです。そのため、キャンバスを描画するときの各線の位置は、テキストを修正する必要があります。

(図 2)

追記: 長方形はテキストの各行を表し、幅はテキストの各行の水平方向の間隔、高さはテキストの最初の行の y 座標です。

テキストの各行の座標の式は次のとおりです (疑似コード):

y = x * tanA + height;

2 背景画像として使用する場合、透かしの行を生成するだけの場合、以下に示すように、垂直方向は同じになります。

(図 3)

そこで、交互に配置する方法では、3 つのキャンバスを使用し、最初のキャンバスは正式に描画され、2 番目のキャンバスはテキスト配列を上下逆に描画し、最初の 2 つは 3 番目のキャンバスに描画されます。キャンバスの場合、千鳥状になります。

3. テキストの各行の長さの違いによって引き起こされる水平方向の間隔の問題

以下に示すように、a と b が 2 つの段落である場合、b が長くなると水平方向の間隔が大きくなります。背景画像として直接使用すると、背景が繰り返されると、水平方向の長さが異なり、不快に見えます。

(写真 4)

この問題に対する私の解決策は、2 つの段落 a と b を横方向に数回描画して、a、b、a、b、a、b とします。何度も繰り返すと、間隔が正常であることがわかります。

4. テキストの最初の行 ご覧のとおり、まだ距離があります。

(図5)たとえば、最初の行をウィンドウ内の点pに移動する場合、疑似コード:

tx = height * sinA * cosA; を修正する必要があります。

ty = height * sinA * sinA;

PS: 誰かが私のコードをここで見た場合、ty にもう 1 つの sinA を乗算するとディスプレイスメントが正しいことがわかるでしょう。これを理解できないと思います。そして私に言います。

コード

コードをGitHubに置きました。何か提案があれば教えてください。

コードアドレス: 最終的な効果は実際には図 1 です。

概要

これは、jquery自体を必要とせず、習慣的にこのように実装されているだけのシンプルなプラグインです。実はここには重要なポイントがあり、それは svg の記事にまとめられています。さらに、私が遭遇したいくつかの問題の解決策も見つけていただければ幸いです。

以上がjquery ページ ウォーターマーク プラグイン、複数行のウォーターマークと行のずらしをサポートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。