jquery頁面水印外掛程式,支援多行水印 行錯開

2021-09-27 13:28:35 字數 1813 閱讀 4908

最近工作需求,需要在頁面上加水印,但發現網上示例無法滿足我的需求,所以還是自己動手寫。

有幾個特別需求:

1.可以寫多行水印,並且中心對齊。

2.每行水印錯開。

ps:我找到的例子都是單行水印,所以用不了,想做的效果如下。

(圖1)

實現思路

實現頁面水印主要是有兩種方法。

1.dom元素

就是將水印放置dom元素裡,按一定規律鋪設在目標區域。

優點:(1).元素計算方式相對簡單些

缺點:(1).目標區域長寬可能會變化,水印元素需要動態設定。

(2).在一片區域中,可能會導致頁面dom元素過多。

2.canvas

先將水印寫在canvas裡,然後生成背景圖,用背景圖鋪設。

優點:(1).不用擔心目標區域動態變化。

缺點:(2).計算方式複雜。

思量後,選擇了第二種實現方式,效能為重。

實現難點

1.canvas沒有針對文字的旋轉

在canvas繪圖裡面,沒有針對文字旋轉的控制,所以只能旋轉畫布後,對每行文字乙個個按規律排放。

如下圖,x0y是視區(也就是你能看到的),x』0y』是旋轉了a角度後的畫布,所以我們在畫布繪製時,每行文字的位置都要做乙個修正。

(圖2)

ps:矩形代表每行文字,width是每行文字的水平間距,height是第一行文字y座標。

得出每行文字座標公式是(偽**):

x = width * cosa;

y = x * tana height;

2.每行水印錯開

如果我們只生成一行水印,那麼當做背景圖使用時候,那麼在豎方向上,都是一樣的,這樣看起來有點僵硬,如下圖。

(圖3)

所以在錯開的方法上,我使用了三個canvas,第乙個canvas正式繪製,第二個將文字陣列倒過來繪製,將前兩個繪製在第三個canvas上,這樣就錯開了。

3.每行文字長度不等引起的水平間距問題

如下圖,a、b是兩段文字,較長的b會導致水平方向間距變大,如果直接使用做背景圖,那麼在背景repeat時候,將存在水平方向長短不一情況,看起來很難受。

(圖4)

對於這個問題,我的解決方法是,將a、b兩段文字水平方向上重複繪製多次,就變成繪製a、b、a、b、a、b,在足夠多的次數後,看到間距就正常。

4.第一行文字x不是從0開始

其實在畫布旋轉後,在視窗裡看到的第一行就不是從0開始(雖然繪製是0),從圖2就可以看到,還有一段距離。

(圖5)

例如將第一行移到視窗p點,那麼就要做tx、ty的修正,偽**:

tx = height * sina * cosa;

ty = height * sina * sina;

ps:這個地方如果有人看我**,就會發現ty乘多乙個sina,位移才正確,這一點我也想不懂,希望有人知道告訴我。

**

我將**放到github上,有啥建議請提。

最後的效果,其實就是圖1。

總結

這是個簡單的外掛程式,**不多,其實本身也不需要jquery,只是習慣性這麼實現。這裡其實有個重點,就是視區和畫布,我在svg文章裡面有總結過,可以看看,另外我遇到的幾個難點的解決辦法,希望對大家有所發現。

更多專業前端知識,請上

【猿2048】www.mk2048.com

jquery頁面水印外掛程式,支援多行水印 行錯開

最近工作需求,需要在頁面上加水印,但發現網上示例無法滿足我的需求,所以還是自己動手寫。有幾個特別需求 1.可以寫多行水印,並且中心對齊。2.每行水印錯開。ps 我找到的例子都是單行水印,所以用不了,想做的效果如下。圖1 實現思路 實現頁面水印主要是有兩種方法。1.dom元素 就是將水印放置dom元素...

jquery頁面水印外掛程式,支援多行水印 行錯開

最近工作需求,需要在頁面上加水印,但發現網上示例無法滿足我的需求,所以還是自己動手寫。有幾個特別需求 1.可以寫多行水印,並且中心對齊。2.每行水印錯開。ps 我找到的例子都是單行水印,所以用不了,想做的效果如下。圖1 實現思路 實現頁面水印主要是有兩種方法。1.dom元素 就是將水印放置dom元素...

jquery 封裝頁面切換外掛程式

立即執行函式封閉作用域,實現元件化開發 fn.extend 擴充套件jquery外掛程式內容 建構函式儲存例項化引數 function 建立外掛程式dom結構 page.prototype.fillhtml function 繫結翻頁事件 page.prototype.bindevent funct...