[發明專利]WEB頁面中向量圖形可視化編輯的方法

在審

• 申請號: 201410420808.5
• 申請日: 2014-08-25
• 公開（公告）號: CN104182233A
• 公開（公告）日: 2014-12-03
• 發明（設計）人: 施霞虹
• 申請（專利權）人: 南寧市磁匯科技有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06T11/60
• 代理公司: 北京海虹嘉誠知識產權代理有限公司 11129
• 代理人: 張濤

技術領域

本發明涉及WEB頁面處理技術領域，具體涉及WEB頁面中向量圖形可視化編輯的方法。

背景技術

對WEB頁面中向量圖形的編輯是一個困難的問題，多數向量圖形的最終顯示效果是由一些特殊的點的位置確定的(例如，折線是由所有拐點的位置確定的，曲線是由起點、終點和兩個位于曲線外的中間控制點確定的)，而根據這些特殊點的位置最終確定向量圖形其他點的數據是一個復雜的計算過程。因此，雖然理論上通過確定這些點的位置就可以確定最終的圖形，但在實際中，由于數學運算過于復雜，導致無法準確確定其他點的坐標。比較有效的方法只能通過大量實驗來篩選合適的點的位置。這就導致向量圖形的編輯效率低下，速度慢。

發明內容

針對現有技術WEB頁面向量圖形編輯效率低下的問題，本發明提供了一種WEB頁面中向量圖形可視化編輯的方法，解決了“WEB頁面中向量圖形可視化編輯”問題，達到“所見即所得”的效果。

本發明技術方案

WEB頁面中向量圖形可視化編輯的方法包括如下步驟：

⒈在向量圖形中選定控制點，具體方法是：

⑴分配N個控制點于一向量圖形的邊緣，N為大于2的自然數；

⑵依據所述控制點將該向量圖形分割為N-2個三角向量圖形；

⑶選定上述控制點其中之一進行拖拽；

⑷計算具有被選定的控制點的三角向量圖形的一更新向量；

⑸根據所計算的更新向量重新繪制所述三角向量圖形

⒉為上述選定的控制點添加事件。

WEB頁面中向量圖形可視化編輯的方法還包括以下步驟：以可視化形式標識所述選定的控制點。

所述可視化形式為將選定的控制點顯示為在所述向量圖形中突出可見的黑點。

步驟2中所述添加的事件為鼠標事件和/或鍵盤事件。

本發明的技術效果：

本發明提供一種WEB頁面中向量圖形可視化編輯方法，需要分配、分割、生成、拖拽、計算、繪制六個具體動作，歸納為在向量圖形中選定控制點和為上述選定的控制點添加事件兩大主要步驟。

本發明提供的WEB頁面中向量圖形可視化編輯方法解決了無法預知給定點的坐標究竟會產生何種效果的問題，通過復雜的運算，腳本語言可以即時確定一個向量圖形的所有控制點并通過合適的方式(例如一個黑點)在屏幕上顯示出來，并且動態地為這些黑點添加鼠標和鍵盤事件。在用戶按下、移動和釋放鼠標或按下按鍵時，腳本代碼會根據預定義的功能移動這些黑點，同時通過運算，重繪相關的向量圖形，達到“所見即所得”的效果。

附圖說明

圖1是本發明WEB頁面中向量圖形可視化編輯方法示意圖。

具體實施方式

WEB頁面中向量圖形的編輯是一個困難的問題，雖然理論上通過確定這些點的位置就可以確定最終的圖形，但在實際中，由于數學運算過于復雜，導致無法預知給定點的坐標究竟會產生什么樣的效果。唯一的方法只能通過大量實驗來篩選合適的點的位置。本發明提供的WEB頁面中向量圖形可視化編輯方法解決了無法預知給定點的坐標究竟會產生何種效果的問題，通過復雜的運算，腳本語言可以即時確定一個向量圖形的所有控制點并通過合適的方式(例如一個黑點)在屏幕上顯示出來，并且動態地為這些黑點添加鼠標和鍵盤事件。在用戶按下、移動和釋放鼠標或按下按鍵時，腳本代碼會根據預定義的功能移動這些黑點，同時通過運算，重繪相關的向量圖形，達到“所見即所得”的效果。

以下結合附圖對本發明的實施例作進一步說明。

圖1是本發明WEB頁面中向量圖形可視化編輯方法示意圖。如圖1所示，實現本發明WEB頁面中向量圖形可視化編輯方法需要分配、分割、生成、拖拽、計算、繪制六個具體動作，歸納為在向量圖形中選定控制點和為上述選定的控制點添加事件兩大主要步驟，具體為

WEB頁面中向量圖形可視化編輯的方法包括如下步驟：

⒈在向量圖形中選定控制點，具體方法是：

⑴分配N個控制點于一向量圖形的邊緣，N為大于2的自然數；

⑵依據所述控制點將該向量圖形分割為N-2個三角向量圖形；

⑶選定上述控制點其中之一進行拖拽；

⑷計算具有被選定的控制點的三角向量圖形的一更新向量；

⑸根據所計算的更新向量重新繪制所述三角向量圖形

⒉為上述選定的控制點添加事件。

WEB頁面中向量圖形可視化編輯的方法還包括以下步驟：以可視化形式標識所述選定的控制點。所述可視化形式為將選定的控制點顯示為在所述向量圖形中突出可見的黑點。步驟B中所述添加的事件為鼠標事件和/或鍵盤事件。

以上對本發明所提供的WEB頁面中向量圖形可視化編輯方法進行了詳細介紹。本文中應用具體實施例對本發明的原理和實施方式進行了闡述，以上實施例的說明只是用于幫助理解本發明的方法及其核心思想；同時，對于本領域的技術人員，依據本發明的思想，在具體實施方式及應用范圍上仍然可以對本發明創造進行修改或者等同替換；綜上所述，本說明書內容不應理解為對本發明的限制，一切不脫離本發明的精神和范圍的技術方案及其改進，其均涵蓋在本發明創造專利的保護范圍當中。