一種繪製座位圖的方法和裝置與流程
2023-05-04 00:38:21 1
本發明涉及信息處理技術領域，特別是涉及一種繪製座位圖的方法和裝置。
背景技術：
目前，越來越多的票務網頁提供在線座位圖供用戶選擇購買自己想要的座位，在購買之後座位會被鎖定，在這之後的用戶不能選擇被鎖定的座位。在現有技術中，繪製在線座位圖的方式是在網頁中插入多個文檔對象模型(英文：Document Object Model，縮寫：DOM)，每個DOM對象在網頁中顯示為一個座位，也就是說，被插入多個DOM對象在網頁中顯示為座位圖。具體地，瀏覽器獲得伺服器端的有關座位的信息後，創建和座位個數相同數量個DOM對象，瀏覽器將上述DOM對象統一插入到網頁中，其中，每個DOM對象在網頁中顯示為一個座位。但發明人經過研究發現，因為瀏覽器本身原因，創建和插入DOM對象會觸發瀏覽器其他操作行為很耗費時間，尤其是座位圖中座位數量較多時，創建和插入較多的DOM對象就會花費更多的時間，進而網頁顯示座位圖，即生成座位圖需要的時間也更多。可見，基於多個DOM對象繪製在線座位圖的方法，多個DOM對象的創建與插入耗時較多，導致網頁加載過慢，影響用戶購票體驗。
技術實現要素：
本發明所要解決的技術問題是，提供一種繪製座位圖的方法和裝置，利用瀏覽器支持的畫布(英文：Canvas)技術繪製座位圖，以減少生成和插入DOM對象的操作，耗時短，從而網頁加載快，改善了用戶體驗。
第一方面，提供了一種生成座位圖的方法，包括：
響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；
對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述所述座位集合中所述座位所在的行和列；
根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
優選的，還包括：
根據所述座位集合佔據實際空間的大小設置所述畫布的大小。
優選的，所述座位集合佔據實際空間的大小由所述座位集合中座位的數量，所述座位的大小和所述座位之間的距離計算得到。
優選的，還包括：
存儲所述行列信息和與所述行列信息對應的所述座位的標識。
優選的，還包括：
響應於用戶的點擊座位圖中座位的操作，獲取所述點擊位置的坐標；
將所述點擊位置的坐標轉換為所述坐標所屬的行列信息；
根據與所述坐標所屬的行列信息對應的所述座位的標識確定目標座位；
將所述目標座位的信息發送給伺服器，以便伺服器鎖定所述目標座位。
第一方面，提供了一種生成座位圖的裝置，包括：
插入單元，用於響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；
計算單元，用於對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述所述座位集合中所述座位所在的行和列；
繪製單元，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
優選的，還包括：
設置單元，用於根據所述座位集合佔據實際空間的大小設置所述畫布的大小。
優選的，所述座位集合佔據實際空間的大小由所述座位集合中座位的數量，所述座位的大小和所述座位之間的距離計算得到。
優選的，還包括：
存儲單元，用於存儲所述行列信息和與所述行列信息對應的所述座位的標識。
優選的，還包括：
獲取單元，用於響應於用戶的點擊座位圖中座位的操作，獲取所述點擊位置的坐標；
轉換單元，用於將所述點擊位置的坐標轉換為所述坐標所屬的行列信息；
確定單元，用於根據與所述坐標所屬的行列信息對應的所述座位的標識確定目標座位；
發送單元，用於將所述目標座位的信息發送給伺服器，以便伺服器鎖定所述目標座位。
與現有技術相比，本發明具有以下優點：
在本發明實施例中,響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位以形成座位圖。由此可見，現有技術中每個DOM都是獨立的，需要創建並插入與所述座位數量相同的DOM對象才能繪製出座位圖，而本發明實施例只需要在網頁中插入一個畫布對象，通過所述座位的行列信息計算所述座位在畫布上的坐標就可以畫布上繪製出整個座位圖，不需要多次創建和插入DOM對像，這樣就大大減少了繪製座位形成座位圖的時間，從而也減少了頁面加載的時間，提高了用戶的體驗。
附圖說明
為了更清楚地說明本發明實施例中的技術方案，下面將對實施例描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請中記載的一些實施例，對於本領域普通技術人員來講，還可以根據這些附圖獲得其他的附圖。
圖1為本發明實施例中一種應用場景所涉及的系統框架示意圖；
圖2為本發明實施例中一種繪製座位圖的方法的流程示意圖；
圖3為本發明實施例中另一種繪製座位圖的方法的流程示意圖；
圖4為本發明實施例中一種繪製座位圖的裝置的結構示意圖。
具體實施方式
為了使本技術領域的人員更好地理解本申請方案，下面將結合本申請實施例中的附圖，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅是本申請一部分實施例，而不是全部的實施例。基於本申請中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬於本申請保護的範圍。
發明人經過研究發現，現有技術的方式創建和插入DOM對象會觸發瀏覽器其他操作行為很耗費時間，尤其是座位圖中座位數量較多時，創建和插入較多的DOM對象就會花費更多的時間，進而網頁顯示座位圖，即生成座位圖需要的時間也更多，導致網頁加載過慢，影響用戶購票體驗。
為了解決這一問題，在本發明實施例中，響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位以形成座位圖。由此可見，現有技術中每個DOM都是獨立的，需要創建並插入與所述座位數量相同的DOM對象才能繪製出座位圖，而本發明實施例只需要在網頁中插入一個畫布對象，通過所述座位的行列信息計算所述座位在畫布上的坐標就可以畫布上繪製出整個座位圖，不需要多次創建和插入DOM對像，這樣就大大減少了繪製座位形成座位圖的時間，從而也減少了頁面加載的時間，提高了用戶的體驗。
舉例來說，本發明實施例的場景之一，可以是應用到如圖1所示的場景中。該場景可以包括伺服器101、瀏覽器102、網頁103，其中，伺服器101和瀏覽器102可以交互，瀏覽器102和網頁103可以交互。瀏覽器102在接收到伺服器101發送的為座位集合繪製座位圖的指令後，響應於為座位集合繪製座位圖的指令，在網頁103中插入一個畫布對象，所述畫布對象用於在網頁103上顯示畫布；對於所述座位集合中的座位，瀏覽器102根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述在所述座位集合中所述座位所在的行和列；瀏覽器102根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
可以理解的是，在上述應用場景中，雖然將本發明實施方式的動作描述由瀏覽器102執行，但是本發明在執行主體方面不受限制，只要執行了本發明實施方式所公開的動作即可。
可以理解的是，上述場景僅是本發明實施例提供的一個場景示例，本發明實施例並不限於此場景。
下面結合附圖，通過實施例來詳細說明本發明實施例中繪製座位圖的方法、裝置和設備的具體實現方式。
示例性方法
參見圖2，示出了本發明實施例中一種生成座位圖的方法的流程示意圖，在本實施例中，所述方法例如可以包括以下步驟：
步驟201：響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布。
所述座位集合可以是一定空間內所有座位的一個集合，例如電影院中一個廳所有觀影座位的集合。
所述畫布是一個矩形區域，可以控制其每一像素，畫布有它自己本身的屬性、方法和事件，其中就有繪圖的方法，利用瀏覽器支持的腳本語言調用畫布接口就可以在所述畫布上可以繪製矩形、圓形、字符等。
步驟202：對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述所述座位集合中所述座位所在的行和列。
步驟203：根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
需要說明的是，在繪製座位時，不考慮畫布的大小，僅依照所述座位的行列信息計算出的坐標繪製座位，此種方式可能出現僅僅繪製出的座位的行列信息與座位集合相同，而座位的大小、座位之間的距離等與座位集合相似度低。如果插入畫布對象後所顯示的畫布的大小與所述座位集合佔據實際空間的大小成有相應的關係，例如成比例時，繪製出的座位圖中座位的行列信息、座位的大小以及座位之間的距離與座位集合的相似度更高。因此，在本實施例的一些實施方式中，例如還可以包括：根據所述座位集合佔據實際空間的大小設置所述畫布的大小。例如，在得到所述座位集合佔據實際空間的大小後，成比例的壓縮來設置所述畫布大小。
可以理解的是，一般情況下，獲取座位集合的數據中有座位的大小、座位之間的距離和座位的數量，這時可以根據單個座位的大小、座位之間的距離和行列中座位的數量可以計算座位集合的行列大小，從而得到所述座位集合佔據實際空間的大小。在本實施例中，所述座位集合佔據實際空間的大小由所述座位集合中座位的數量，所述座位的大小和所述座位之間的距離計算得到。當然並不限於上述方式得到座位集合佔據實際空間的大小，也可以是客戶端直接從伺服器獲取所述座位集合佔據實際空間的大小。
需要說明的是，繪製座位有兩種方式，一種是計算一個座位在所述畫布中的坐標後，然後所述畫布中繪製一個座位，直至繪製出所有座位；另一種是一次性計算所有座位在所述畫布中的坐標後，在所述畫布中一次性繪製所述所有座位。
需要說明的是，獲取到所述座位的行列信息後，保存行列信息以及與所述行列信息對應的所述座位的標識，以便當知道坐標信息時，可以將坐標信息直接轉換成行列信息，進而可以根據行列信息直接找到相對應的座位。在本實施例的一些實施方式中，例如還可以包括：存儲所述行列信息和與所述行列信息對應的所述座位的標識。
需要說明的是，在鎖定座位圖中的座位時，一般使用循環遍曆法，即需要鎖定的目標座位的坐標與座位圖中座位的坐標一次一次地進行比較，直到比較結果相匹配時，才能確定目標座位然後鎖定目標座位，執行起來比較複雜，而本實施例中的座位圖本就是循環遍歷所有座位而繪製的，因此只需要將需要鎖定的目標座位的坐標轉換為行列信息，根據行列信息對應的座位的標識來確定目標座位，進而鎖定目標座位，執行起來簡單方便，耗時短。在本實施例的一些實施方式中，例如還可以包括：響應於用戶的點擊座位圖中座位的操作，獲取所述點擊位置的坐標；將所述點擊位置的坐標轉換為所述坐標所屬的行列信息；根據與所述坐標所屬的行列信息對應的所述座位的標識確定目標座位；將所述目標座位的信息發送給伺服器，以便伺服器鎖定所述目標座位。
需要說明的是，當所述點擊位置的坐標無法轉換為所述坐標所屬的行列信息時，即表示用戶點擊座位圖的操作並沒有點擊到座位，有可能是點擊是座位與座位的空隙處，此時不會鎖定任何座位，用戶需要再次進行點擊操作以便執行鎖定座位的步驟。
在本實施例中，在確定目標座位之後，可以改變目標座位的顯示狀態，以便用戶可以看到所點擊的座位是其所選擇的目標座位，也便於後面的用戶顯而易見地知道該座位已被鎖定不能再選擇此座位，一般情況下，改變目標座位的顯示狀態可以採用改變目標座位顏色的方式，當然，本實施例並不拘泥於此方式。
通過本實施例提供的各種實施方式，響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位以形成座位圖。由此可見，現有技術中每個DOM都是獨立的，需要創建並插入與所述座位數量相同的DOM對象才能繪製出座位圖，而本發明實施例只需要在網頁中插入一個畫布對象，通過所述座位的行列信息計算所述座位在畫布上的坐標就可以畫布上繪製出整個座位圖，不需要多次創建和插入DOM對像，這樣就大大減少了繪製座位形成座位圖的時間，從而也減少了頁面加載的時間，提高了用戶的體驗。
參見圖3，示出了本發明實施例中另一種生成座位圖的方法的流程示意圖，在本實施例中，所述方法例如可以包括以下步驟：
步驟301：響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布。
步驟302：根據所述座位集合中座位的數量，所述座位的大小和所述座位之間的距離計算所述座位集合佔據實際空間的大小。
步驟303：根據所述座位集合佔據實際空間的大小設置所述畫布的大小。
步驟304：對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述所述座位集合中所述座位所在的行和列。
步驟305：根據所述座位在所述畫布中的坐標，在所述畫布中依次繪製單個座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
需要說明的是，依次繪製單個座位後，可以根據所繪製的座位的數量與所述座位集合中座位數量的比較來判斷是否繪製完畢，如果所繪製的座位的數量與所述座位集合中座位數量不一致，則繼續繪製剩餘座位。此方式可以避免出現所繪製的座位圖不完整的情況。
通過本實施例提供的各種實施方式，響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位以形成座位圖。由此可見，現有技術中每個DOM都是獨立的，需要創建並插入與所述座位數量相同的DOM對象才能繪製出座位圖，而本發明實施例只需要在網頁中插入一個畫布對象，通過所述座位的行列信息計算所述座位在畫布上的坐標就可以畫布上繪製出整個座位圖，不需要多次創建和插入DOM對像，這樣就大大減少了繪製座位形成座位圖的時間，從而也減少了頁面加載的時間，提高了用戶的體驗。
示例性設備
參見圖4，示出了本發明實施例中一種生成座位圖的裝置的結構示意圖。在本實施例中，所述裝置例如具體可以包括：
插入單元401，用於響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布。
計算單元402，用於對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，所述行列信息用於描述所述座位集合中所述座位所在的行和列。
繪製單元403，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位，以便在所述畫布上形成與所述座位集合對應的座位圖。
可選的，所述裝置例如還可以包括：設置單元，用於根據所述座位集合佔據實際空間的大小設置所述畫布的大小。
可選的，所述座位集合佔據實際空間的大小由所述座位集合中座位的數量，所述座位的大小和所述座位之間的距離計算得到。
可選的，所述裝置例如還可以包括：存儲單元，用於存儲所述行列信息和與所述行列信息對應的所述座位的標識。
可選的，所述裝置例如還可以包括：
獲取單元，用於響應於用戶的點擊座位圖中座位的操作，獲取所述點擊位置的坐標；
轉換單元，用於將所述點擊位置的坐標轉換為所述坐標所屬的行列信息；
確定單元，用於根據與所述坐標所屬的行列信息對應的所述座位的標識確定目標座位；
發送單元，用於將所述目標座位的信息發送給伺服器，以便伺服器鎖定所述目標座位。
通過本實施例提供的各種實施方式，響應於為座位集合繪製座位圖的指令，在網頁中插入一個畫布對象，所述畫布對象用於在網頁上顯示畫布；對於所述座位集合中的座位，根據所述座位的行列信息，計算所述座位在所述畫布中的坐標，根據所述座位在所述畫布中的坐標，在所述畫布中繪製所述座位以形成座位圖。由此可見，現有技術中每個DOM都是獨立的，需要創建並插入與所述座位數量相同的DOM對象才能繪製出座位圖，而本發明實施例只需要在網頁中插入一個畫布對象，通過所述座位的行列信息計算所述座位在畫布上的坐標就可以畫布上繪製出整個座位圖，不需要多次創建和插入DOM對像，這樣就大大減少了繪製座位形成座位圖的時間，從而也減少了頁面加載的時間，提高了用戶的體驗。
通過以上的實施方式的描述可知，本領域的技術人員可以清楚地了解到上述實施例方法中的全部或部分步驟可藉助軟體加通用硬體平臺的方式來實現。基於這樣的理解，本發明的技術方案可以以軟體產品的形式體現出來，該計算機軟體產品可以存儲在存儲介質中，如只讀存儲器(英文：read-only memory，ROM)/RAM、磁碟、光碟等，包括若干指令用以使得一臺計算機設備(可以是個人計算機，伺服器，或者諸如路由器等網絡通信設備)執行本發明各個實施例或者實施例的某些部分所述的方法。
本說明書中的各個實施例均採用遞進的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對於方法實施例和設備實施例而言，由於其基本相似於系統實施例，所以描述得比較簡單，相關之處參見系統實施例的部分說明即可。以上所描述的設備及系統實施例僅僅是示意性的，其中作為分離部件說明的模塊可以是或者也可以不是物理上分開的，作為模塊顯示的部件可以是或者也可以不是物理模塊，即可以位於一個地方，或者也可以分布到多個網絡單元上。可以根據實際的需要選擇其中的部分或者全部模塊來實現本實施例方案的目的。本領域普通技術人員在不付出創造性勞動的情況下，即可以理解並實施。
以上所述僅是本發明的優選實施方式，並非用於限定本發明的保護範圍。應當指出，對於本技術領域的普通技術人員來說，在不脫離本發明的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也應視為本發明的保護範圍。