汪志達(dá)

摘 要： 介紹了用Java在網(wǎng)頁上制作水面特效的總體實(shí)現(xiàn)方案、主要技術(shù)方法和程序設(shè)計(jì)，以及應(yīng)用方面幾個(gè)問題的解決。其技術(shù)核心是將圖像映在波動(dòng)的水中。將水波視作正弦波，計(jì)算幀相位角和振幅，以振幅為動(dòng)畫幀偏移量，橫向逐線繪制；同時(shí)采用雙緩沖技術(shù)，先在圖像緩沖區(qū)中處理圖像，完成后再顯示到窗體上。

關(guān)鍵詞： Java； 程序設(shè)計(jì)； 網(wǎng)頁； 水面特效； 圖像

中圖分類號：TP301.6；311.11 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2014）10-54-02

Water special effects on Webpage using Java

Wang Zhida

（Ningbo Polytechnic， Ningbo， Zhejiang 315800， China）

Abstract： The implementing project of making water special effects on webpage using Java is introduced. The related technique method and programming are discussed in detail， with some applied issues. The core technology is casting image on waving water. The waves are regarded as sine curves. The frame's phase angle and amplitude are calculated. The amplitude is used as frame vertical deviant to draw each line of the frame. Meanwhile， double buffer technology is utilized to process the image on buffer area and display it on the window.

Key words： Java； programing； webpage； water special effects； image

0 引言

使用Applet程序可以方便地進(jìn)行圖像處理，再融合動(dòng)畫技術(shù)，可在網(wǎng)頁上制作出各種特殊效果。本文介紹水面特效的制作，將圖像映在波動(dòng)的水中，如圖1所示，運(yùn)行時(shí)水面是運(yùn)動(dòng)的。

圖1 水面特效

1 實(shí)現(xiàn)方案

1.1 總體設(shè)計(jì)

采用雙緩沖技術(shù)，先在圖像緩沖區(qū)中處理圖像，完成后再顯示到窗體上。為此需要設(shè)置圖像緩沖區(qū)，并將緩沖區(qū)邏輯劃分為左、右兩部分?？傮w制作過程為：緩沖區(qū)左半部顯示圖像，右半部繪制倒影，左半部制作動(dòng)畫幀（覆蓋圖像），窗體顯示圖像和動(dòng)畫幀。如圖2所示。

圖2 總體制作過程

1.2 繪制倒影

倒影的繪制采用逐線移動(dòng)的處理方法，如圖3所示。

圖3 繪制倒影

圖3中h是緩沖區(qū)高度，i是線號，在程序中可以作為循環(huán)變量。按照上圖的設(shè)計(jì)，向下移動(dòng)是正向，開始的移動(dòng)量是正的，但隨著i的不斷增加，移動(dòng)量將逐漸變?yōu)樨?fù)值，表示向上移動(dòng)。

1.3 繪制動(dòng)畫幀

本例設(shè)計(jì)12個(gè)動(dòng)畫幀，幀號0～11，存于num，幀數(shù)越多圖像越精細(xì)，但動(dòng)畫循環(huán)中的延時(shí)時(shí)間需要相應(yīng)縮短。水波為正弦波，不同的幀相位角angle不同，用如下公式計(jì)算：

angle=num?2?л/12

仍然采用逐線移動(dòng)的方法繪制動(dòng)畫幀，動(dòng)畫幀中的圖像線可以理解為是倒影中相應(yīng)圖像線偏離原先位置形成的。假設(shè)向上偏移，偏移量用變量wave存儲，當(dāng)wave為負(fù)時(shí)則表示向下偏移，如圖4所示。

圖4 繪制動(dòng)畫幀

2 程序設(shè)計(jì)

程序整體框架如下：

import java.awt.*；

import java.applet.*；

public class MyJavaApplet extends Applet

{ Image img； //圖像

Image imgBuff； //圖像緩沖區(qū)

Graphics ibg； //緩沖區(qū)畫筆

int w，h； //圖像寬高

int num=0； //幀號

double angle； //相位角

int wave； //偏移量

public void init（）

{ //加載圖像、追蹤、獲取圖像寬高

//創(chuàng)建緩沖區(qū)及其畫筆

//在緩沖區(qū)的左半部顯示圖像

//在緩沖區(qū)的右半部繪制倒影

}

public void paint（Graphics g）

{ //計(jì)算當(dāng)前幀的相位角

//在緩沖區(qū)的左半部繪制動(dòng)畫幀

//產(chǎn)生下一幀的幀號

//在Applet窗體上部顯示圖像

//在Applet窗體下部顯示動(dòng)畫幀

//休眠50毫秒

repaint（）；

}

public void update（Graphics g）

{ paint（g）；

}

}

由于設(shè)計(jì)在paint方法中完成循環(huán)，在paint方法的最后，使用repaint方法再調(diào)用paint。程序使用了update方法，且在其中使用參數(shù)g調(diào)用paint方法，其作用是取消每次循環(huán)的清屏操作，避免動(dòng)畫出現(xiàn)閃爍[5]。

在init方法的最后，按照設(shè)計(jì)方案，使用循環(huán)，用逐線移動(dòng)的方法，在緩沖區(qū)的右半部繪制倒影，代碼[2]為：

for（int i=0；i

{ ibg.copyArea（0，i，w，1，w，（h-1）-2*i）；

}

循環(huán)變量i即線號；copyArea方法前4個(gè)參數(shù)指定了一個(gè)區(qū)域的左上角坐標(biāo)（0，i），和寬（w）高（1），即一根圖像線，后2個(gè)參數(shù)說明向右移動(dòng)w和向下移動(dòng)（h-1）-2*i，即移動(dòng)到緩沖區(qū)右半部形成倒影的位置，向下的移動(dòng)量在設(shè)計(jì)方案中已經(jīng)分析過；循環(huán)執(zhí)行結(jié)束后，倒影也繪制完成。

在paint方法中，繪制動(dòng)畫幀也是在循環(huán)中采用逐線移動(dòng)的方法，代碼如下[3]：

for（int i=0；i

{ wave=（int）（（i/12.0+1）*Math.sin（h/12.0*（h-i）/（i+1）+angle））；

ibg.copyArea（w，i+wave，w，1，-w，-wave）；

}

循環(huán)變量i即線號，循環(huán)中先計(jì)算倒影圖像中相應(yīng)的圖像線偏離原先位置的偏移量wave，然后使用copyArea方法移動(dòng)，偏移量wave在設(shè)計(jì)方案中已經(jīng)分析過。copyArea方法的前4個(gè)參數(shù)指定了一個(gè)區(qū)域的左上角坐標(biāo)（w，i+wave），和寬（w）高（1），即顯示在緩沖區(qū)右半部的倒影圖像上水平方向的一根圖像線；后2個(gè)參數(shù)說明向左移動(dòng)w和向上移動(dòng)wave，即移動(dòng)到緩沖區(qū)左半部形成動(dòng)畫幀的位置。循環(huán)執(zhí)行結(jié)束后，一個(gè)動(dòng)畫幀也就繪制完成[4]。

3 應(yīng)用要點(diǎn)

實(shí)際應(yīng)用中，展示水面特效的Applet窗體尺寸是由網(wǎng)頁設(shè)計(jì)規(guī)劃確定的，可通過標(biāo)記傳送，程序用getParameter方法接收[1]。標(biāo)記應(yīng)在和標(biāo)記之間，無論什么類型的數(shù)據(jù)，都是以字符串的形式傳送的，格式為：

getParameter方法原型為：

String getParameter（"參數(shù)名"）

返回值是字符串類型的，需要時(shí)可在程序中將其轉(zhuǎn)換為原始類型。

參考文獻(xiàn)：

[1] 陳杰華.JavaScript Web開發(fā)技術(shù)（第2版）[M].清華大學(xué)出版社，

2013.

[2] 于波.Java程序設(shè)計(jì)與工程實(shí)踐[M].清華大學(xué)出版社，2013.

[3] 孫燮華.Java程序設(shè)計(jì)與應(yīng)用開發(fā)[M].機(jī)械工業(yè)出版社，2013.

[4] 吳其慶.Java編程思想與實(shí)踐[M].冶金工業(yè)出版社，2002.

[5] 王克宏.Java技術(shù)及其應(yīng)用[M].高等教育出版社，2001.