本發(fā)明涉及網(wǎng)頁設(shè)計(jì)領(lǐng)域，具體而言，涉及一種創(chuàng)建網(wǎng)頁時組件對齊的方法及裝置

背景技術(shù)：

通常情況下，創(chuàng)建網(wǎng)頁需要專業(yè)人員通過編程實(shí)現(xiàn)，這就要求網(wǎng)頁創(chuàng)建人員具備較高的專業(yè)性，對于普通用戶來說無法實(shí)現(xiàn)網(wǎng)頁創(chuàng)建，局限性較強(qiáng)。為了增強(qiáng)創(chuàng)建網(wǎng)頁的通用性，提出了快速創(chuàng)建網(wǎng)頁的方法，達(dá)到網(wǎng)頁可視化制作的目的，例如將一組html代碼片段定義為組件，通過預(yù)先設(shè)定的網(wǎng)頁設(shè)計(jì)器，用戶可以進(jìn)行選擇、拖拽改變組件的位置及大小、設(shè)置組件的屬性等操作改變不見外觀和功能，通過不同組件組合成目標(biāo)網(wǎng)頁。

但是，在通過組件實(shí)現(xiàn)網(wǎng)頁創(chuàng)建的過程中，當(dāng)拖拽頁面對齊組件時，僅能夠?qū)㈨撁嬷械慕M件對齊到被對齊組件的外邊緣，當(dāng)需要將對齊組件向被對齊組件的外邊緣的其他對齊組件對齊時，只有通過目測調(diào)節(jié)實(shí)現(xiàn)對齊，導(dǎo)致現(xiàn)有的組件精細(xì)對齊效率較低、精度較低、精細(xì)對齊的操作難度大。

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

有鑒于此，本發(fā)明的目的在于提供一種創(chuàng)建網(wǎng)頁時組件對齊的方法，以提高提高創(chuàng)建網(wǎng)頁過程中組件對齊的效率和精度，降低精細(xì)對齊的操作難度。

第一方面，本發(fā)明實(shí)施例提供了一種創(chuàng)建網(wǎng)頁時組件對齊的方法，包括：獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊的第一組件，以及與所述第一組件進(jìn)行對齊的第二組件；確定所述第一組件中的第一邊線，以及所述第二組件中第二邊線；若確定出第一邊線和所述第二邊線之間的距離小于設(shè)定閾值時，將所述第二組件和所述第一組件對齊。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第一種可能的實(shí)施方式，按照下述方式確定所述第一邊線和第二邊線之間的距離：獲取所述第一邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第二邊線或第二邊線的延長線作垂線，所述垂線與第二邊線或第二邊線的延長線交于一點(diǎn)，記為B點(diǎn)，將所述A、B兩點(diǎn)之間的距離記為所述第一邊線與第二邊線的距離；或獲取所述第二邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第一邊線或第一邊線的延長線作垂線，所述垂線與第一邊線或第一邊線的延長線交于一點(diǎn)，記為B點(diǎn)，將所述A、B兩點(diǎn)之間的距離記為所述第一邊線與第二邊線的距離。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第二種可能的實(shí)施方式，所述第一組件的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中豎直方向?qū)R；所述第一組件和第二組件的形狀相同；將所述第二組件和所述第一組件對齊，包括：確定所述第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一橫坐標(biāo)的值，和所述第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二橫坐標(biāo)值；獲取所述第一橫坐標(biāo)的值和第二橫坐標(biāo)的值之間的差值的絕對值；若所述差值的絕對值小于設(shè)定范圍時，確定絕對值最小的坐標(biāo)值為移動偏移值，將所述第二組件和第一組件對齊。

結(jié)合第一方面，本發(fā)明實(shí)施例提供了第一方面的第三種可能的實(shí)施方式，所述第一組件的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中水平方向?qū)R；所述第一組件和第二組件的形狀相同；將所述第二組件與第一組件對齊，包括：確定所述第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一縱坐標(biāo)的值，和所述第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二縱坐標(biāo)值；獲取所述第一縱坐標(biāo)的值和第二縱坐標(biāo)的值之間的差值的絕對值；若所述差值的絕對值小于設(shè)定范圍時，確定絕對值最小的坐標(biāo)值為移動偏移值，將所述第二組件和第一組件對齊。

結(jié)合第一方面～第一方面的第三種可能的實(shí)施方式中的任一種實(shí)施方式，本發(fā)明實(shí)施例提供了第一方面的第四種可能的實(shí)施方式，所述第一邊線包含第一組件的中線，所述第二邊線包含第二組件的中線；其中所述中線包含縱向中線和橫向中線，所述縱向中線垂直設(shè)定坐標(biāo)系中的水平軸，所述橫向中線平行設(shè)定坐標(biāo)系的水平軸。

第二方面，本發(fā)明實(shí)施例提供了一種創(chuàng)建網(wǎng)頁時組件對齊的裝置，包括：獲取模塊、確定模塊、執(zhí)行模塊；其中，所述獲取模塊，用于獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊的第一組件，以及與所述第一組件進(jìn)行對齊的第二組件；所述確定模塊，，用于確定所述第一組件中的第一邊線，所述第二組件中第二邊線，以及確定第一邊線和所述第二邊線之間的距離；所述執(zhí)行模塊，用于若確定出第一邊線和所述第二邊線之間的距離小于設(shè)定閾值時，將所述第二組件和所述第一組件對齊。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第一種可能的實(shí)施方式，所述確定模塊，具體用于獲取所述第一邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第二邊線或第二邊線的延長線作垂線，所述垂線與第二邊線或第二邊線的延長線交于一點(diǎn)，記為B點(diǎn)，將所述A、B兩點(diǎn)之間的距離記為所述第一邊線與第二邊線的距離；或獲取所述第二邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第一邊線或第一邊線的延長線作垂線，所述垂線與第一邊線或第一邊線的延長線交于一點(diǎn)，記為B點(diǎn)，將所述A、B兩點(diǎn)之間的距離記為所述第一邊線與第二邊線的距離。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第二種可能的實(shí)施方式，所述第一組件中的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中豎直方向?qū)R；所述第一組件和第二組件的形狀相同；所述執(zhí)行模塊，具體用于確定所述第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一橫坐標(biāo)的值，和所述第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二橫坐標(biāo)值；獲取所述第一橫坐標(biāo)的值和第二橫坐標(biāo)的值之間的差值的絕對值；若所述差值的絕對值小于設(shè)定范圍時，確定絕對值最小的坐標(biāo)值為移動偏移值，將所述第二組件和第一組件對齊。

結(jié)合第二方面，本發(fā)明實(shí)施例提供了第二方面的第三種可能的實(shí)施方式，所述第一組件的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中水平方向?qū)R；所述第一組件和第二組件的形狀相同；所述執(zhí)行模塊，具體用于確定所述第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一縱坐標(biāo)的值，和所述第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二縱坐標(biāo)值；獲取所述第一縱坐標(biāo)的值和第二縱坐標(biāo)的值之間的差值的絕對值；若所述差值的絕對值小于設(shè)定閾值時，確定絕對值最小的坐標(biāo)值為移動偏移值，將所述第二組件和第一組件對齊。

結(jié)合第二方面～第二方面的第三種可能的實(shí)施方式中的任一種實(shí)施方式，所述確定模塊用于確定所述第一邊線包含第一組件的中線，所述第二邊線包含第二組件的中線；其中所述中線包含縱向中線和橫向中線，所述縱向中線垂直設(shè)定坐標(biāo)系中的水平軸，所述橫向中線平行設(shè)定坐標(biāo)系的水平軸。

本發(fā)明實(shí)施例提供了一種創(chuàng)建網(wǎng)頁時組件對齊的方法及裝置，獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊操作的第一組件，以及與第一組件進(jìn)行對齊的第二組件；確定第一組件中的第一邊線，以及第二組件中的第二邊線；若確定出第一邊線和所述第二邊線之間的距離小于設(shè)定閾值時，將所述第二組件和所述第一組件對齊。與現(xiàn)有技術(shù)的創(chuàng)建網(wǎng)頁相比，提高了組件對齊的效率和精度，降低了組件精細(xì)對齊的操作難度。

為使本發(fā)明的上述目的、特征和優(yōu)點(diǎn)能更明顯易懂，下文特舉較佳實(shí)施例，并配合所附附圖，作詳細(xì)說明如下。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例的技術(shù)方案，下面將對實(shí)施例中所需要使用的附圖作簡單地介紹，應(yīng)當(dāng)理解，以下附圖僅示出了本發(fā)明的某些實(shí)施例，因此不應(yīng)被看作是對范圍的限定，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的方法流程圖；

圖2a示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之一；

圖2b示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之二；

圖2c示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之三；

圖2d示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之四；

圖2e示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之五；

圖2f示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之六；

圖3a示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之一；

圖3b示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之二；

圖3c示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之三；

圖3d示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之四；

圖3e示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之五；

圖3f示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的繪制方法之六；

圖4示出了本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的裝置。

具體實(shí)施方式

為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。通常在此處附圖中描述和示出的本發(fā)明實(shí)施例的組件可以以各種不同的配置來布置和設(shè)計(jì)。因此，以下對在附圖中提供的本發(fā)明的實(shí)施例的詳細(xì)描述并非旨在限制要求保護(hù)的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實(shí)施例?；诒景l(fā)明的實(shí)施例，本領(lǐng)域技術(shù)人員在沒有做出創(chuàng)造性勞動的前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

考慮到網(wǎng)頁可視化制作中，繪制組件對齊時需要手動拖拽進(jìn)行對齊，并通過人眼判斷是否對齊，因而效率較低，準(zhǔn)確性較差，精細(xì)對齊的操作難度較大，基于此，本發(fā)明實(shí)施例提供了一種創(chuàng)建網(wǎng)頁時組件對齊的方法，能夠提高創(chuàng)建網(wǎng)頁過程中組件對齊的效率和精度，降低精細(xì)對齊的操作難度。下面通過實(shí)施例進(jìn)行描述。

實(shí)施例1

本發(fā)明實(shí)施例一提出了一種創(chuàng)建網(wǎng)頁時組件對齊的方法，如圖1所示，其具體流程如下所述：

步驟11，獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊的第一組件，以及與第一組件進(jìn)行對齊的第二組件。

在本發(fā)明實(shí)施例一提出的技術(shù)方案中，通過html代碼片段定義組件，組件可以是創(chuàng)建網(wǎng)頁所需要的任何形狀，其維度可以是一維、二維、三維圖形，例如點(diǎn)，線，圓形、方形、矩形、三角形，長方體、正方體等。在本發(fā)明實(shí)施例一提出的技術(shù)方案中，組件所在網(wǎng)頁的坐標(biāo)的維度可以是一維、二維、三維，具體坐標(biāo)值可以按照像素進(jìn)行劃分，也可以通過自定義的方式實(shí)現(xiàn)。

在本實(shí)施例一提出的技術(shù)方案中，組件的形狀將以二維圖形矩形為例進(jìn)行詳細(xì)闡述。組件的大小可以相同，也可以不相同。

為便于闡述，本發(fā)明實(shí)施例一提出的技術(shù)方案中，將組件做出第一組件和第二組件的區(qū)分。其中第一組件可以是實(shí)際頁面上原有的組件，例如已經(jīng)設(shè)置好的組件，該第一組件可以視為后續(xù)組件對齊時的參照物。第二組件可以是需要與第一組件對齊的組件。

一種較佳地實(shí)現(xiàn)方式，在本發(fā)明實(shí)施例一提出的技術(shù)方案中，具體的實(shí)施例一中首先在引用的實(shí)際頁面上覆蓋一層與頁面相同大小、坐標(biāo)也相同的繪圖頁面。其中繪圖頁面包括任意可以用來繪圖的軟件，在本實(shí)施例一中采用svg繪圖層，將繪圖層設(shè)置為只顯示不參與用戶交互模式，所有對齊線都繪制在這個繪圖層上。

當(dāng)接收到繪制第二組件指令時，記錄下所有組件的邊線中線坐標(biāo)，其中邊線中線包括上邊線、下邊線、縱向中線，左邊線、右邊線以及橫向中線中的一種或多種。在本發(fā)明實(shí)施例一提出的技術(shù)方案中，當(dāng)接收到繪制第二組件指令時，記錄下所有組件的邊線中線坐標(biāo)，其中邊線中線包括上邊線、下邊線、縱向中線，左邊線、右邊線以及橫向中線。

步驟12，確定第一組件中的第一邊線，以及第二組件中的第二邊線。

一種較佳地實(shí)現(xiàn)方式，在本發(fā)明實(shí)施例提出的技術(shù)方案中，設(shè)定一閾值記為L,判斷第二組件的邊線中線坐標(biāo)是否與第一組件的邊線中線坐標(biāo)距離的絕對值是否小于或者等于設(shè)定的閾值L，若小于或者等于L，即將第二組件中與第一組件中的坐標(biāo)距離的絕對值小于設(shè)定閾值的確定某條邊線中線坐標(biāo)分別記為第二邊線與第一邊線。

步驟13，若確定第一邊線和第二邊線之間的距離小于或者設(shè)定閾值L時，將第二組件和第一組件對齊。

一種較佳地實(shí)現(xiàn)方式，在本發(fā)明實(shí)施例提出的技術(shù)方案中，按照下述方式確定第一邊線與第二邊線之間的距離：

第一種方式：獲取第一邊線上的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第二邊線或第二邊線的延長線作垂線，交于點(diǎn)B，將A、B兩點(diǎn)之間的距離記為第一邊線與第二邊線的距離。

第二種方式：獲取第二邊線上的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第一邊線或第一邊線的延長線作垂線，交于點(diǎn)B，將A、B兩點(diǎn)之間的距離記為第一邊線與第二邊線的距離。

第三種方式：獲取第一邊線上的任意一點(diǎn)，記為A點(diǎn)，取第二邊線上的任意一點(diǎn)，記為B點(diǎn)，將A點(diǎn)與B點(diǎn)的橫坐標(biāo)差值或者縱坐標(biāo)差值記為第一邊線與第二邊線的距離。

第一組件和第二組件對齊，可以包含第一組件和第二組件在垂直方向上對齊、第一組件和第二組件在水平方向上對齊。具體地，在垂直方向?qū)R可以包含矩形中的左邊對齊、右邊對齊、縱向中線對齊，水平方向上可以包含矩形的上邊對齊、下邊對齊、橫向中線對齊。

其中第一組件中的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中豎直方向?qū)R，第一組件和第二組件的形狀相同，將第二邊線和第一邊線對齊，包括：確定第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一橫坐標(biāo)的值，和第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二橫坐標(biāo)值；獲取第一橫坐標(biāo)的值和第二橫坐標(biāo)之間的差值的絕對值；若該絕對值小于設(shè)定閾值時，確定絕對值最小的坐標(biāo)值為移動偏移值，將第二組件和第一組件對齊。

第一邊線包含第一組件的中線，第二邊線包含第二組件的中線；其中中線包含縱向中線和橫向中線，縱向中線垂直設(shè)定坐標(biāo)系中的水平軸，橫向中線平行設(shè)定坐標(biāo)系的水平軸。

一種較佳地實(shí)現(xiàn)方式，在本發(fā)明實(shí)施例一提出的技術(shù)方案中，判斷出第一組件的第一邊線和第二組件的第二邊線垂直對齊；第一組件和第二組件形狀相同。

其中第一組件的第一邊線和第二組件的第二邊線在設(shè)定坐標(biāo)系中豎直方向?qū)R，可以包含以下幾種情況，分別如圖2a、2b、2c、2d、2e，2f，其中x₁,x₂均代表具體數(shù)值。

第一種情況，如圖2a所示，第一邊線為第一組件的左邊，第二邊線為第二組件的左邊，第一邊線上任意一點(diǎn)A的橫坐標(biāo)值為x₁,第二邊線上任意一點(diǎn)B的橫坐標(biāo)為x₂,設(shè)定閾值L，將|x1-x2|與L比較，當(dāng)|x1-x2|小于或等于L時，使得第二邊線與第一邊線對齊。

第二種情況，如圖2b所示，第一邊線為第一組件的右邊，第二邊線為第二組件的右邊，第一邊線上任意一點(diǎn)A的橫坐標(biāo)值為x₁,第二邊線上任意一點(diǎn)B的橫坐標(biāo)為x₂,設(shè)定閾值L，將|x1-x2|與L比較，當(dāng)|x1-x2|小于或等于L時，使得第二邊線與第一邊線對齊。

第三種情況，如圖2c所示，第一邊線為第一組件的右邊，第二邊線為第二組件的左邊，第一邊線上任意一點(diǎn)A的橫坐標(biāo)值為x₁,第二邊線上任意一點(diǎn)B的橫坐標(biāo)為x₂,設(shè)定閾值L，將|x1-x2|與L比較，當(dāng)|x1-x2|小于或等于L時，使得第二邊線與第一邊線對齊。

第四種情況，如圖2d所示，第一邊線為第一組件的左邊，第二邊線為第二組件的右邊，第一邊線上任意一點(diǎn)A的橫坐標(biāo)值為x₁,第二邊線上任意一點(diǎn)B的橫坐標(biāo)為x₂,設(shè)定閾值L，將|x1-x2|與L比較，當(dāng)|x1-x2|小于或等于L時，使得第二邊線與第一邊線對齊。

第五種情況，如圖2e所示，第一邊線為第一組件的縱向中線，第二邊線為第二組件的縱向中線，第一邊線上任意一點(diǎn)A的橫坐標(biāo)值為x₁,第二邊線上任意一點(diǎn)B的橫坐標(biāo)為x₂,設(shè)定閾值L，將|x1-x2|與L比較，當(dāng)x1-x2|小于或等于L時，使得第二邊線與第一邊線對齊。

特別的，如圖2f所示，當(dāng)?shù)谝唤M件至少有兩個時，為便于闡述，將其中一個第一組件記為第一組件a,將另一個第一組件記為第一組件b，對應(yīng)的邊線為第一邊線a與第一邊線b，第一邊線a上任意一點(diǎn)B的橫坐標(biāo)值為x₁,第一邊線b上任意一點(diǎn)C的橫坐標(biāo)值為x₁’,第二邊線上任意一點(diǎn)A的橫坐標(biāo)為x₂,且|x1-x2|與|x1'-x2|均小于或者等于L，比較|x1-x2|與|x1'-x2|的大小，若|x1-x2|<|x1'-x2|,則|x1-x2|為移動偏移值，使得第二邊線與第一邊線a對齊。

將第二組件與第一組件對齊，還包括，第一組件中的第一邊線與第二組件中的第二邊線在設(shè)定坐標(biāo)系中水平方向?qū)R；第一組件和第二組件的形狀相同，將第二組件與第一組件對齊，包括：

確定第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一縱坐標(biāo)值，和第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二縱坐標(biāo)值；獲取第一縱坐標(biāo)值和第二縱坐標(biāo)值之間差值的絕對值；若該絕對值小于或者設(shè)定閾值L時，確定絕對值最小的坐標(biāo)值為移動偏移值，將第二邊線與第一邊線對齊。

其中第一組件的第一邊線和第二組件的第二邊線在設(shè)定坐標(biāo)系在水平方向?qū)R，可以包含以下幾種情況，分別如圖3a、3b、3c、3d、3e，3f,其中y₁,y₂均代表具體數(shù)值。

第一種情況，如圖3a所示，第一邊線為第一組件的上邊，第二邊線為第二組件的上邊，第一邊線上任意一點(diǎn)A的縱坐標(biāo)值為y₁，第二邊線上任意一點(diǎn)B的縱坐標(biāo)為y₂,設(shè)定閾值L，將|y1-y2|于L比較，當(dāng)|y1-y2|小于或等于L時，使得第二邊線與第一邊線對齊。

第二種情況，如圖3b所示，第一邊線為第一組件的下邊，第二邊線為第二組件的下邊，第一邊線上任意一點(diǎn)A的縱坐標(biāo)值為y₁，第二邊線上任意一點(diǎn)B的縱坐標(biāo)為y₂,設(shè)定閾值L，將|y1-y2|于L比較，當(dāng)|y1-y2|小于或等于L時，使得第二邊線與第一邊線對齊。

第三種情況，如圖3c所示，第一邊線為第一組件的上邊，第二邊線為第二組件的下邊，第一邊線上任意一點(diǎn)A的縱坐標(biāo)值為y₁，第二邊線上任意一點(diǎn)B的縱坐標(biāo)為y₂,設(shè)定閾值L，將|y1-y2|于L比較，當(dāng)|y1-y2|小于或等于L時，使得第二邊線與第一邊線對齊。

第四種情況，如圖3d所示，第一邊線為第一組件的下邊，第二邊線為第二組件的上邊，第一邊線上任意一點(diǎn)A的縱坐標(biāo)值為y₁，第二邊線上任意一點(diǎn)B的縱坐標(biāo)為y₂,設(shè)定閾值L，將|y1-y2|于L比較，當(dāng)|y1-y2|小于或等于L時，使得第二邊線與第一邊線對齊。

第五種情況，如圖3e所示，第一邊線為第一組件的橫向中線，第二邊線為第二組件的橫向中線，第一邊線上任意一點(diǎn)A的縱坐標(biāo)值為y₁，第二邊線上任意一點(diǎn)B的縱坐標(biāo)為y₂,設(shè)定閾值L，將|y1-y2|于L比較，當(dāng)|y1-y2|小于或等于L時，使得第二邊線與第一邊線對齊。

特別的，如圖3f所示，當(dāng)?shù)谝唤M件至少有兩個時，為便于闡述，將其中一個組件記為第一組件a,將另一個組件記為第一組件b,對應(yīng)的邊線為第一邊線a與第一邊線b，第一邊線a上任意一點(diǎn)B的縱坐標(biāo)為y₁,第一邊線b上任意一點(diǎn)C的橫坐標(biāo)為y₁’，第二邊線上任意一點(diǎn)A的縱坐標(biāo)為y₂，且|y1-y2|與|y1'-y2|均小于或者等于L，比較|y1-y2|與|y1'-y2|的大小，若|y1-y2|<|y1'-y2|,則|y1-y2|為移動偏移值，使得第二邊線與第一邊線a對齊。

本發(fā)明實(shí)施例一提供了一種創(chuàng)建網(wǎng)頁時組件對齊的方法，獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊操作的第一組件，以及與第一組件進(jìn)行對齊的第二組件；確定第一組件中的第一邊線，以及第二組件中的第二邊線；若確定出第一邊線和第二邊線之間的距離小于設(shè)定閾值時，將第二組件和第一組件對齊。與現(xiàn)有技術(shù)的創(chuàng)建網(wǎng)頁相比，提高了組件對齊的效率和精度，降低了組件精細(xì)對齊的操作難度。

實(shí)施例2

本發(fā)明實(shí)施例二提出一種創(chuàng)建網(wǎng)頁時組件對齊的裝置400，如圖4所示，該裝置包括：獲取模塊401、確定模塊402、執(zhí)行模塊403；其中，

獲取模塊401，用于獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊的第一組件，以及與第一組件進(jìn)行對齊的第二組件；

確定模塊402，用于確定第一組件中的第一邊線，第二組件中第二邊線，以及確定第一邊線和第二邊線之間的距離。

執(zhí)行模塊403，用于若確定出第一邊線和第二邊線之間的距離小于設(shè)定閾值時，將第二組件和第一組件對齊。

確定模塊402，具體用于確定第一邊線與第二邊線之間的距離，確定方法如下所述：

第一種方式：獲取第一邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第二邊線或第二邊線的延長線作垂線交于一點(diǎn)，記為B點(diǎn)，將A、B兩點(diǎn)之間的距離記為第一邊線與第二邊線的距離。

第二種方式：獲取所述第二邊線的任意一點(diǎn)，記為A點(diǎn)，由A點(diǎn)向第一邊線或第一邊線的延長線作垂線交于一點(diǎn)，記為B點(diǎn)，將A、B兩點(diǎn)之間的距離記為第一邊線與第二邊線的距離。

第三種方式：獲取第一邊線上的任意一點(diǎn)，記為A點(diǎn)，獲取第二邊線上的任意一點(diǎn)，記為B點(diǎn)，將A點(diǎn)與B點(diǎn)的橫坐標(biāo)差值或者縱坐標(biāo)差值記為第一邊線與第二邊線的距離。

第一組件中的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中豎直方向?qū)R；第一組件和第二組件的形狀相同；

執(zhí)行模塊403，具體用于確定所述第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一橫坐標(biāo)的值，和第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二橫坐標(biāo)值；獲取第一橫坐標(biāo)的值和第二橫坐標(biāo)的值之間的差值的絕對值；若差值的絕對值小于設(shè)定范圍時，確定絕對值最小的坐標(biāo)值為移動偏移值，將第二組件和第一組件對齊。

第一組件的第一邊線和第二組件中的第二邊線在設(shè)定坐標(biāo)系中水平方向?qū)R；第一組件和第二組件的形狀相同；

執(zhí)行模塊403，具體用于確定第一邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第一縱坐標(biāo)的值，和第一邊線對齊的第二邊線的任意一點(diǎn)在設(shè)定坐標(biāo)系中的第二縱坐標(biāo)值；獲取第一縱坐標(biāo)的值和第二縱坐標(biāo)的值之間的差值的絕對值；若差值的絕對值小于設(shè)定閾值時，確定絕對值最小的坐標(biāo)值為移動偏移值，將第二組件和第一組件對齊。

確定模塊402用于確定第一邊線包含第一組件的中線，第二邊線包含第二組件的中線；其中中線包含縱向中線和橫向中線，縱向中線垂直設(shè)定坐標(biāo)系中的水平軸，橫向中線平行設(shè)定坐標(biāo)系的水平軸。

下面以一實(shí)例進(jìn)行詳細(xì)闡述：

獲取模塊401獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊的第一組件，以及與第一組件進(jìn)行對齊的第二組件，其中第一組件有三個，分別記為第一組件a,第一組件b，第一組件c,第二組件和所有第一組件均為矩形；設(shè)定第二組件與第一組件邊線中線坐標(biāo)距離的絕對值為6mm,分別取在設(shè)定坐標(biāo)系中豎直方向上的第一組件a的右邊線、第一組件b的右邊線、第一組件c的右邊線以及第二組件的右邊線，分別記為第一邊線a、第一邊線b、第一邊線c以及第二邊線；各取第一邊線a、第一邊線b、第一邊線c以及第二邊線上任意一點(diǎn)分別記為A、B、C、D，其中A、B、C、D的橫坐標(biāo)分別為11mm、13mm、10mm、15mm；第二組件與第一組件的邊線坐標(biāo)距離的絕對值為3mm、2mm、5mm,其中3mm、2mm、5mm均小于6mm，而且2mm最小，則取2mm為吸附坐標(biāo)偏移值，使得第二組件與第一邊線b對齊。

基于上述分析與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)施例提供的技術(shù)方案中，獲取創(chuàng)建網(wǎng)頁時待進(jìn)行對齊操作的第一組件，以及與第一組件進(jìn)行對齊的第二組件；確定第一組件中的第一邊線，以及第二組件中的第二邊線；若確定出第一邊線和第二邊線之間的距離小于設(shè)定閾值時，將第二組件和第一組件對齊。與現(xiàn)有技術(shù)的創(chuàng)建網(wǎng)頁相比，提高了組件對齊的效率和精度，降低了組件精細(xì)對齊的操作難度。

本發(fā)明實(shí)施例所提供的創(chuàng)建網(wǎng)頁時組件對齊的方法及裝置，包括存儲了程序代碼的計(jì)算機(jī)可讀存儲介質(zhì)，所述程序代碼包括的指令可用于執(zhí)行前面方法實(shí)施例中所述的方法，具體實(shí)現(xiàn)可參見方法實(shí)施例，在此不再贅述。

本發(fā)明實(shí)施例所提供的裝置，其實(shí)現(xiàn)原理及產(chǎn)生的技術(shù)效果和前述方法實(shí)施例相同，為簡要描述，裝置實(shí)施例部分未提及之處，可參考前述方法實(shí)施例中相應(yīng)內(nèi)容。所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為描述的方便和簡潔，前述描述的系統(tǒng)、裝置和單元的具體工作過程，均可以參考上述方法實(shí)施例中的對應(yīng)過程，在此不再贅述。

應(yīng)注意到：相似的標(biāo)號和字母在下面的附圖中表示類似項(xiàng)，因此，一旦某一項(xiàng)在一個附圖中被定義，則在隨后的附圖中不需要對其進(jìn)行進(jìn)一步定義和解釋，此外，術(shù)語“第一”、“第二”、“第三”等僅用于區(qū)分描述，而不能理解為指示或暗示相對重要性。

最后應(yīng)說明的是：以上所述實(shí)施例，僅為本發(fā)明的具體實(shí)施方式，用以說明本發(fā)明的技術(shù)方案，而非對其限制，本發(fā)明的保護(hù)范圍并不局限于此，盡管參照前述實(shí)施例對本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，其依然可以對前述實(shí)施例所記載的技術(shù)方案進(jìn)行修改或可輕易想到變化，或者對其中部分技術(shù)特征進(jìn)行等同替換；而這些修改、變化或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明實(shí)施例技術(shù)方案的精神和范圍。都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)所述以權(quán)利要求的保護(hù)范圍為準(zhǔn)。