[發(fā)明專利]三角形圖標(biāo)代碼生成方法、生成裝置及可讀存儲(chǔ)介質(zhì)

在審

• 申請?zhí)枺?/td>: 202111237336.6
• 申請日: 2021-10-25
• 公開（公告）號: CN113672210A
• 公開（公告）日: 2021-11-19
• 發(fā)明（設(shè)計(jì)）人: 唐士瀛
• 申請（專利權(quán)）人: 深圳市明源云空間電子商務(wù)有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/33;G06F8/34;G06F8/38;G06F8/65
• 代理公司: 深圳市恒程創(chuàng)新知識產(chǎn)權(quán)代理有限公司 44542
• 代理人: 趙愛蓉

1.一種三角形圖標(biāo)代碼生成方法，其特征在于，所述三角形圖標(biāo)代碼生成方法包括：

創(chuàng)建編輯區(qū)域，所述編輯區(qū)域用來設(shè)置三角形的顯示屬性；

創(chuàng)建預(yù)覽區(qū)域，所述預(yù)覽區(qū)域用來根據(jù)所述編輯區(qū)域設(shè)置的顯示屬性值顯示對應(yīng)樣式的三角形；

創(chuàng)建代碼區(qū)域，所述代碼區(qū)域用來根據(jù)所述編輯區(qū)域設(shè)置的顯示屬性值顯示對應(yīng)的CSS代碼；

獲取用戶在編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性值；

基于用戶在編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性值，在預(yù)覽區(qū)域顯示對應(yīng)樣式的三角形；

根據(jù)所述編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性值，生成對應(yīng)的CSS代碼。

2.如權(quán)利要求1所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述顯示屬性包括三角形頂點(diǎn)方向、三角形類型、底邊寬度、頂點(diǎn)到底邊的高度、旋轉(zhuǎn)角度、背景色和IE兼容性的多種類型。

3.如權(quán)利要求2所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述創(chuàng)建編輯區(qū)域的步驟包括：

用div標(biāo)簽分別創(chuàng)建不同方向的控制塊，基于用戶點(diǎn)擊不同方向的控制塊，生成對應(yīng)方向的三角形；

用input標(biāo)簽創(chuàng)建旋轉(zhuǎn)角度控制條，基于用戶拖動(dòng)旋轉(zhuǎn)角度控制條更改三角形的旋轉(zhuǎn)角度；

用input標(biāo)簽創(chuàng)建兩個(gè)類型單選項(xiàng)，基于用戶點(diǎn)擊對應(yīng)的類型單選項(xiàng)，生成等邊三角形或者等腰三角形；

用input標(biāo)簽創(chuàng)建三角形底邊的寬度控制條，基于用戶拖動(dòng)寬度控制條更改三角形底邊的寬度；

用input標(biāo)簽創(chuàng)建三角形頂點(diǎn)到底邊的高度控制條，基于用戶拖動(dòng)高度控制條更改三角形頂點(diǎn)到底邊的高度；

用input標(biāo)簽創(chuàng)建顏色選擇器，基于用戶點(diǎn)擊顏色選擇器中不同的顏色區(qū)域設(shè)置三角形的顏色；

用input標(biāo)簽創(chuàng)建IE兼容可選項(xiàng)，用于設(shè)置是否需要生成兼容IE的三角形圖標(biāo)，默認(rèn)為選中狀態(tài)。

4.如權(quán)利要求3所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述創(chuàng)建編輯區(qū)域的步驟還包括：

用input標(biāo)簽創(chuàng)建旋轉(zhuǎn)角度輸入框，用于輸入任意的旋轉(zhuǎn)角度數(shù)值；

用input標(biāo)簽創(chuàng)建底邊寬度輸入框，用于輸入任意的底邊寬度數(shù)值；

用input標(biāo)簽創(chuàng)建頂點(diǎn)高度輸入框，用于輸入任意的頂點(diǎn)高度數(shù)值。

5.如權(quán)利要求4所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述三角形圖標(biāo)代碼生成方法應(yīng)用于瀏覽器插件，瀏覽器中設(shè)置用于觸發(fā)所述三角形圖標(biāo)代碼生成方法的觸發(fā)控件；

在所述創(chuàng)建編輯區(qū)域的步驟之前，所述三角形圖標(biāo)代碼生成方法還包括：

當(dāng)檢測到用戶點(diǎn)擊所述觸發(fā)控件觸發(fā)的生成指令時(shí)，執(zhí)行所述創(chuàng)建編輯區(qū)域的步驟。

6.如權(quán)利要求5所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述創(chuàng)建預(yù)覽區(qū)域的步驟包括：

用div標(biāo)簽創(chuàng)建畫布編輯區(qū)，并建立編輯區(qū)域顯示屬性與畫布編輯區(qū)的賦值關(guān)系。

7.如權(quán)利要求6所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述創(chuàng)建代碼區(qū)域的步驟包括：

用div標(biāo)簽創(chuàng)建文本框，將所述編輯區(qū)域的顯示屬性以字符串的形式賦值到文本框標(biāo)簽；

用button標(biāo)簽創(chuàng)建復(fù)制按鈕，用于快捷復(fù)制生成的代碼到剪貼板。

8.如權(quán)利要求7所述的三角形圖標(biāo)代碼生成方法，其特征在于，所述根據(jù)所述編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性值，生成對應(yīng)的CSS代碼的步驟包括：

根據(jù)所述編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性的類型，在預(yù)設(shè)的CSS代碼模板中確定待更新代碼內(nèi)容；

根據(jù)所述編輯區(qū)域設(shè)置的實(shí)時(shí)顯示屬性值，對所述待更新代碼內(nèi)容進(jìn)行替換，以在所述代碼區(qū)域生成對應(yīng)的CSS代碼。

9.一種三角形圖標(biāo)代碼生成裝置，其特征在于，所述三角形圖標(biāo)代碼生成裝置包括：存儲(chǔ)器、處理器及存儲(chǔ)在所述存儲(chǔ)器上并可在所述處理器上運(yùn)行的計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被所述處理器執(zhí)行時(shí)實(shí)現(xiàn)如權(quán)利要求1至8中任一項(xiàng)所述的三角形圖標(biāo)代碼生成方法的步驟。

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)如權(quán)利要求1至8中任一項(xiàng)所述的三角形圖標(biāo)代碼生成方法的步驟。