本發(fā)明屬于計(jì)算機(jī)繪圖領(lǐng)域，具體涉及一種基于svg(scalablevectorgraphics，可縮放矢量圖形)實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法。

背景技術(shù)：

隨著計(jì)算機(jī)技術(shù)的發(fā)展，人機(jī)交互的要求越來(lái)越高。通過(guò)豐富的圖形能夠直觀(guān)地、準(zhǔn)確地將當(dāng)前信息呈現(xiàn)在用戶(hù)眼前，比如采用兩點(diǎn)間的動(dòng)態(tài)連線(xiàn)(首先自動(dòng)生成一目標(biāo)對(duì)象，然后使所述目標(biāo)對(duì)象從其中一點(diǎn)向另一點(diǎn)移動(dòng))表達(dá)兩點(diǎn)間的關(guān)系。傳統(tǒng)的實(shí)現(xiàn)方式，一般采用css(cascadingstylesheet，層疊樣式表)3或javascript(一種直譯式腳本語(yǔ)言)控制，利用css動(dòng)畫(huà)實(shí)現(xiàn)固定兩點(diǎn)的動(dòng)態(tài)連線(xiàn)，比如，把兩點(diǎn)視為dom(documentobjectmodel，文檔對(duì)象模型))元素，先采用定位的方式對(duì)兩點(diǎn)進(jìn)行布局，然后利用css3的@keyframes(關(guān)鍵幀)規(guī)則實(shí)現(xiàn)動(dòng)畫(huà)。

傳統(tǒng)方法存在以下問(wèn)題：較難控制兩點(diǎn)的位置，實(shí)現(xiàn)連線(xiàn)的動(dòng)態(tài)生成比較困難，開(kāi)發(fā)難度和成本均較高，且無(wú)法靈活地表現(xiàn)動(dòng)態(tài)效果。

技術(shù)實(shí)現(xiàn)要素：

為了解決現(xiàn)有技術(shù)中存在的上述問(wèn)題，本發(fā)明提出一種基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法。

為實(shí)現(xiàn)上述目的，本發(fā)明采用如下技術(shù)方案：

本發(fā)明提供一種基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法，包括：

根據(jù)第一點(diǎn)的坐標(biāo)和第二點(diǎn)的坐標(biāo)，計(jì)算所述第一點(diǎn)和所述第二點(diǎn)之間的距離；

將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段分成n段，計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，n的大小與所述距離有關(guān)，所述距離越大，n越大；

基于svg，在所述第一點(diǎn)處生成一個(gè)形狀為平面幾何圖形的目標(biāo)對(duì)象，從所述第一點(diǎn)開(kāi)始，每隔一時(shí)間間隔，依次在各個(gè)分點(diǎn)及所述第二點(diǎn)處生成目標(biāo)對(duì)象；所述目標(biāo)對(duì)象的大小與所述距離有關(guān)，所述距離越大，所述目標(biāo)對(duì)象越大；

在所述第二點(diǎn)處生成目標(biāo)對(duì)象后，使生成的所有目標(biāo)對(duì)象消失。

進(jìn)一步地，所述根據(jù)第一點(diǎn)的坐標(biāo)和第二點(diǎn)的坐標(biāo)，計(jì)算所述第一點(diǎn)和所述第二點(diǎn)之間的距離，包括：

按下式計(jì)算所述距離l：

式中，(x1,y1)、(x2,y2)分別為所述第一點(diǎn)和所述第二點(diǎn)的坐標(biāo)。

進(jìn)一步地，所述將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段分成n段，計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，具體為：將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段等分成n段，按下式計(jì)算第i個(gè)等分點(diǎn)的坐標(biāo)(xi,yi)：

xi＝x1+i×(x2-x1)/n

yi＝y(tǒng)1+i×(y2-y1)/n

式中，i＝1,2,……,n-1，(x1,y1)、(x2,y2)分別為所述第一點(diǎn)和所述第二點(diǎn)的坐標(biāo)，第一個(gè)等分點(diǎn)與所述第一點(diǎn)相鄰，第n-1個(gè)等分點(diǎn)與所述第二點(diǎn)相鄰。

進(jìn)一步地，所述平面幾何圖形為等腰三角形。

進(jìn)一步地，所述方法還包括：利用svg的fill屬性設(shè)置所述目標(biāo)對(duì)象的顏色。

進(jìn)一步地，所述時(shí)間間隔相同。

進(jìn)一步地，不同位置目標(biāo)對(duì)象的大小相同。

進(jìn)一步地，所述方法還包括：目標(biāo)對(duì)象消失時(shí)插入動(dòng)態(tài)效果。

與現(xiàn)有技術(shù)相比，本發(fā)明具有以下有益效果：

本發(fā)明通過(guò)將從第一點(diǎn)到第二點(diǎn)的線(xiàn)段分成多個(gè)小段，計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，基于svg在第一點(diǎn)處生成目標(biāo)對(duì)象，并從第一點(diǎn)開(kāi)始，每隔一時(shí)間間隔依次在各個(gè)分點(diǎn)及第二點(diǎn)處生成目標(biāo)對(duì)象，實(shí)現(xiàn)了從第一點(diǎn)到第二點(diǎn)的動(dòng)態(tài)連線(xiàn)。本發(fā)明基于svg生成目標(biāo)對(duì)象，只需很少的幾個(gè)特征參數(shù)，如三角形的三個(gè)頂點(diǎn)的坐標(biāo)，就能生成目標(biāo)對(duì)象并進(jìn)而實(shí)現(xiàn)兩點(diǎn)間的動(dòng)態(tài)連線(xiàn)，方法簡(jiǎn)便，計(jì)算量小，能夠靈活地進(jìn)行動(dòng)態(tài)連線(xiàn)控制。

附圖說(shuō)明

圖1本發(fā)明一種基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法實(shí)施例的流程圖；

圖2本發(fā)明另一實(shí)施例中目標(biāo)對(duì)象的示意圖。

具體實(shí)施方式

下面結(jié)合附圖對(duì)本發(fā)明作進(jìn)一步詳細(xì)說(shuō)明。

本發(fā)明實(shí)施例提供一種基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法。svg是基于可擴(kuò)展標(biāo)記語(yǔ)言(xml)，用于描述二維矢量圖形的一種圖形格式。svg是w3c(worldwidewebconsortium，國(guó)際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織)于2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。svg嚴(yán)格遵從xml語(yǔ)法，并用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容，因此，svg是一種與圖像分辨率無(wú)關(guān)的矢量圖形格式。

本發(fā)明實(shí)施例一種基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)的方法流程圖如圖1所示，包括：

步驟101，根據(jù)第一點(diǎn)的坐標(biāo)和第二點(diǎn)的坐標(biāo)，計(jì)算所述第一點(diǎn)和所述第二點(diǎn)之間的距離；

本步驟101根據(jù)坐標(biāo)計(jì)算第一點(diǎn)和第二點(diǎn)之間的距離，目的是作為后面確定分點(diǎn)個(gè)數(shù)或確定目標(biāo)對(duì)象的大小的一個(gè)參考值，一般來(lái)說(shuō)，所述距離越大，生成的目標(biāo)對(duì)象就越大，需要的分點(diǎn)個(gè)數(shù)也越多。

步驟102，將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段分成n段，計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，n的大小與所述距離有關(guān)，所述距離越大，n越大；

本實(shí)施例是通過(guò)在所述第一點(diǎn)到所述第二點(diǎn)之間選取很多個(gè)位置點(diǎn)，然后通過(guò)每隔一個(gè)時(shí)間間隔依次在各位置點(diǎn)上生成目標(biāo)對(duì)象，形成動(dòng)態(tài)連線(xiàn)的效果。因此，需要首先求出這些位置點(diǎn)坐標(biāo)。本步驟102通過(guò)將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段分成n段，然后計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，來(lái)確定各個(gè)位置點(diǎn)。n的大小與所述距離有關(guān)，所述距離越大，n越大，其具體值通過(guò)實(shí)驗(yàn)確定。分割方法有多種，最簡(jiǎn)單的方法是等分法，即將所述線(xiàn)段分成長(zhǎng)度相等的n段。也可以采用非等分法，例如，使相鄰兩分點(diǎn)的距離符合某一函數(shù)規(guī)律。

步驟103，基于svg，在所述第一點(diǎn)處生成一個(gè)形狀為平面幾何圖形的目標(biāo)對(duì)象，從所述第一點(diǎn)開(kāi)始，每隔一時(shí)間間隔，依次在各個(gè)分點(diǎn)及所述第二點(diǎn)處生成目標(biāo)對(duì)象；所述目標(biāo)對(duì)象的大小與所述距離有關(guān)，所述距離越大，所述目標(biāo)對(duì)象越大；

在本步驟103中，首先基于svg在第一點(diǎn)處生成一個(gè)形狀為平面幾何圖形的目標(biāo)對(duì)象。所述目標(biāo)對(duì)象的大小與所述第一點(diǎn)和所述第二點(diǎn)之間的距離有關(guān)，所述距離越大，所述目標(biāo)對(duì)象越大，其具體尺寸可通過(guò)實(shí)驗(yàn)確定。所述平面幾何圖形可以為多邊形、圓形或橢圓形等。

與傳統(tǒng)的圖像格式不同的是，本實(shí)施例采用svg矢量化圖形，矢量圖形采用點(diǎn)和線(xiàn)來(lái)描述物體，矢量圖中簡(jiǎn)單的幾何圖形，只需要幾個(gè)特征數(shù)值就可以確定。比如三角形，只需要確定三個(gè)頂點(diǎn)的坐標(biāo)，圓只需要確定圓心的坐標(biāo)和半徑。所以圖形文件比較小，計(jì)算量也大大減小，同時(shí)還能提供高清晰的畫(huà)面。而傳統(tǒng)的位圖圖像的存儲(chǔ)單位是圖像上每一點(diǎn)的像素值，因此，圖像文件一般都很大，需占用很大的網(wǎng)絡(luò)帶寬。所以，與傳統(tǒng)方法比較，本實(shí)施例基于svg實(shí)現(xiàn)兩點(diǎn)動(dòng)態(tài)連線(xiàn)，具有占用內(nèi)存小、計(jì)算量小、運(yùn)行速度快、開(kāi)發(fā)成本低等優(yōu)點(diǎn)。

本步驟103通過(guò)從所述第一點(diǎn)開(kāi)始，每隔一時(shí)間間隔，依次在各個(gè)分點(diǎn)及所述第二點(diǎn)處生成目標(biāo)對(duì)象，實(shí)現(xiàn)從所述第一點(diǎn)到所述第二點(diǎn)的動(dòng)態(tài)連線(xiàn)。值得說(shuō)明的是，本步驟103中不同分點(diǎn)之間的時(shí)間間隔，可以相等，也可以不等；不同點(diǎn)生成目標(biāo)對(duì)象的大小可以相等，也可以不等。設(shè)置所述時(shí)間間隔或目標(biāo)對(duì)象的大小以不同的規(guī)律變化，可以獲得多種不同的動(dòng)態(tài)效果。

步驟104，在所述第二點(diǎn)處生成目標(biāo)對(duì)象后，使生成的所有目標(biāo)對(duì)象消失。

本步驟104給出了當(dāng)目標(biāo)對(duì)象移動(dòng)到終點(diǎn)即所述第二點(diǎn)時(shí)的處理方法，即在所述第二點(diǎn)處生成目標(biāo)對(duì)象后，使生成的所有目標(biāo)對(duì)象消失，也就是使動(dòng)態(tài)連線(xiàn)消失，完成從所述第一點(diǎn)到所述第二點(diǎn)的動(dòng)態(tài)連線(xiàn)。

作為一種可選實(shí)施例，所述根據(jù)第一點(diǎn)的坐標(biāo)和第二點(diǎn)的坐標(biāo)，計(jì)算所述第一點(diǎn)和所述第二點(diǎn)之間的距離，包括：

按下式計(jì)算所述距離l：

式中，(x1,y1)、(x2,y2)分別為所述第一點(diǎn)和所述第二點(diǎn)的坐標(biāo)。

在本實(shí)施例中，給出了計(jì)算所述第一點(diǎn)和所述第二點(diǎn)之間的距離的公式。根據(jù)求距離公式，基于svg計(jì)算兩點(diǎn)距離的代碼如下：

math.sqrt(math.pow(math.abs(x2-x1),2)+math.pow(math.abs(y2-y1),2))

作為一種可選實(shí)施例，所述將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段分成n段，計(jì)算每個(gè)分點(diǎn)的坐標(biāo)，具體為：將從所述第一點(diǎn)到所述第二點(diǎn)的線(xiàn)段等分成n段，按下式計(jì)算第i個(gè)等分點(diǎn)的坐標(biāo)(xi,yi)：

xi＝x1+i×(x2-x1)/n

yi＝y(tǒng)1+i×(y2-y1)/n

式中，i＝1,2,……,n-1，(x1,y1)、(x2,y2)分別為所述第一點(diǎn)和所述第二點(diǎn)的坐標(biāo)，第一個(gè)等分點(diǎn)與所述第一點(diǎn)相鄰，第n-1個(gè)等分點(diǎn)與所述第二點(diǎn)相鄰。

作為一種可選實(shí)施例，所述平面幾何圖形為等腰三角形。

在第一種實(shí)施例中，所述平面幾何圖形可以為多邊形、圓形或橢圓形等。三角形是最簡(jiǎn)單的多邊形，只需給出3個(gè)頂點(diǎn)的坐標(biāo)就能生成一個(gè)三角形。本實(shí)施例給出的等腰三角形是一種較佳或最佳的實(shí)施例，如圖2所示，所述等腰三角形關(guān)于過(guò)所述第一點(diǎn)和所述第二點(diǎn)的直線(xiàn)對(duì)稱(chēng)。

根據(jù)p1、p2、p3的坐標(biāo)，基于svg生成圖2所示目標(biāo)對(duì)象的主要代碼如下：

polygon＝svg.paper.polyline([p1.join(),p2.join(),p3.join(),p1.join()].join())

給出兩點(diǎn)坐標(biāo)，應(yīng)用polyline可以很方便地畫(huà)出以這兩點(diǎn)為端點(diǎn)的線(xiàn)段或折線(xiàn)。上述代碼實(shí)際上是通過(guò)畫(huà)出三角形p1p2p3的三條邊p1p2、p2p3和p3p1生成目標(biāo)對(duì)象的。因此，基于svg生成目標(biāo)對(duì)象的方法簡(jiǎn)單，計(jì)算量小，畫(huà)圖文件很小。

作為一種可選實(shí)施例，所述方法還包括：利用svg的fill屬性設(shè)置所述目標(biāo)對(duì)象的顏色。

為了增加動(dòng)態(tài)連線(xiàn)的效果，本實(shí)施例利用svg的fill屬性定義對(duì)象元素<polyline>的顏色，從而增強(qiáng)視覺(jué)效果。

作為一種可選實(shí)施例，所述時(shí)間間隔相同。

在第一種實(shí)施例中，所述時(shí)間間隔可以設(shè)置不同的值。本實(shí)施例給出了一種最簡(jiǎn)單的情況，即時(shí)間間隔采用同一個(gè)值，當(dāng)各分點(diǎn)為等分點(diǎn)的時(shí)候，也就是相鄰分點(diǎn)的距離相同時(shí)，可以實(shí)現(xiàn)勻速動(dòng)態(tài)移動(dòng)所述目標(biāo)對(duì)象。

作為一種可選實(shí)施例，不同位置目標(biāo)對(duì)象的大小相同。

在第一種實(shí)施例中，不同位置目標(biāo)對(duì)象的大小可以相同，也可以不同，以產(chǎn)生多種不同的動(dòng)態(tài)效果。本實(shí)施例給出了一種最簡(jiǎn)單的情況，即目標(biāo)對(duì)象的大小在移動(dòng)過(guò)程中保持不變。

作為一種可選實(shí)施例，所述方法還包括：當(dāng)所述目標(biāo)對(duì)象消失時(shí)，插入動(dòng)態(tài)效果。

為了增強(qiáng)視覺(jué)效果，本實(shí)施例在所述目標(biāo)對(duì)象移動(dòng)到終點(diǎn)消失時(shí)，插入動(dòng)態(tài)效果，比如閃爍幾秒種后再消失。

上述僅對(duì)本發(fā)明中的幾種具體實(shí)施例加以說(shuō)明，但并不能作為本發(fā)明的保護(hù)范圍，凡是依據(jù)本發(fā)明中的設(shè)計(jì)精神所做出的等效變化或修飾或等比例放大或縮小等，均應(yīng)認(rèn)為落入本發(fā)明的保護(hù)范圍。