[發明專利]一種實現界面對位的方法及裝置

在審

• 申請號: 201310598021.3
• 申請日: 2013-11-21
• 公開（公告）號: CN103605521A
• 公開（公告）日: 2014-02-26
• 發明（設計）人: 馮震坤
• 申請（專利權）人: 廣州愛九游信息技術有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 北京鴻元知識產權代理有限公司 11327
• 代理人: 陳英俊;龔潔

1.一種實現界面對位的方法，包括：

通過圖像處理軟件生成含設計圖切片的對位信息的網頁格式文件；

通過配置程序讀取所述網頁格式文件進行解析，獲取其中的所述對位信息，根據所述對位信息生成對位配置文件；

通過界面程序讀取所述對位配置文件，從所述對位配置文件中獲取所述對位信息來查找對應的設計圖切片及其所處位置，根據查找到的設計圖切片及其所處位置生成與設計圖對應的界面。

2.根據權利要求1所述的實現界面對位的方法，其中，所述設計圖切片的對位信息包括：設計圖切片名稱、CSS樣式名稱和CSS樣式信息，所述CSS樣式信息中含有切片的坐標、切片的寬度和高度。

3.根據權利要求2所述的實現界面對位的方法，其中，所述通過配置程序讀取所述網頁格式文件進行解析，獲取其中的所述對位信息，根據所述對位信息生成對位配置文件包括：

讀取所述網頁格式文件后解析其所含有的內容，獲取其中的設計圖切片名稱、CSS樣式名稱和CSS樣式信息；

為每個CSS樣式生成配置數據對象，所述配置數據對象含有設計圖切片名稱、CSS樣式名稱、切片的坐標、切片的寬度和高度；

生成含有所述配置數據對象的對位配置文件，其中所述配置數據對象以所述CSS樣式名稱為標識。

4.根據權利要求3所述的實現界面對位的方法，其中，所述生成含有所述配置數據對象的對位配置文件包括：

將所有配置數據對象合并到一個位置對象，將所有位置對象合并生成一個對位配置文件，其中所述位置對象以所述網頁格式文件的名稱為標識。

5.根據權利要求4所述的實現界面對位的方法，通過界面程序讀取所述對位配置文件，從所述對位配置文件中獲取所述對位信息來查找對應的設計圖切片及其所處位置，根據查找到的設計圖切片及其所處位置生成與設計圖對應的界面包括：

所述界面程序讀取所述對位配置文件后，通過在所述對位配置文件中遍歷所有網頁格式文件的名稱查找指定的網頁格式文件的名稱所對應的位置對象；

在查找到的所述位置對象中，遍歷所有CSS樣式名稱查找指定的CSS樣式名稱對應的配置數據對象；

獲取查找到的所述配置數據對象中的設計圖切片名稱、切片的坐標、切片的寬度和高度，

根據所述設計圖切片名稱查找到對應該名稱的設計圖切片；

根據所述切片的坐標、切片的寬度和高度，設置所述所述查找到的設計圖切片的位置；

根據設置后的設計圖切片，生成與設計圖對應的界面。

6.根據權利要求1所述的實現界面對位的方法，所述通過圖像處理軟件生成含設計圖切片的對位信息的網頁格式文件包括：

在PhotoShop軟件中，通過切片工具菜單將設計圖中的界面元素作為切片進行框選，并設置設計圖切片名稱，保存為HTML文件，在保存時將設計圖切片名稱、以設計圖切片名稱為標識的CSS樣式名稱和CSS樣式信息一起存儲。

7.一種實現界面對位的裝置，包括：

圖像處理單元，用于通過圖像處理軟件生成含設計圖切片的對位信息的網頁格式文件；

配置程序單元，用于通過配置程序讀取所述網頁格式文件進行解析，獲取其中的所述對位信息，根據所述對位信息生成對位配置文件；

界面程序單元，用于通過界面程序讀取所述對位配置文件，從所述對位配置文件中獲取所述對位信息來查找對應的設計圖切片及其所處位置，根據查找到的設計圖切片及其所處位置生成與設計圖對應的界面。

8.根據權利要求7所述的實現界面對位的裝置，所述配置程序單元包括：

網頁文件處理單元，用于通過配置程序讀取所述網頁格式文件進行解析，獲取其中的設計圖切片的對位信息，所述設計圖切片的對位信息包括：設計圖切片名稱、CSS樣式名稱和CSS樣式信息，所述CSS樣式信息中含有切片的坐標、切片的寬度和高度；

配置文件生成單元，用于為每個CSS樣式生成配置數據對象，所述配置數據對象含有CSS樣式名稱、切片的坐標、切片的寬度和高度，并生成含有所述配置數據對象的對位配置文件，其中所述配置數據對象以所述CSS樣式名稱為標識。

9.根據權利要求8所述的實現界面對位的裝置，所述配置文件生成單元是將所有配置數據對象合并到一個位置對象，將所有位置對象合并生成一個對位配置文件，其中所述位置對象以所述網頁格式文件的名稱為標識。

10.根據權利要求9所述的實現界面對位的裝置，所述界面程序單元包括：

第一查找單元，用于讀取所述對位配置文件后，通過在所述對位配置文件中遍歷所有網頁格式文件的名稱查找指定的網頁格式文件的名稱所對應的位置對象；

第二查找單元，用于在第一查找單元查找到的所述位置對象中，遍歷所有CSS樣式名稱查找指定的CSS樣式名稱對應的配置數據對象；

信息獲取單元，用于獲取查找到的所述配置數據對象中的設計圖切片名稱、切片的坐標、切片的寬度和高度；

界面生成單元，用于根據所述設計圖切片名稱查找到對應該名稱的設計圖切片，根據所述切片的坐標、切片的寬度和高度，設置所述所述查找到的設計圖切片的位置，根據設置后的設計圖切片，生成與設計圖對應的界面。