Web頁面中向量圖形可視化編輯的方法
【專利摘要】本發(fā)明提供WEB頁面中向量圖形可視化編輯方法，需要分配、分割、生成、拖拽、計(jì)算、繪制六個(gè)具體動(dòng)作，歸納為在向量圖形中選定控制點(diǎn)和為上述選定的控制點(diǎn)添加事件兩大主要步驟。本發(fā)明提供的WEB頁面中向量圖形可視化編輯方法解決了無法預(yù)知給定點(diǎn)的坐標(biāo)究竟會(huì)產(chǎn)生何種效果的問題，通過復(fù)雜的運(yùn)算，腳本語言可以即時(shí)確定一個(gè)向量圖形的所有控制點(diǎn)并通過合適的方式(例如一個(gè)黑點(diǎn))在屏幕上顯示出來，并且動(dòng)態(tài)地為這些黑點(diǎn)添加鼠標(biāo)和鍵盤事件。在用戶按下、移動(dòng)和釋放鼠標(biāo)或按下按鍵時(shí)，腳本代碼會(huì)根據(jù)預(yù)定義的功能移動(dòng)這些黑點(diǎn)，同時(shí)通過運(yùn)算，重繪相關(guān)的向量圖形，達(dá)到“所見即所得”的效果。
【專利說明】WEB頁面中向量圖形可視化編輯的方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及WEB頁面處理【技術(shù)領(lǐng)域】，具體涉及WEB頁面中向量圖形可視化編輯的方法。

【背景技術(shù)】
[0002]對(duì)WEB頁面中向量圖形的編輯是一個(gè)困難的問題，多數(shù)向量圖形的最終顯示效果是由一些特殊的點(diǎn)的位置確定的(例如，折線是由所有拐點(diǎn)的位置確定的，曲線是由起點(diǎn)、終點(diǎn)和兩個(gè)位于曲線外的中間控制點(diǎn)確定的)，而根據(jù)這些特殊點(diǎn)的位置最終確定向量圖形其他點(diǎn)的數(shù)據(jù)是一個(gè)復(fù)雜的計(jì)算過程。因此，雖然理論上通過確定這些點(diǎn)的位置就可以確定最終的圖形，但在實(shí)際中，由于數(shù)學(xué)運(yùn)算過于復(fù)雜，導(dǎo)致無法準(zhǔn)確確定其他點(diǎn)的坐標(biāo)。比較有效的方法只能通過大量實(shí)驗(yàn)來篩選合適的點(diǎn)的位置。這就導(dǎo)致向量圖形的編輯效率低下，速度慢。


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

[0003]針對(duì)現(xiàn)有技術(shù)WEB頁面向量圖形編輯效率低下的問題，本發(fā)明提供了一種WEB頁面中向量圖形可視化編輯的方法，解決了“WEB頁面中向量圖形可視化編輯”問題，達(dá)到“所見即所得”的效果。
[0004]本發(fā)明技術(shù)方案
[0005]WEB頁面中向量圖形可視化編輯的方法包括如下步驟:
[0006]1.在向量圖形中選定控制點(diǎn)，具體方法是:
[0007]⑴分配N個(gè)控制點(diǎn)于一向量圖形的邊緣，N為大于2的自然數(shù)；
[0008]⑵依據(jù)所述控制點(diǎn)將該向量圖形分割為N-2個(gè)三角向量圖形；
[0009]⑶選定上述控制點(diǎn)其中之一進(jìn)行拖拽；
[0010]⑷計(jì)算具有被選定的控制點(diǎn)的三角向量圖形的一更新向量；
[0011](5)根據(jù)所計(jì)算的更新向量重新繪制所述三角向量圖形
[0012]2.為上述選定的控制點(diǎn)添加事件。
[0013]WEB頁面中向量圖形可視化編輯的方法還包括以下步驟:以可視化形式標(biāo)識(shí)所述選定的控制點(diǎn)。
[0014]所述可視化形式為將選定的控制點(diǎn)顯示為在所述向量圖形中突出可見的黑點(diǎn)。
[0015]步驟2中所述添加的事件為鼠標(biāo)事件和/或鍵盤事件。
[0016]本發(fā)明的技術(shù)效果:
[0017]本發(fā)明提供一種WEB頁面中向量圖形可視化編輯方法，需要分配、分割、生成、拖拽、計(jì)算、繪制六個(gè)具體動(dòng)作，歸納為在向量圖形中選定控制點(diǎn)和為上述選定的控制點(diǎn)添加事件兩大主要步驟。
[0018]本發(fā)明提供的WEB頁面中向量圖形可視化編輯方法解決了無法預(yù)知給定點(diǎn)的坐標(biāo)究竟會(huì)產(chǎn)生何種效果的問題，通過復(fù)雜的運(yùn)算，腳本語言可以即時(shí)確定一個(gè)向量圖形的所有控制點(diǎn)并通過合適的方式(例如一個(gè)黑點(diǎn))在屏幕上顯示出來，并且動(dòng)態(tài)地為這些黑點(diǎn)添加鼠標(biāo)和鍵盤事件。在用戶按下、移動(dòng)和釋放鼠標(biāo)或按下按鍵時(shí)，腳本代碼會(huì)根據(jù)預(yù)定義的功能移動(dòng)這些黑點(diǎn)，同時(shí)通過運(yùn)算，重繪相關(guān)的向量圖形，達(dá)到“所見即所得”的效果。

【專利附圖】

【附圖說明】
[0019]圖1是本發(fā)明WEB頁面中向量圖形可視化編輯方法示意圖。

【具體實(shí)施方式】
[0020]WEB頁面中向量圖形的編輯是一個(gè)困難的問題，雖然理論上通過確定這些點(diǎn)的位置就可以確定最終的圖形，但在實(shí)際中，由于數(shù)學(xué)運(yùn)算過于復(fù)雜，導(dǎo)致無法預(yù)知給定點(diǎn)的坐標(biāo)究竟會(huì)產(chǎn)生什么樣的效果。唯一的方法只能通過大量實(shí)驗(yàn)來篩選合適的點(diǎn)的位置。本發(fā)明提供的WEB頁面中向量圖形可視化編輯方法解決了無法預(yù)知給定點(diǎn)的坐標(biāo)究竟會(huì)產(chǎn)生何種效果的問題，通過復(fù)雜的運(yùn)算，腳本語言可以即時(shí)確定一個(gè)向量圖形的所有控制點(diǎn)并通過合適的方式(例如一個(gè)黑點(diǎn))在屏幕上顯示出來，并且動(dòng)態(tài)地為這些黑點(diǎn)添加鼠標(biāo)和鍵盤事件。在用戶按下、移動(dòng)和釋放鼠標(biāo)或按下按鍵時(shí)，腳本代碼會(huì)根據(jù)預(yù)定義的功能移動(dòng)這些黑點(diǎn)，同時(shí)通過運(yùn)算，重繪相關(guān)的向量圖形，達(dá)到“所見即所得”的效果。
[0021]以下結(jié)合附圖對(duì)本發(fā)明的實(shí)施例作進(jìn)一步說明。
[0022]圖1是本發(fā)明WEB頁面中向量圖形可視化編輯方法示意圖。如圖1所示，實(shí)現(xiàn)本發(fā)明WEB頁面中向量圖形可視化編輯方法需要分配、分割、生成、拖拽、計(jì)算、繪制六個(gè)具體動(dòng)作，歸納為在向量圖形中選定控制點(diǎn)和為上述選定的控制點(diǎn)添加事件兩大主要步驟，具體為
[0023]WEB頁面中向量圖形可視化編輯的方法包括如下步驟:
[0024]1.在向量圖形中選定控制點(diǎn)，具體方法是:
[0025]⑴分配N個(gè)控制點(diǎn)于一向量圖形的邊緣，N為大于2的自然數(shù)；
[0026]⑵依據(jù)所述控制點(diǎn)將該向量圖形分割為N-2個(gè)三角向量圖形；
[0027]⑶選定上述控制點(diǎn)其中之一進(jìn)行拖拽；
[0028]⑷計(jì)算具有被選定的控制點(diǎn)的三角向量圖形的一更新向量；
[0029](5)根據(jù)所計(jì)算的更新向量重新繪制所述三角向量圖形
[0030]2.為上述選定的控制點(diǎn)添加事件。
[0031]WEB頁面中向量圖形可視化編輯的方法還包括以下步驟:以可視化形式標(biāo)識(shí)所述選定的控制點(diǎn)。所述可視化形式為將選定的控制點(diǎn)顯示為在所述向量圖形中突出可見的黑點(diǎn)。步驟B中所述添加的事件為鼠標(biāo)事件和/或鍵盤事件。
[0032]以上對(duì)本發(fā)明所提供的WEB頁面中向量圖形可視化編輯方法進(jìn)行了詳細(xì)介紹。本文中應(yīng)用具體實(shí)施例對(duì)本發(fā)明的原理和實(shí)施方式進(jìn)行了闡述，以上實(shí)施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想；同時(shí)，對(duì)于本領(lǐng)域的技術(shù)人員，依據(jù)本發(fā)明的思想，在【具體實(shí)施方式】及應(yīng)用范圍上仍然可以對(duì)本發(fā)明創(chuàng)造進(jìn)行修改或者等同替換；綜上所述，本說明書內(nèi)容不應(yīng)理解為對(duì)本發(fā)明的限制，一切不脫離本發(fā)明的精神和范圍的技術(shù)方案及其改進(jìn)，其均涵蓋在本發(fā)明創(chuàng)造專利的保護(hù)范圍當(dāng)中。
【權(quán)利要求】
1.WEB頁面中向量圖形可視化編輯的方法，其特征在于，包括如下步驟: 在向量圖形中選定控制點(diǎn)，具體方法是: ⑴分配N個(gè)控制點(diǎn)于一向量圖形的邊緣，N為大于2的自然數(shù)； ⑵依據(jù)所述控制點(diǎn)將該向量圖形分割為N-2個(gè)三角向量圖形； ⑶選定上述控制點(diǎn)其中之一進(jìn)行拖拽； ⑷計(jì)算具有被選定的控制點(diǎn)的三角向量圖形的一更新向量； (5)根據(jù)所計(jì)算的更新向量重新繪制所述三角向量圖形 為上述選定的控制點(diǎn)添加事件。
2.根據(jù)權(quán)利要求1所述的WEB頁面中向量圖形可視化編輯的方法，其特征在于，WEB頁面中向量圖形可視化編輯的方法還包括以可視化形式標(biāo)識(shí)所述選定的控制點(diǎn)。 所述可視化形式為將選定的控制點(diǎn)顯示為在所述向量圖形中突出可見的黑點(diǎn)。 步驟2中所述添加的事件為鼠標(biāo)事件和/或鍵盤事件。
3.根據(jù)權(quán)利要求2所述的WEB頁面中向量圖形可視化編輯的方法，其特征在于，所述可視化形式為將選定的控制點(diǎn)顯示為在所述向量圖形中突出可見的黑點(diǎn)。
4.根據(jù)權(quán)利要求1-3之一所述的WEB頁面中向量圖形可視化編輯的方法，其特征在于步驟B中所述添加的事件為鼠標(biāo)事件和/或鍵盤事件。
【文檔編號(hào)】G06T11/60GK104182233SQ201410420808
【公開日】2014年12月3日 申請(qǐng)日期:2014年8月25日 優(yōu)先權(quán)日:2013年12月19日
【發(fā)明者】施霞虹 申請(qǐng)人:南寧市磁匯科技有限公司