本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，具體涉及一種生成虛圓滑曲線的方法和裝置。

背景技術(shù)：

網(wǎng)頁布局是css(cascadingstylesheets，層疊樣式表)的一個(gè)重點(diǎn)應(yīng)用。網(wǎng)頁布局的傳統(tǒng)解決方案是盒狀模型，盒狀模型依賴display屬性+position屬性+float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。2009年，w3c提出了一種新的方案--flex布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，flex布局已經(jīng)得到了所有瀏覽器的支持。flex(flexiblebox，彈性布局)用來為盒狀模型提供最大的靈活性。

實(shí)際使用過程中，有些項(xiàng)目需要實(shí)現(xiàn)虛圓滑曲線的效果?，F(xiàn)有方案在flex技術(shù)中實(shí)現(xiàn)曲線比較容易，實(shí)現(xiàn)折線虛線也較簡單，但是還沒有實(shí)現(xiàn)虛圓滑曲線的辦法，無法滿足用戶在某些應(yīng)用場景下的使用需求。

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

本發(fā)明提供了一種生成虛圓滑曲線的方法和裝置，以解決現(xiàn)有flex中無法繪制虛圓滑曲線，無法滿足用戶的使用需求的問題。

為了達(dá)到上述目的，本發(fā)明的技術(shù)方案是這樣實(shí)現(xiàn)的：

根據(jù)本發(fā)明的一個(gè)方面，提供了一種生成虛圓滑曲線的方法，該方法包括

獲取原始點(diǎn)的位置；

根據(jù)獲取的所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線；

在繪制貝塞爾曲線過程中，計(jì)算每兩個(gè)相鄰的原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置；

根據(jù)曲線段上虛線段和實(shí)線段的位置，將虛線段位置的線條樣式設(shè)置為第一線條樣式，將實(shí)線段位置的線條樣式設(shè)置為第二線條樣式，從而得到虛圓滑曲線并輸出。

可選地，計(jì)算每相鄰兩個(gè)原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置包括：

計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的直線距離，將所有直線距離相加，得到所有原始點(diǎn)連線的總長度；

計(jì)算當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離；

利用所有原始點(diǎn)連線的總長度除以當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離得到長度系數(shù)；

將當(dāng)前的兩個(gè)相鄰原始點(diǎn)對(duì)應(yīng)的曲線段均等分為預(yù)定數(shù)量的線段，并以長度系數(shù)作為實(shí)線段和虛線段的步長累加，分別計(jì)算當(dāng)前曲線段上虛線段和實(shí)線段的位置。

可選地，將虛線段位置的線條樣式設(shè)置為第一線條樣式，將實(shí)線段位置的線條樣式設(shè)置為第二線條樣式包括：

將虛線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為零的第一線條樣式；

將實(shí)線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為非零閾值的第二線條樣式。

可選地，根據(jù)所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線包括：

計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的中點(diǎn)；

把相鄰中點(diǎn)連成的線段平移到對(duì)應(yīng)的原始點(diǎn)；

將平移后的中點(diǎn)的位置作為控制點(diǎn)的位置，并以相鄰原始點(diǎn)、控制點(diǎn)分 段繪制貝塞爾曲線。

根據(jù)本發(fā)明的另一個(gè)方面，提供了一種生成虛圓滑曲線的裝置，該裝置包括：

原始點(diǎn)獲取單元，用于獲取原始點(diǎn)的位置；

曲線確定單元，用于根據(jù)原始點(diǎn)獲取單元獲取到的所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線；

位置計(jì)算單元，用于在繪制貝塞爾曲線過程中，計(jì)算每兩個(gè)相鄰的原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置；

虛圓滑曲線生成單元，用于根據(jù)曲線段上虛線段和實(shí)線段的位置，將虛線段位置的線條樣式設(shè)置為第一線條樣式，將實(shí)線段位置的線條樣式設(shè)置為第二線條樣式，從而得到虛圓滑曲線并輸出。

可選地，位置計(jì)算單元，具體用于計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的直線距離，將所有直線距離相加，得到所有原始點(diǎn)連線的總長度；

計(jì)算當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離；利用所有原始點(diǎn)連線的總長度除以當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離得到長度系數(shù)；將當(dāng)前的兩個(gè)相鄰原始點(diǎn)對(duì)應(yīng)的曲線段均等分為預(yù)定數(shù)量的線段，并以長度系數(shù)作為實(shí)線段和虛線段的步長累加，分別計(jì)算當(dāng)前曲線段上虛線段和實(shí)線段的位置。

可選地，虛圓滑曲線生成單元，具體用于將虛線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為零的第一線條樣式；

將實(shí)線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為非零閾值的第二線條樣式。

可選地，曲線確定單元，具體用于計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的中點(diǎn)；

把相鄰中點(diǎn)連成的線段平移到對(duì)應(yīng)的原始點(diǎn)；

將平移后的中點(diǎn)的位置作為控制點(diǎn)的位置，并以相鄰原始點(diǎn)、控制點(diǎn)分段繪制貝塞爾曲線。

本發(fā)明的有益效果是：本發(fā)明的這種生成虛圓滑曲線的方法和裝置，根據(jù)獲取的原始點(diǎn)的位置計(jì)算貝塞爾曲線控制點(diǎn)的位置，根據(jù)原始點(diǎn)的位置以及控制點(diǎn)的位置繪制經(jīng)過已知的原始點(diǎn)的貝塞爾曲線。在繪制貝塞爾曲線的過程中，計(jì)算每一段曲線上虛線段和實(shí)線段分別對(duì)應(yīng)的位置，然后就虛線段位置的線條設(shè)置為第一線條樣式，并將實(shí)線段位置的線條設(shè)置為第二樣式，由于貝塞爾曲線本身是圓滑的，所以就可以把已知的原始點(diǎn)用圓滑曲線連接起來。另外，在繪制貝塞爾曲線時(shí)交替設(shè)置虛線段和實(shí)線段的樣式，并且保證線段間距相等，從而生成等間隔的虛圓滑曲線。

附圖說明

圖1是本發(fā)明一個(gè)實(shí)施例的一種生成虛圓滑曲線的方法的流程示意圖；

圖2a是本發(fā)明一個(gè)實(shí)施例的一種不均勻虛圓滑曲線的示意圖；

圖2b是本發(fā)明一個(gè)實(shí)施例的一種均勻虛圓滑曲線的示意圖；

圖3是本發(fā)明一個(gè)實(shí)施例的一種生成虛圓滑曲線的裝置的框圖。

具體實(shí)施方式

本發(fā)明的設(shè)計(jì)構(gòu)思是：本申請(qǐng)的發(fā)明人在使用flex時(shí)發(fā)現(xiàn)，目前在flex中實(shí)現(xiàn)平滑曲線比較容易，實(shí)現(xiàn)折線虛線也較簡單，但是不能實(shí)現(xiàn)虛圓滑曲線，更沒有實(shí)現(xiàn)等間隔的虛圓滑曲線的解決方案。針對(duì)這一現(xiàn)狀，本申請(qǐng)?zhí)峁┝艘环N生成虛圓滑曲線的方法和裝置，本實(shí)施例首先繪制通過原始點(diǎn)的貝塞爾曲線，然后在繪制貝塞爾曲線時(shí)交替設(shè)置虛線段和實(shí)線段的樣式，并且保證線段的間隔相等，從而在flex技術(shù)中繪制出虛圓滑曲線以及等間隔的虛圓滑曲線。

以下結(jié)合具體的實(shí)施例對(duì)本發(fā)明提供的生成虛圓滑曲線的方法和裝置進(jìn)行詳細(xì)說明。

實(shí)施例一

圖1是本發(fā)明一個(gè)實(shí)施例的一種生成虛圓滑曲線的方法的流程示意圖，參見圖1，該方法包括下列步驟s11至步驟s14：

步驟s11，獲取原始點(diǎn)的位置；

實(shí)際應(yīng)用時(shí)，需要預(yù)先獲取原始點(diǎn)的位置坐標(biāo)，然后根據(jù)這些已知原始點(diǎn)的位置坐標(biāo)繪制經(jīng)過這些原始點(diǎn)的貝塞爾曲線。這里的原始點(diǎn)的位置可以是用戶輸入的，也可以是其他應(yīng)用傳送的。

步驟s12，根據(jù)獲取的所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線；

貝塞爾曲線(béziercurve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。它是依據(jù)四個(gè)位置任意的點(diǎn)坐標(biāo)繪制出的一條光滑曲線，貝塞爾曲線必定通過首尾兩個(gè)點(diǎn)，稱為端點(diǎn)(也稱錨點(diǎn))，中間兩個(gè)點(diǎn)雖然未必要通過，但卻起到牽制曲線形狀路徑的作用，稱作控制點(diǎn)。通過調(diào)整控制點(diǎn)，可以使貝塞爾曲線的形狀發(fā)生變化。

步驟s13，在繪制貝塞爾曲線過程中，計(jì)算每兩個(gè)相鄰的原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置；

步驟s14，根據(jù)曲線段上虛線段和實(shí)線段的位置，將虛線段位置的線條樣式設(shè)置為第一線條樣式，將實(shí)線段位置的線條樣式設(shè)置為第二線條樣式，從而得到虛圓滑曲線并輸出。

通過圖1所示的方法，根據(jù)獲取的所有原始點(diǎn)的位置計(jì)算貝塞爾曲線控制點(diǎn)的位置，然后根據(jù)相鄰原始點(diǎn)的位置以及控制點(diǎn)繪制貝塞爾曲線，在繪制貝塞爾曲線的過程中，計(jì)算每相鄰的兩個(gè)原始點(diǎn)對(duì)應(yīng)的曲線段上的實(shí)線段和虛線段出現(xiàn)的位置，然后將虛線段出現(xiàn)的位置線條樣式的關(guān)鍵參數(shù)值都設(shè)置為零，并將實(shí)線段位置的線條樣式的關(guān)鍵參數(shù)值設(shè)為非零閾值，這樣就可以得到經(jīng)過所有已知原始點(diǎn)的虛圓滑曲線。

實(shí)施例二

本實(shí)施例中重點(diǎn)是對(duì)利用該生成虛圓滑曲線的方法繪制等間隔的虛圓滑曲線進(jìn)行說明，其他內(nèi)容參見本發(fā)明的其他實(shí)施例。

需要說明的是，在flex中繪制貝塞爾曲線時(shí)，虛線段的畫法其實(shí)是在畫線時(shí)，隔段交替設(shè)置線條樣式stroke.apply(g)和g.linestyle(0,0,0)。折線虛線畫法比較簡單，是將兩個(gè)原始點(diǎn)之間的長線段按照直線分成若干短線段，然后交替變換線條樣式。但是，虛圓滑曲線繪制不能將虛折線的實(shí)現(xiàn)方法和曲線的實(shí)現(xiàn)方法合并到一起，而必須結(jié)合曲線的實(shí)現(xiàn)方法以及前述虛線段的畫法來繪制。

本實(shí)施例中，在獲取到所有原始點(diǎn)的位置后，根據(jù)所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線。

具體的，先計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的中點(diǎn)；然后把相鄰中點(diǎn)連成的線段平移到對(duì)應(yīng)的原始點(diǎn)；這里的平移是將中點(diǎn)連成的線段向外平移到與對(duì)應(yīng)的原始點(diǎn)相切的位置。最后，將平移后的中點(diǎn)的位置作為控制點(diǎn)的位置，并以相鄰原始點(diǎn)、控制點(diǎn)分段繪制貝塞爾曲線。這里，是將兩個(gè)原始點(diǎn)作為端點(diǎn)繪制三次貝塞爾曲線，并由控制點(diǎn)控制三次貝塞爾曲線的形狀。

圖2a是本發(fā)明一個(gè)實(shí)施例的一種不均勻虛圓滑曲線的示意圖，圖2b是本發(fā)明一個(gè)實(shí)施例的一種均勻虛圓滑曲線的示意圖；圖2b中的等間隔的虛圓滑曲線繪制具體包括以下步驟和過程：

步驟1，生成貝塞爾曲線的控制點(diǎn)

步驟1.1，計(jì)算每兩個(gè)相鄰原始點(diǎn)的中點(diǎn)。部分代碼示意如下：

步驟1.2，把相鄰中點(diǎn)連成的線段平移到對(duì)應(yīng)的原始點(diǎn)。部分代碼示意如下：

步驟2，以步驟1中的原始點(diǎn)、控制點(diǎn)畫貝塞爾曲線

步驟2.1，平移后的中點(diǎn)作為控制點(diǎn)，相鄰原始點(diǎn)為起始點(diǎn)畫貝塞爾曲線。

部分代碼示意如下：

繪制時(shí)需要先確定每相鄰兩個(gè)原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置。計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的直線距離，將所有直線距離相加，得到所有原始點(diǎn)連線的總長度；

計(jì)算當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離；

利用所有原始點(diǎn)連線的總長度除以當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離得到長度系數(shù)；

將當(dāng)前的兩個(gè)相鄰原始點(diǎn)對(duì)應(yīng)的曲線段均等分為預(yù)定數(shù)量的線段，并以長度系數(shù)作為實(shí)線段和虛線段的步長累加，分別計(jì)算當(dāng)前曲線段上虛線段和實(shí)線段的位置。

結(jié)合上述代碼以及圖2b，在本實(shí)施例中，確定虛線段和實(shí)線段的位置包括：

a.計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)的線段的長度，并求和得到總長度計(jì)為totallen，計(jì)算當(dāng)前兩個(gè)相鄰原始點(diǎn)之間的距離并記為toworiginlen，然后計(jì)算(totallen*10)/(toworiginlen*24)的值，作為長度系數(shù)。這里的數(shù)值10和24是本實(shí)施例的應(yīng)用場景中選取的參數(shù)，在其他實(shí)施例中可以為其他數(shù)值，對(duì)此不做限制。

b.將相鄰原始點(diǎn)對(duì)應(yīng)的曲線段等分成200小段，以a中的長度系數(shù)作為實(shí)線段和虛線段的步長累加，計(jì)算到哪個(gè)點(diǎn)應(yīng)該畫實(shí)線段，哪個(gè)點(diǎn)應(yīng)該畫虛線段。

c.以0.005為最小繪制步長，以b中計(jì)算到的點(diǎn)作為變換線條樣式的起始點(diǎn)。

舉例而言，某兩個(gè)相鄰原始點(diǎn)對(duì)應(yīng)的貝塞爾曲線上的一段曲線可以分為200小段，而根據(jù)長度系數(shù)以及最小繪制步長計(jì)算后從曲線段的第0個(gè)子線段開始繪制實(shí)線，然后間隔為10個(gè)子線段的長度，那么從第0個(gè)子線段到第10個(gè)子線段的位置線條的樣式設(shè)置為實(shí)線段的樣式(如通過stroke.apply(g)函數(shù)調(diào)用線條對(duì)象g設(shè)置線條樣式)，從第11到20個(gè)子線段的位置線條的樣式設(shè)置虛線段的樣式，即設(shè)置g.linestyle(0,0,0)。其中，這里的(0,0,0)可分別對(duì)應(yīng)線條顏色、線條粗細(xì)以及線條的透明度。

本實(shí)施例中，由于在繪制貝塞爾曲線時(shí)是根據(jù)每條曲線段的長度確定的 長度系數(shù)，進(jìn)而確定該曲線段上應(yīng)該變換樣式的點(diǎn)，從而能夠保證每條曲線段上的虛線和實(shí)線的線段間隔相等。

三次貝塞爾曲線的代碼實(shí)現(xiàn)如下：

步驟2.2，畫貝塞爾曲線時(shí)，通過交替變換線段的線條顏色、粗細(xì)和透明度來實(shí)現(xiàn)虛線效果。

本實(shí)施例中，可以將虛線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為0；并將實(shí)線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為非0閾值。其中，線條樣式變換部分代碼示意如下：

結(jié)合圖2a和圖2b，對(duì)本實(shí)施例生成的虛圓滑曲線進(jìn)行說明。圖2a是利用本實(shí)施例的生成虛圓滑曲線的方法繪制的不均勻的虛圓滑曲線，由圖2a中曲線21上兩處箭頭所指示的位置可以看出，這兩個(gè)位置的曲線段上線段的間距不等，低處的這一曲線段上的兩個(gè)線段的間距比高處曲線段上的兩個(gè)線段的間距大。

圖2b是利用本實(shí)施例的生成虛圓滑曲線的方法繪制的不均勻的虛圓滑曲線，由圖2b中曲線22上兩處箭頭所指示的位置可以看出，這兩個(gè)位置曲 線段上的線段的間距相等，并且可以看出整個(gè)曲線22上，每一段曲線上的線段的間距都是相等的，從而實(shí)現(xiàn)了等間隔虛圓滑曲線的繪制。

實(shí)施例三

圖3是本發(fā)明一個(gè)實(shí)施例的一種生成虛圓滑曲線的裝置的框圖，參見圖3，該生成虛圓滑曲線的裝置30包括：

原始點(diǎn)獲取單元301，用于獲取原始點(diǎn)的位置；

曲線確定單元302，用于根據(jù)原始點(diǎn)獲取單元301獲取到的所有原始點(diǎn)的位置，計(jì)算貝塞爾曲線控制點(diǎn)的位置，利用原始點(diǎn)的位置和控制點(diǎn)的位置繪制貝塞爾曲線；

位置計(jì)算單元303，用于在繪制貝塞爾曲線過程中，計(jì)算每兩個(gè)相鄰的原始點(diǎn)對(duì)應(yīng)的曲線段上虛線段和實(shí)線段的位置；

虛圓滑曲線生成單元304，用于根據(jù)曲線段上虛線段和實(shí)線段的位置，將虛線段位置的線條樣式設(shè)置為第一線條樣式，將實(shí)線段位置的線條樣式設(shè)置為第二線條樣式，從而得到虛圓滑曲線并輸出。

本實(shí)施例中位置計(jì)算單元303，具體用于計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的直線距離，將所有直線距離相加，得到所有原始點(diǎn)連線的總長度；計(jì)算當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離；利用所有原始點(diǎn)連線的總長度除以當(dāng)前的兩個(gè)相鄰原始點(diǎn)的直線距離得到長度系數(shù)；將當(dāng)前的兩個(gè)相鄰原始點(diǎn)對(duì)應(yīng)的曲線段均等分為預(yù)定數(shù)量的線段，并以長度系數(shù)作為實(shí)線段和虛線段的步長累加，分別計(jì)算當(dāng)前曲線段上虛線段和實(shí)線段的位置。

本實(shí)施例中虛圓滑曲線生成單元304，具體用于將虛線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為零的第一線條樣式；將實(shí)線段位置的線條設(shè)置成顏色、粗細(xì)以及透明度參數(shù)值均為非零閾值的第二線條樣式。

本實(shí)施例中曲線確定單元302，具體用于計(jì)算所有原始點(diǎn)中每相鄰兩個(gè)原始點(diǎn)確定的線段的中點(diǎn)；把相鄰中點(diǎn)連成的線段平移到對(duì)應(yīng)的原始點(diǎn)；將平移后的中點(diǎn)的位置作為控制點(diǎn)的位置，并以相鄰原始點(diǎn)、控制點(diǎn)分段繪制 貝塞爾曲線。

需要說明的是，本實(shí)施例中的生成虛圓滑曲線的裝置的工作過程是與前述生成虛圓滑曲線的方法的實(shí)現(xiàn)步驟相對(duì)應(yīng)的，因而本實(shí)施例沒有描述的生成虛圓滑曲線的裝置工作過程可以參見本發(fā)明前述實(shí)施例中對(duì)生成虛圓滑曲線的方法步驟的相關(guān)說明，在此不再贅述。

綜上所述，本發(fā)明的這種生成虛圓滑曲線的方法和裝置，根據(jù)獲取的原始點(diǎn)的位置計(jì)算貝塞爾曲線控制點(diǎn)的位置，根據(jù)原始點(diǎn)的位置以及控制點(diǎn)的位置繪制經(jīng)過已知的原始點(diǎn)的貝塞爾曲線。在繪制貝塞爾曲線的過程中，計(jì)算每一段曲線上虛線段和實(shí)線段分別對(duì)應(yīng)的位置，然后就虛線段位置的線條設(shè)置為第一線條樣式，并將實(shí)線段位置的線條設(shè)置為第二樣式，由于貝塞爾曲線本身是圓滑的，所以就可以把已知的原始點(diǎn)用圓滑曲線連接起來。另外，在繪制貝塞爾曲線時(shí)，交替設(shè)置虛線段和實(shí)線段的樣式，并且保證線段間距相等，從而生成了等間隔的虛圓滑曲線。

以上所述僅為本發(fā)明的較佳實(shí)施例而已，并非用于限定本發(fā)明的保護(hù)范圍。凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換、改進(jìn)等，均包含在本發(fā)明的保護(hù)范圍內(nèi)。