[發(fā)明專利]一種圖片添加展示內(nèi)容并隨圖片位移的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201910700460.8
• 申請(qǐng)日: 2019-07-31
• 公開（公告）號(hào): CN110442413A
• 公開（公告）日: 2019-11-12
• 發(fā)明（設(shè)計(jì)）人: 高強(qiáng);李志東;馬寧;王瑋
• 申請(qǐng)（專利權(quán)）人: 浪潮金融信息技術(shù)有限公司
• 主分類號(hào): G06F9/451
• 分類號(hào): G06F9/451;G06F3/0484
• 代理公司: 北京權(quán)智天下知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11638
• 代理人: 王新愛

本發(fā)明公開了一種圖片添加展示內(nèi)容并隨圖片位移的方法，包括：應(yīng)用于前端應(yīng)用中圖片時(shí)在任意位置添加展示內(nèi)容對(duì)圖片固定區(qū)域進(jìn)行注釋，并且展示內(nèi)容可隨圖片位移的方法，此方法使前端應(yīng)用擁有了更強(qiáng)的交互性，為圖片展示提供了更多元的展示方法。此方法應(yīng)用于各種展示類前端應(yīng)用，使用ajax方法通過HTTP請(qǐng)求加載平臺(tái)端的遠(yuǎn)程數(shù)據(jù)，使用localStorage存取展示內(nèi)容及樣式，動(dòng)態(tài)比對(duì)圖片及l(fā)ocalStorage存儲(chǔ)的注釋內(nèi)容來顯示相應(yīng)的展示內(nèi)容，通過控制注釋位置及圖片的相對(duì)位置實(shí)現(xiàn)展示內(nèi)容隨圖片進(jìn)行位移。此方法可實(shí)現(xiàn)操作人自主選擇展示樣式及展示內(nèi)容，可在圖片任意位置添加展示內(nèi)容對(duì)圖片固定區(qū)域進(jìn)行注釋，同時(shí)展示內(nèi)容可跟隨圖片切換及滑動(dòng)。

技術(shù)領(lǐng)域

本發(fā)明涉及圖片展示領(lǐng)域，特別是涉及一種圖片添加展示內(nèi)容并隨圖片位移的方法。

背景技術(shù)

隨著銀行網(wǎng)點(diǎn)、保險(xiǎn)門店等場景需要，前端應(yīng)用需要更強(qiáng)的交互性來滿足人們的要求，平時(shí)我們所見到的圖片展示內(nèi)容有限，無法對(duì)某區(qū)域進(jìn)行注釋說明，或進(jìn)行注釋說明后該區(qū)域無法隨圖片展示方式進(jìn)行位移。因此我們需要一種應(yīng)用于圖片任意位置添加展示內(nèi)容并隨圖片位移的方法來擴(kuò)展圖片展示內(nèi)容增強(qiáng)交互性。

發(fā)明內(nèi)容

本發(fā)明主要解決的技術(shù)問題是提供一種圖片添加展示內(nèi)容并隨圖片位移的方法，可靈活增刪展示內(nèi)容，展示內(nèi)容可擴(kuò)展性強(qiáng)并且可隨圖片位移。

為解決上述技術(shù)問題，本發(fā)明采用的一個(gè)技術(shù)方案是：提供一種圖片添加展示內(nèi)容并隨圖片位移的方法，該包括以下步驟：

步驟100，應(yīng)用啟動(dòng)后，點(diǎn)擊配置窗口按鈕后輸入口令；

步驟101，校驗(yàn)結(jié)果，判斷口令是否正確，通過則跳轉(zhuǎn)應(yīng)用配置界面，失敗則重新輸入；

步驟102，在系統(tǒng)配置界面點(diǎn)擊增加注釋按鈕；

步驟103，步驟102成功后，根據(jù)圖片展示區(qū)域的不同，選擇不同注釋樣式，同時(shí)通過HTTP請(qǐng)求加載管理平臺(tái)的遠(yuǎn)程數(shù)據(jù)；

步驟104，步驟103成功后，管理平臺(tái)根據(jù)已配置好的產(chǎn)品注釋內(nèi)容名稱進(jìn)行返回，供用戶選擇注釋內(nèi)容；

步驟105，步驟104檢測(cè)并返回注釋內(nèi)容后，用戶可根據(jù)需要選擇注釋內(nèi)容；

步驟106，拖動(dòng)注釋框至圖片需要注釋的位置；

步驟107，確定注釋樣式及內(nèi)容無誤后點(diǎn)擊確認(rèn)按鈕鎖定注釋位置，點(diǎn)擊取消按鈕則返回應(yīng)用配置界面；

步驟108，步驟107點(diǎn)擊確定后在每次展示內(nèi)容切換時(shí)，將動(dòng)態(tài)比對(duì)圖片及l(fā)ocalStorage存儲(chǔ)的注釋內(nèi)容來判斷是否顯示相應(yīng)的展示內(nèi)容；

步驟109，點(diǎn)擊注釋區(qū)域，在管理平臺(tái)獲取URL，同時(shí)管理平臺(tái)返回彈窗的展示內(nèi)容跳轉(zhuǎn)至步驟110；

步驟110，新窗口進(jìn)行注釋的展示，點(diǎn)擊可關(guān)閉可隱藏注釋窗口，如需查看可再次執(zhí)行步驟109。

進(jìn)一步，該方法基于前端應(yīng)用開發(fā)，開發(fā)語言為標(biāo)準(zhǔn)JavaScript語言。

進(jìn)一步，所述管理平臺(tái)通過socket連接方式與設(shè)備對(duì)接。

進(jìn)一步，所述localStorage存儲(chǔ)添加的展示內(nèi)容、樣式、相對(duì)位置、展示內(nèi)容及樣式。

本發(fā)明的有益效果是：本發(fā)明能夠?qū)崿F(xiàn)操作人自主選擇展示樣式及展示內(nèi)容，可在圖片任意位置添加展示內(nèi)容對(duì)圖片固定區(qū)域進(jìn)行注釋，同時(shí)展示內(nèi)容可跟隨圖片切換及滑動(dòng)。

附圖說明

圖1是本發(fā)明一種圖片添加展示內(nèi)容并隨圖片位移的方法一較佳實(shí)施例的流程圖。

具體實(shí)施方式