[發明專利]一種呈現引導蒙版的方法和裝置以及電子設備和存儲介質

在審

• 申請號: 202011555007.1
• 申請日: 2020-12-24
• 公開（公告）號: CN112558961A
• 公開（公告）日: 2021-03-26
• 發明（設計）人: 王志杰;馬琪;孫智彬;張志平;夏曙東
• 申請（專利權）人: 北京中交興路車聯網科技有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38;G06F8/20
• 代理公司: 北京辰權知識產權代理有限公司 11619
• 代理人: 劉廣達

本申請提供一種呈現引導蒙版的方法和裝置，該方法包括：對于在應用程序的指定頁面中要展示蒙版圖的一個或多個頁面元素，獲取頁面元素的尺寸以及在頁面中的位置；創建與頁面的尺寸一致的純透明色蒙版組件，將一個或多個蒙版圖片布局在該純透明色蒙版組件中；調用編輯接口，對布局在該純透明色蒙版組件中的蒙版圖片進行編輯處理，使應用程序呈現指定頁面的情況下，彈出蒙版圖片。本申請能確保方便準確的進行用戶行為引導和提升重點功能感知力度，從而實現快速有效準確滿足產品業務需求。

技術領域

本申請涉及計算機技術領域，具體涉及一種呈現引導蒙版的方法和裝置以及電子設備和存儲介質。

背景技術

隨著移動互聯網的日益普及，移動端應用程序(App)產品的開發周期越來越短，迭代很快，每個版本的發布，必然會增加一些新功能，或修改老功能，而功能是通過應用程序的各個頁面展示的。為了引導用戶使用，修改老功能導致的頁面改動，或新加功能時，以手機為例，手機應用程序一般會在該應用程序的頁面上，彈出一個蒙版圖遮罩手機屏幕，來告訴用戶改動或功能介紹，從而提高用戶體驗。

目前市面上基于flutter實現引導蒙版功能可大致分為兩種方案：

1.使用純Flutter技術實現，由于沒有考慮動態獲取引導功能坐標、靜態使用UI圖片以及沒有全面考慮不同分辨下的兼容等問題，無法應對不同需求時靈活快速實現可配置、可復用、可準確定位元素區域、快速響應等諸多問題，嚴重影響工作效率的問題，對用戶體驗以及產品自身也會帶來較大被動。

2.依托于原生APP技術支持，通過APP原生端實現該功能，然后對外提供方法后，由flutter調用原生的方法來變相實現。此方案雖然能夠完美解決上述方案1中的部分問題，但是對原生端依賴比較強，需要Android和iOS雙端開發，從而增加開發成本，不利于快速解決產品述求，同時容易受APP原生端影響，帶來不可控或者不可預知的問題。

發明內容

本申請的目的是提供一種呈現引導蒙版的方法以及系統。

本申請第一方面提供一種呈現引導蒙版的方法，包括：

對于在應用程序的指定頁面中要展示蒙版圖的一個或多個頁面元素，獲取所述頁面元素的尺寸以及在所述頁面中的位置；

創建與所述頁面的尺寸一致的純透明色蒙版組件，將一個或多個蒙版圖片布局在該純透明色蒙版組件中；

調用編輯接口，對布局在該純透明色蒙版組件中的蒙版圖片進行編輯處理，使所述應用程序呈現所述指定頁面的情況下，彈出所述蒙版圖片。

在本申請的一些實施方式中，所述獲取所述頁面元素的尺寸以及在所述頁面中的位置，包括：

將保存的蒙版配置信息轉換為多個蒙版類，并且形成多個頁面元素與所述一個或多個蒙版類一一映射的映射關系表；所述蒙版類中包含蒙版圖片或蒙版圖片的網絡地址，并且包含蒙版圖片在所述頁面中的布局位置；

根據所述映射關系表確定所述頁面中要展示蒙版圖的頁面元素所對應的蒙版類，按照該蒙版類獲取所述蒙版圖片以及確定所述蒙版圖片在所述純透明色蒙版組件中的布局位置。

在本申請的一些實施方式中，所述蒙版類中還包含蒙版圖所引導的頁面元素的標識；

所述蒙版圖片中包含箭頭；

將一個或多個蒙版圖片布局在該純透明色蒙版組件中的步驟包括：將蒙版圖片設置在所述純透明色蒙版組件中，并且使所述蒙版圖片中的箭頭指向具有所述標識的頁面元素。

在本申請的一些實施方式中，所述將一個或多個蒙版圖片布局在該純透明色蒙版組件中，包括：

基于widget中GlobalKey實例獲取準確坐標，轉換成實際像素值，通過傳參方式，控制需要繪制透明引導區域范圍，控制引導信息提示位置。