本申請(qǐng)涉及數(shù)據(jù)處理，尤其涉及一種漸變色背景渲染方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備。

背景技術(shù)：

1、在web開發(fā)領(lǐng)域，特別是在使用vue.js等現(xiàn)代前端框架構(gòu)建大型應(yīng)用時(shí)，優(yōu)雅地管理和應(yīng)用界面元素的視覺樣式，如背景漸變效果，對(duì)于提升用戶體驗(yàn)至關(guān)重要。然而，隨著項(xiàng)目規(guī)模的擴(kuò)大，直接在組件內(nèi)部硬編碼css漸變樣式逐漸暴露出多重挑戰(zhàn)。

2、例如，當(dāng)項(xiàng)目中有多個(gè)元素需要使用相同的漸變色背景時(shí)，如果直接在每個(gè)元素上通過css編寫漸變樣式，會(huì)導(dǎo)致大量的代碼重復(fù)，隨著項(xiàng)目的擴(kuò)展，直接編寫在html或css文件中的漸變樣式變得難以追蹤和管理，導(dǎo)致漸變色背景的靈活性和可擴(kuò)展性受限。

技術(shù)實(shí)現(xiàn)思路

1、本申請(qǐng)的目的旨在至少能解決上述的技術(shù)缺陷之一，特別是現(xiàn)有技術(shù)中直接編寫在html或css文件中的漸變樣式難以追蹤和管理，導(dǎo)致后續(xù)漸變色背景的靈活性和可擴(kuò)展性受限的技術(shù)缺陷。

2、本申請(qǐng)?zhí)峁┝艘环N漸變色背景渲染方法，所述方法包括：

3、接收父組件傳遞的屬性對(duì)象，并獲取所述屬性對(duì)象中渲染對(duì)象的渲染參數(shù)；所述渲染參數(shù)包括基礎(chǔ)漸變參數(shù)和視覺效果參數(shù)；

4、根據(jù)所述基礎(chǔ)漸變參數(shù)生成所述渲染對(duì)象的初始樣式對(duì)象，并基于所述視覺效果參數(shù)對(duì)所述初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象；

5、對(duì)所述渲染對(duì)象進(jìn)行插槽檢測(cè)，并在檢測(cè)到所述渲染對(duì)象存在插槽內(nèi)容時(shí)，將所述插槽內(nèi)容渲染至所述目標(biāo)樣式對(duì)象中，以更新所述目標(biāo)樣式對(duì)象；

6、將所述目標(biāo)樣式對(duì)象返回給所述父組件，以使所述父組件將所述目標(biāo)樣式對(duì)象應(yīng)用于所述渲染對(duì)象中。

7、可選地，所述根據(jù)所述基礎(chǔ)漸變參數(shù)生成所述渲染對(duì)象的初始樣式對(duì)象，包括：

8、確定所述基礎(chǔ)漸變參數(shù)中的起始顏色和結(jié)束顏色，并按照所述基礎(chǔ)漸變參數(shù)中的漸變方向?qū)λ銎鹗碱伾退鼋Y(jié)束顏色進(jìn)行漸變計(jì)算，以根據(jù)計(jì)算結(jié)果生成所述渲染對(duì)象的初始樣式對(duì)象。

9、可選地，所述基于所述視覺效果參數(shù)對(duì)所述初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象，包括：

10、根據(jù)所述視覺效果參數(shù)確定各個(gè)視覺效果屬性對(duì)應(yīng)的屬性參數(shù)值，并按照各個(gè)屬性參數(shù)值對(duì)所述初始樣式對(duì)象中的各個(gè)視覺效果屬性進(jìn)行參數(shù)調(diào)整，得到目標(biāo)樣式對(duì)象；

11、其中，所述視覺效果屬性包括漸變中心點(diǎn)、漸變透明度、漸變形狀、漸變動(dòng)畫效果。

12、可選地，所述根據(jù)所述視覺效果參數(shù)確定各個(gè)視覺效果屬性對(duì)應(yīng)的屬性參數(shù)值，包括：

13、針對(duì)每一視覺效果屬性，判斷所述視覺效果參數(shù)中是否存在該視覺效果屬性的參數(shù)值；

14、若是，則從所述視覺效果參數(shù)中獲取該視覺效果屬性的參數(shù)值，作為該視覺效果屬性對(duì)應(yīng)的屬性參數(shù)值；

15、若否，則讀取所述視覺效果屬性的默認(rèn)值，作為該視覺效果屬性對(duì)應(yīng)的屬性參數(shù)值。

16、可選地，所述對(duì)所述渲染對(duì)象進(jìn)行插槽檢測(cè)，包括：

17、判斷所述渲染對(duì)象是否為自定義的具名插槽；

18、若是，則確認(rèn)所述渲染對(duì)象為插槽對(duì)象，并獲取所述插槽對(duì)象的插槽內(nèi)容；

19、若否，則確認(rèn)所述渲染對(duì)象為元素對(duì)象；所述元素對(duì)象不存在插槽內(nèi)容。

20、可選地，所述將所述插槽內(nèi)容渲染至所述目標(biāo)樣式對(duì)象中，包括：

21、確定所述插槽內(nèi)容的渲染位置和渲染樣式，并按照所述渲染位置和所述渲染樣式將所述插槽內(nèi)容渲染至所述目標(biāo)樣式對(duì)象中。

22、本申請(qǐng)還提供了一種漸變色背景渲染裝置，包括：

23、參數(shù)獲取模塊，用于接收父組件傳遞的屬性對(duì)象，并獲取所述屬性對(duì)象中渲染對(duì)象的渲染參數(shù)；所述渲染參數(shù)包括基礎(chǔ)漸變參數(shù)和視覺效果參數(shù)；

24、對(duì)象生成模塊，用于根據(jù)所述基礎(chǔ)漸變參數(shù)生成所述渲染對(duì)象的初始樣式對(duì)象，并基于所述視覺效果參數(shù)對(duì)所述初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象；

25、對(duì)象更新模塊，用于對(duì)所述渲染對(duì)象進(jìn)行插槽檢測(cè)，并在檢測(cè)到所述渲染對(duì)象存在插槽內(nèi)容時(shí)，將所述插槽內(nèi)容渲染至所述目標(biāo)樣式對(duì)象中，以更新所述目標(biāo)樣式對(duì)象；

26、對(duì)象應(yīng)用模塊，用于將所述目標(biāo)樣式對(duì)象返回給所述父組件，以使所述父組件將所述目標(biāo)樣式對(duì)象應(yīng)用于所述渲染對(duì)象中。

27、可選地，所述對(duì)象生成模塊包括：

28、漸變計(jì)算子模塊，用于確定所述基礎(chǔ)漸變參數(shù)中的起始顏色和結(jié)束顏色，并按照所述基礎(chǔ)漸變參數(shù)中的漸變方向?qū)λ銎鹗碱伾退鼋Y(jié)束顏色進(jìn)行漸變計(jì)算，以根據(jù)計(jì)算結(jié)果生成所述渲染對(duì)象的初始樣式對(duì)象。

29、本申請(qǐng)還提供了一種存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)中存儲(chǔ)有計(jì)算機(jī)可讀指令，所述計(jì)算機(jī)可讀指令被一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得一個(gè)或多個(gè)處理器執(zhí)行如上述實(shí)施例中任一項(xiàng)所述漸變色背景渲染方法的步驟。

30、本申請(qǐng)還提供了一種計(jì)算機(jī)設(shè)備，包括：一個(gè)或多個(gè)處理器，以及存儲(chǔ)器；

31、所述存儲(chǔ)器中存儲(chǔ)有計(jì)算機(jī)可讀指令，所述計(jì)算機(jī)可讀指令被所述一個(gè)或多個(gè)處理器執(zhí)行時(shí)，執(zhí)行如上述實(shí)施例中任一項(xiàng)所述漸變色背景渲染方法的步驟。

32、從以上技術(shù)方案可以看出，本申請(qǐng)實(shí)施例具有以下優(yōu)點(diǎn)：

33、本申請(qǐng)?zhí)峁┑臐u變色背景渲染方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備，在接收到父組件傳遞的屬性對(duì)象后，可以獲取屬性對(duì)象中渲染對(duì)象的渲染參數(shù)，這里通過在父組件外部實(shí)現(xiàn)漸變色背景渲染的方式，可以避免父組件中渲染代碼重復(fù)堆砌，降低后續(xù)渲染樣式管理的難度；由于渲染參數(shù)中包括了基礎(chǔ)漸變參數(shù)和視覺效果參數(shù)，因此可以根據(jù)基礎(chǔ)漸變參數(shù)生成渲染對(duì)象的初始樣式對(duì)象，并基于視覺效果參數(shù)對(duì)初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象，從而可以提供豐富多樣的視覺布局，進(jìn)而增強(qiáng)漸變色背景的靈活性和可擴(kuò)展性；其次，本申請(qǐng)還可以對(duì)渲染對(duì)象進(jìn)行插槽檢測(cè)，并在檢測(cè)到渲染對(duì)象存在自定義的插槽內(nèi)容時(shí)，將插槽內(nèi)容渲染至目標(biāo)樣式對(duì)象中，以更新目標(biāo)樣式對(duì)象，在此利用了插槽機(jī)制，使得漸變背景能夠與插槽內(nèi)容無縫融合，進(jìn)一步提高漸變色背景的靈活性和可擴(kuò)展性。最后，可以將目標(biāo)樣式對(duì)象返回給父組件，以使父組件將目標(biāo)樣式對(duì)象應(yīng)用于渲染對(duì)象中；因此，本申請(qǐng)可以將該漸變色背景渲染方法抽象后封裝為一個(gè)可復(fù)用的組件，并應(yīng)用于父組件中，使得渲染樣式的更新與調(diào)整能夠在單一位置完成，進(jìn)而提高漸變色背景的靈活性和可擴(kuò)展性。

技術(shù)特征：

1.一種漸變色背景渲染方法，其特征在于，所述方法包括：

2.根據(jù)權(quán)利要求1所述的漸變色背景渲染方法，其特征在于，所述根據(jù)所述基礎(chǔ)漸變參數(shù)生成所述渲染對(duì)象的初始樣式對(duì)象，包括：

3.根據(jù)權(quán)利要求1所述的漸變色背景渲染方法，其特征在于，所述基于所述視覺效果參數(shù)對(duì)所述初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象，包括：

4.根據(jù)權(quán)利要求3所述的漸變色背景渲染方法，其特征在于，所述根據(jù)所述視覺效果參數(shù)確定各個(gè)視覺效果屬性對(duì)應(yīng)的屬性參數(shù)值，包括：

5.根據(jù)權(quán)利要求1所述的漸變色背景渲染方法，其特征在于，所述對(duì)所述渲染對(duì)象進(jìn)行插槽檢測(cè)，包括：

6.根據(jù)權(quán)利要求1所述的漸變色背景渲染方法，其特征在于，所述將所述插槽內(nèi)容渲染至所述目標(biāo)樣式對(duì)象中，包括：

7.一種漸變色背景渲染裝置，其特征在于，包括：

8.根據(jù)權(quán)利要求7所述的漸變色背景渲染裝置，其特征在于，所述對(duì)象生成模塊包括：

9.一種存儲(chǔ)介質(zhì)，其特征在于：所述存儲(chǔ)介質(zhì)中存儲(chǔ)有計(jì)算機(jī)可讀指令，所述計(jì)算機(jī)可讀指令被一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得一個(gè)或多個(gè)處理器執(zhí)行如權(quán)利要求1至6中任一項(xiàng)所述漸變色背景渲染方法的步驟。

10.一種計(jì)算機(jī)設(shè)備，其特征在于，包括：一個(gè)或多個(gè)處理器，以及存儲(chǔ)器；

技術(shù)總結(jié)
本申請(qǐng)?zhí)峁┑臐u變色背景渲染方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備，在接收到父組件傳遞的屬性對(duì)象后，獲取屬性對(duì)象中渲染對(duì)象的基礎(chǔ)漸變參數(shù)和視覺效果參數(shù)，然后根據(jù)基礎(chǔ)漸變參數(shù)生成渲染對(duì)象的初始樣式對(duì)象，并基于視覺效果參數(shù)對(duì)初始樣式對(duì)象進(jìn)行樣式調(diào)整，得到目標(biāo)樣式對(duì)象；接著對(duì)渲染對(duì)象進(jìn)行插槽檢測(cè)，并在檢測(cè)到存在插槽內(nèi)容時(shí)，將插槽內(nèi)容渲染至目標(biāo)樣式對(duì)象中，以更新目標(biāo)樣式對(duì)象；最后，將目標(biāo)樣式對(duì)象返回給父組件，以使父組件將目標(biāo)樣式對(duì)象應(yīng)用于渲染對(duì)象中。因此，本申請(qǐng)可以將該漸變色背景渲染方法抽象后封裝為一個(gè)可復(fù)用的組件，并應(yīng)用于父組件中，使得渲染樣式的調(diào)整能夠在單一位置完成，進(jìn)而提高漸變色背景的靈活性和可擴(kuò)展性。

技術(shù)研發(fā)人員：黃燕蕓
受保護(hù)的技術(shù)使用者：創(chuàng)優(yōu)數(shù)字科技（廣東）有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/11/28