200847017 -九、發明說明： * 【發明所屬之技術領域】 Μ 本發明涉及一種進度條設計系統及方法。 【先前技術】 在Windows應用程式處理大量資料時，經常會要求用 戶等待，在這種情況下，通常採用進度條的方式，使用戶 了解資料處理的進度。 傳統的控制式的進度條，如圖1所示，其設計樣式單 • 一，不美觀，讓等待資料處理的用戶感到單調、乏味。 此外，設計者在設計個性化的進度條的時候，往往採 用程式重繪的方法，在程式中重新編寫一個進度條的擴展 類，分別對控件的各個區域進行編碼繪製。這種方法的確 可以實現個性化的進度條設計，但利用這種方法設計進度 條時，其編碼量相當大，而且對設計人員的技術能力要求 相當高，稍微不仔細就會出錯。因此，需要提供一種進度 條設計系統及方法，可以實現簡單、有個性而又美觀的進 ^ 度條設計。 【發明内容】 鑒於以上内容，有必要提出一種進度條設計系統及方 法，可以實現簡單又美觀的進度條設計。 一種進度條設計系統，其運行於一台電腦中。該系統 包括：初始化模組，用於對進度條控件進行初始化設計； 進度計算模組，用於計算所需處理的資料總量，並對處理 完成的進度百分比進行計算；及圖片拉動模組，用於按照 5 200847017 、 上述計算出的進度百分比拉動前景圖，使其根據比例覆蓋 背景圖。 1. 一種進度條設計方法，該方法包括步驟：初始化設計 進度條控件；計算出所需處理的資料總量；根據目前已經 處理的資料量，對處理完成的進度百分比進行計算；按照 計算出的進度百分比拉動前景圖，使其遮蓋背景圖；判斷 資料是否都已經處理完畢；及若資料全部處理完畢，則提 示用戶資料全部處理完畢，並拉動前景圖，使其完全覆蓋 •背景圖。 相較于習知技術，本發明所提供之進度條設計系統及 方法採用圖層重疊的思想進行進度條設計，方法簡單且設 計出的進度條美觀、充滿個性化色彩。 【實施方式】 參閱圖2所示，係本發明進度條設計系統較佳實施例的 功能板組圖。本發明所稱的各核組是電腦程式完成特定功 能的各個程式段，比程式本身更適合於描述軟體在電腦中 ^ 的執行過程，因此本發明對軟體的描述都以模組描述。 本發明的進度條設計系統可以運行在一台個人電腦 中，其主要包括：初始化模組100，進度計算模組110，圖 片拉動模組120，及判斷模組130。 所述初始化模組100用於對進度條控件進行初始化設 計。本發明較佳實施例是採用C++語言進行編程設計的。 所述初始化設計包括：準備兩張大小與目標進度條相同的 圖片，該兩張圖片的格式為bmp格式，且大小相同，顏色 200847017 ^ 及圖案可以根據用戶的需求自行選擇；導入上述兩張圖 β 片’分別作為進度條控件的前景圖與背景圖，對兩張圖片 的資源標識可以設置為IDB一FORE與IDB_BACK ;在一個 對話方塊控件上放置一個“Static Text”控件，並修改其標 識（ID)，使其不為默認的1〇(：_81八110 ;將上述“static Text控件與一個Control類型的變數相關聯；編寫一個擴 展類，實現進度條中前景圖的拉動效果；將上述C〇ntr〇1類 型的變數的類型修改為上述編寫的擴展類的類型。 ’所述進度計算模組110用於計算所需處理的資料總 量，並對處理完成的進度百分比進行計算。 所述圖片拉動模組120用於根據上述計算出的進度百 分比拉動前景圖，使其根據比例覆蓋背景圖。·· 所述判斷模組130用於判斷資料是否已經全部處理完 畢。 參閱圖3所示，係本發明進度條設計方法較佳實施例中 對進度條進行初始化設計的實施流程圖。 P 步驟S100，用戶準備兩張大小與目標進度條相同的圖 片，該兩張圖片的格式為bmp格式，且大小相同，顏色及 圖案可以根據用戶的需求自行選擇。 步驟S101，導入上述兩張圖片，分別作為進度條控件 的前景圖與背景圖，對兩張圖片的資源標識可以設置為 IDB_F0RE與IDBJBACK。 步驟S102，在一個對話方塊控件上放置一個“static Text”控件，並修改其標識（ID )，使其不為默認的 200847017 IDC一STATIC。 步驟Sl〇3，將上述“Static Text”控件與一個Control 類型的變數相關聯。 步驟S104，編寫一個擴展類，實現進度條中前景圖的 拉動效果。 步驟S105，將上述Control類型的變數的類型修改為上 述編寫的擴展類的類型。 參閱圖4所示，係本發明進度條設計方法較佳實施例中 進度條控件運行的實施流程圖。 步驟S200，初始化模組100執行用戶對進度條控件的初 始化設計，該初始化設計流程參閱圖3所示。 步驟S 2 01，進度計算模組11 〇計算出所需處理的資料總 量。 步驟S202,進度計算模組11〇根據目前已經處理的資料 里’對處理完成的進度百分比進行計算。 步驟S203中，圖片拉動模組12〇按照計算出的進度百分 比拉動前景圖，使其遮蓋背景圖。 步驟S204 ’判斷模組13〇判斷資料是否都已經處理完 畢。 若沒有全部處理完畢，則返回步驟S202，進度計算模 組11〇重新計算當前完成進度百分比。 若資料全部處理完畢，則在步驟S205中，圖片拉動模 組120提示用戶資料全部處理完畢，並拉動前景圖，使其完 全覆蓋背景圖。 8 200847017 - 參閱圖5所示，係本發明進度條設計方法較佳實施例中 # 進度條控件的運行效果示思圖。相比較圖1中傳統的控件式 進度條，本發明中進度條設計採用圖層重疊，利用多個圖 層之間的拉動造成一種動畫效果，並且背景圖與前景圖可 以根據用戶的需求自行選擇，方便美觀，充滿個性化。 以上所述僅為本發明之較佳實施例而已，且已達廣泛 之使用功效，凡其他未脫離本發明所揭示之精神下所完成 之均等變化或修飾，均應包含在下述之申請專利範圍内。 •【圖式簡單說明】 圖1係傳統的控件式進度條的示意圖。 圖2係本發明進度條設計系統較佳實施例的功能模組 圖。 圖3係本發明進度條設計方法較佳實施例中對進度條 進行初始化設計的實施流程圖。 圖4係本發明進度條設计方法較佳實施例中進度條控 件運行的實施流程圖。 ® 5係本發明進度條料方法較隹實_巾進度條控 件的運行效果示意圖。 【主要元件符號說明】 100 110 120 130 S200 初始化模組 進度計算模級 圖片拉動模組 判斷模組 初始化進度條控件 200847017 計算所需處理的資料總量 S201 根據當前已經處理的資料量，對處理完成的進度百分 比進行計算 S202 按照計算出的百分比移動前景圖，使其遮蓋背景圖 S203 判斷資料是否都已經處理完畢 S204 提示資料全部處理完畢，並使前景圖完全覆蓋背景圖 S205200847017 - IX. Description of the invention: * [Technical field to which the invention pertains] Μ The present invention relates to a progress bar design system and method. [Prior Art] When a Windows application processes a large amount of data, the user is often required to wait. In this case, a progress bar is usually used to let the user know the progress of the data processing. The traditional control-type progress bar, as shown in Figure 1, has a design style sheet. 1. It is unsightly and makes the users waiting for data processing feel monotonous and boring. In addition, when designing a personalized progress bar, the designer often uses the program redraw method to rewrite a progress bar extension class in the program, and separately code the various areas of the control. This method can indeed achieve a personalized progress bar design, but when using this method to design the progress bar, the amount of code is quite large, and the technical ability of the designer is quite high, and it will be wrong if not careful. Therefore, there is a need to provide a progress bar design system and method that can achieve a simple, personalized and aesthetically pleasing design. SUMMARY OF THE INVENTION In view of the above, it is necessary to propose a progress bar design system and method, which can realize a simple and beautiful progress bar design. A progress bar design system that runs on a computer. The system comprises: an initialization module for initializing the progress bar control; a progress calculation module for calculating the total amount of data to be processed, and calculating a percentage of the progress of the processing; and a picture pulling module, It is used to pull the foreground map according to the percentage of progress calculated by 5 200847017 and above, so that it covers the background map according to the scale. A method for designing a progress bar, the method comprising the steps of: initializing a design progress bar control; calculating a total amount of data to be processed; calculating a percentage of the progress of the processing according to the amount of data currently processed; The percentage of progress pulls the foreground image to cover the background image; judges whether the data has been processed; and if the data is completely processed, the user data is all processed, and the foreground image is pulled to completely cover the background image. Compared with the prior art, the progress bar design system and method provided by the present invention adopts the idea of overlapping layers to design a progress bar, and the method is simple and the designed progress bar is beautiful and full of personalized colors. [Embodiment] Referring to Figure 2, there is shown a functional board diagram of a preferred embodiment of the progress bar design system of the present invention. Each of the core groups referred to in the present invention is a program segment in which a computer program performs a specific function, and is more suitable for describing the execution process of the software in the computer than the program itself. Therefore, the description of the software in the present invention is described by a module. The progress bar design system of the present invention can be run in a personal computer, which mainly comprises: an initialization module 100, a progress calculation module 110, a picture pull module 120, and a determination module 130. The initialization module 100 is configured to initialize the progress bar control. The preferred embodiment of the present invention is programmed in the C++ language. The initial design includes: preparing two pictures of the same size as the target progress bar, the format of the two pictures is bmp format, and the size is the same, the color 200847017 ^ and the pattern can be selected according to the user's needs; importing the above two pictures The β slice is used as the foreground and background of the progress bar control respectively. The resource identifiers of the two images can be set to IDB-FORE and IDB_BACK; a “Static Text” control is placed on a dialog box control, and its identifier is modified ( ID), so that it is not the default 1〇 (:_81 eight 110; associate the above "static text control" with a variable of type Control; write an extension class to achieve the effect of the foreground map in the progress bar; The type of the variable of the type 〇ntr〇1 is modified to the type of the extended class written above. The progress calculation module 110 is configured to calculate the total amount of data to be processed, and calculate the percentage of progress of the processing completion. The picture pull module 120 is configured to pull the foreground image according to the calculated percentage of progress to cover the background image according to the ratio. The breaking module 130 is configured to determine whether the data has been completely processed. Referring to FIG. 3, it is a flowchart for implementing the initialization design of the progress bar in the preferred embodiment of the progress bar design method of the present invention. P Step S100, the user prepares two The picture is the same size as the target progress bar. The format of the two pictures is bmp format, and the size is the same. The color and pattern can be selected according to the user's needs. Step S101, import the above two pictures as the progress bar control respectively. For the foreground and background images, the resource identifiers for the two images can be set to IDB_F0RE and IDBJBACK. Step S102, placing a "static Text" control on a dialog box control and modifying its ID (ID) to make it not the default. 200847017 IDC-STATIC. Step S1, 3, associate the above "Static Text" control with a variable of type Control. Step S104, write an extension class to implement the pulling effect of the foreground image in the progress bar. Step S105, the above The type of the variable of the Control type is modified to the type of the extended class written above. See Figure 4. The implementation flow chart of the progress bar control operation in the preferred embodiment of the progress bar design method of the present invention. In step S200, the initialization module 100 performs an initial design of the progress bar control by the user, and the initialization design flow is shown in FIG. 3. Step S 2 01, the progress calculation module 11 calculates the total amount of data to be processed. In step S202, the progress calculation module 11 calculates the progress percentage of the processing completion according to the currently processed data. In step S203, the picture The pull module 12 拉 pulls the foreground map according to the calculated progress percentage to cover the background image. Step S204' determines whether the module 13 has judged whether the data has been processed. If not all of the processing is completed, the process returns to step S202, and the progress calculation module 11 recalculates the current completion progress percentage. If all the data is processed, in step S205, the picture pulling module 120 prompts the user to complete the processing of the data, and pulls the foreground image to completely cover the background image. 8 200847017 - Referring to FIG. 5, it is a schematic diagram of the operation effect of the #progress bar control in the preferred embodiment of the progress bar design method of the present invention. Compared with the traditional control progress bar in FIG. 1 , the progress bar design of the present invention adopts layer overlap, and an animation effect is generated by pulling between multiple layers, and the background image and the foreground image can be selected according to the user's needs, which is convenient. Beautiful and full of personalization. The above is only the preferred embodiment of the present invention, and has been used in a wide range of applications. Any other equivalent changes or modifications which are not departing from the spirit of the present invention should be included in the following claims. Inside. • [Simple description of the diagram] Figure 1 is a schematic diagram of a traditional control-type progress bar. Figure 2 is a functional block diagram of a preferred embodiment of the progress bar design system of the present invention. Fig. 3 is a flow chart showing the implementation of the initial design of the progress bar in the preferred embodiment of the progress bar design method of the present invention. Figure 4 is a flow chart showing the implementation of the progress bar control in the preferred embodiment of the progress bar design method of the present invention. ® 5 is a schematic diagram of the operation of the present invention. [Main component symbol description] 100 110 120 130 S200 Initialization module progress calculation mode image pull module judgment module initialization progress bar control 200847017 Calculate the total amount of data to be processed S201 According to the amount of data currently processed, the processing is completed. The progress percentage is calculated. S202 moves the foreground image according to the calculated percentage to make it cover the background image S203. It is judged whether the data has been processed. S204 prompts that all the data has been processed, and the foreground image completely covers the background image S205.