在web頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的裝置和方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及WEB頁面圖片裁切技術(shù)，特別是涉及在WEB頁面上用背景圖片位置屬性實(shí)現(xiàn)的動(dòng)態(tài)圖片裁切的方法和實(shí)現(xiàn)該方法的裝置。
【背景技術(shù)】
[0002]在WEB頁面中，動(dòng)態(tài)地對(duì)圖片進(jìn)行裁切時(shí)，傳統(tǒng)上均是使用和濾鏡或向量圖形有關(guān)的方法，例如應(yīng)用特技濾鏡裁切圖片時(shí)，因?yàn)榇蠖鄶?shù)濾鏡效果是在選區(qū)或浮動(dòng)層中應(yīng)用，因此應(yīng)先激活對(duì)象浮動(dòng)層或制作選區(qū)，然后通過調(diào)節(jié)各種濾鏡參數(shù)觀察到各種作用效果，傳統(tǒng)方法非常復(fù)雜而且不夠直觀，給使用者帶來了很大不便。

【發(fā)明內(nèi)容】

[0003]本發(fā)明解決現(xiàn)有技術(shù)在WEB頁面動(dòng)態(tài)裁切圖片時(shí)復(fù)雜、不直觀的問題，提供了一種更易使用更直觀的方法，能夠使得裁切圖片變的更簡單，實(shí)現(xiàn)WEB頁面中動(dòng)態(tài)地對(duì)圖片進(jìn)行裁切的方法和實(shí)現(xiàn)該方法的裝置。
[0004]本發(fā)明方法包括如下步驟:
[0005]A、將所需裁切的圖片設(shè)置為層對(duì)象的背景圖片，并將背景屬性設(shè)置為雙向重復(fù)；
[0006]B、為層對(duì)象添加鼠標(biāo)和/或鍵盤事件；
[0007]C、根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，實(shí)時(shí)改變背景圖片的位置屬性；
[0008]D、逆向移動(dòng)背景圖片的相對(duì)位置。
[0009]所述A步驟中層對(duì)象包括DIV或類似對(duì)象。
[0010]本發(fā)明裝置包括順次相連的:
[0011]客戶端圖片設(shè)置模塊，背景屬性設(shè)置模塊；
[0012]服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊，運(yùn)算模塊，背景圖片處理模塊；
[0013]所述客戶端圖片設(shè)置模塊將所需裁切的圖片設(shè)置為層對(duì)象的背景圖片，然后由背景屬性設(shè)置模塊將背景屬性設(shè)置為雙向重復(fù)；由所述服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊為層對(duì)象添加鼠標(biāo)和/或鍵盤事件，再通過運(yùn)算模塊根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，并將運(yùn)算結(jié)果送至背景圖片處理模塊，背景圖片處理模塊實(shí)時(shí)改變背景圖片的位置屬性，并逆向移動(dòng)背景圖片的相對(duì)位置。
[0014]技術(shù)效果:
[0015]本發(fā)明在WEB頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的方法將圖片設(shè)置為層對(duì)象(DIV)或其它類似對(duì)象的背景圖片，并將背景屬性設(shè)置為雙向重復(fù)；為層對(duì)象添加鼠標(biāo)和/或鍵盤事件，使得層對(duì)象可以被移動(dòng)和改變尺寸；在移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)，根據(jù)移動(dòng)或改變尺寸的數(shù)據(jù)進(jìn)行運(yùn)算，實(shí)時(shí)改變背景圖片的位置屬性；逆向移動(dòng)背景圖片的相對(duì)位置。這樣，在層對(duì)象的移動(dòng)或改變尺寸的過程中，視覺上背景圖片并沒有移動(dòng)，而是被裁切，這樣的方法使得裁切圖片變的更簡單、直觀，運(yùn)行時(shí)的系統(tǒng)效率也更高。
【附圖說明】
[0016]圖1是本發(fā)明方法的流程圖。
[0017]圖2是本發(fā)明裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0018]結(jié)合附圖詳細(xì)說明本發(fā)明的方法和裝置。
[0019]圖1是本發(fā)明方法的流程圖，首先是在客戶端將需要裁切的圖片設(shè)置為層對(duì)象(DIV)或其它類似對(duì)象的背景圖片，然后設(shè)置背景屬性，將背景屬性設(shè)置為雙向重復(fù)，再在服務(wù)器端為層對(duì)象添加鼠標(biāo)和/或鍵盤事件，使得層對(duì)象可以被移動(dòng)和改變尺寸；在客戶端移動(dòng)層對(duì)象或改變層對(duì)象尺寸，服務(wù)器端根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，實(shí)時(shí)改變背景圖片的位置屬性，并逆向移動(dòng)背景圖片的相對(duì)位置。
[0020]圖2是本發(fā)明裝置的結(jié)構(gòu)示意圖，包括順次相連的:客戶端圖片設(shè)置模塊，背景屬性設(shè)置模塊；服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊，運(yùn)算模塊，背景圖片處理模塊；所述客戶端圖片設(shè)置模塊將所需裁切的圖片設(shè)置為層對(duì)象(DIV)或其它類似對(duì)象的背景圖片，然后由背景屬性設(shè)置模塊將背景屬性設(shè)置為雙向重復(fù)；由所述服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊為層對(duì)象添加鼠標(biāo)和/或鍵盤事件，使得層對(duì)象可以被移動(dòng)和改變尺寸，再通過運(yùn)算模塊根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，并將運(yùn)算結(jié)果送至背景圖片處理模塊，背景圖片處理模塊實(shí)時(shí)改變背景圖片的位置屬性，并逆向移動(dòng)背景圖片的相對(duì)位置。
[0021]以上所述的實(shí)例僅是本發(fā)明的優(yōu)選實(shí)施方式，應(yīng)當(dāng)指出，對(duì)于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以作出若干改進(jìn)和潤飾，這些改進(jìn)和潤飾也應(yīng)視為本發(fā)明的保護(hù)范圍。
【主權(quán)項(xiàng)】
1.在WEB頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的方法，其特征在于包括如下步驟: A、將所需裁切的圖片設(shè)置為層對(duì)象的背景圖片，并將背景屬性設(shè)置為雙向重復(fù)； B、為層對(duì)象添加鼠標(biāo)和/或鍵盤事件； C、根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，實(shí)時(shí)改變背景圖片的位置屬性； D、逆向移動(dòng)背景圖片的相對(duì)位置。
2.根據(jù)權(quán)利要求1所述的在WEB頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的方法，其特征在于所述A步驟中層對(duì)象包括DIV或類似對(duì)象。
3.在WEB頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的裝置，其特征在于包括順次相連的:客戶端圖片設(shè)置模塊，背景屬性設(shè)置模塊；服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊，運(yùn)算模塊，背景圖片處理模塊；所述客戶端圖片設(shè)置模塊將所需裁切的圖片設(shè)置為層對(duì)象的背景圖片，然后由背景屬性設(shè)置模塊將背景屬性設(shè)置為雙向重復(fù)；由所述服務(wù)器端鼠標(biāo)和/或鍵盤事件添加模塊為層對(duì)象添加鼠標(biāo)和/或鍵盤事件，再通過運(yùn)算模塊根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，并將運(yùn)算結(jié)果送至背景圖片處理模塊，背景圖片處理模塊實(shí)時(shí)改變背景圖片的位置屬性，并逆向移動(dòng)背景圖片的相對(duì)位置。
【專利摘要】本發(fā)明涉及在WEB頁面實(shí)現(xiàn)動(dòng)態(tài)圖片裁切的裝置和方法，其特征在于包括如下步驟：A.將所需裁切的圖片設(shè)置為層對(duì)象的背景圖片，并將背景屬性設(shè)置為雙向重復(fù)；B.為層對(duì)象添加鼠標(biāo)和/或鍵盤事件；C.根據(jù)移動(dòng)層對(duì)象或改變層對(duì)象的尺寸時(shí)產(chǎn)生的數(shù)據(jù)進(jìn)行運(yùn)算，實(shí)時(shí)改變背景圖片的位置屬性；D.逆向移動(dòng)背景圖片的相對(duì)位置。在層對(duì)象的移動(dòng)或改變尺寸的過程中，視覺上背景圖片并沒有移動(dòng)，而是被裁切，這樣的方法使得裁切圖片變的更簡單、直觀，運(yùn)行時(shí)的系統(tǒng)效率也更高。
【IPC分類】G06F17-30, G06F9-44
【公開號(hào)】CN104714793
【申請(qǐng)?zhí)枴緾N201410360177
【發(fā)明人】施霞虹
【申請(qǐng)人】南寧市磁匯科技有限公司
【公開日】2015年6月17日
【申請(qǐng)日】2014年7月25日