日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HarmonyOS JS UI 自定義icon組件

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)建站始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都辦公窗簾等企業(yè)，備受客戶稱贊。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

背景及簡介

在HarmonyOS JS UI官方提供的組件中沒有圖標(biāo)組件，要使用圖標(biāo)的話需要使用image組件引入圖片資源，如果圖標(biāo)狀態(tài)或者樣式需要改變時，就需要使用另一張圖片來替換，操作起來比較麻煩。移動端使用圖標(biāo)的場景會比較多，如果全部使用圖片來實(shí)現(xiàn)效果，會增加很多圖片資源引用，對于代碼開發(fā)也會有很多的不便，在此背景下想能實(shí)現(xiàn)一個圖標(biāo)的組件，能夠自定義樣式便于修改和引用，也能動態(tài)的切換圖標(biāo)樣式。

此項目使用官方的 badge 組件和 canvas 組件來實(shí)現(xiàn)圖標(biāo)的繪制，通過封裝自定義組件，可以對組件大小、樣式、背景、角標(biāo)、禁用等屬性進(jìn)行配置，從而實(shí)現(xiàn)圖標(biāo)的繪制，此自定義組件完全使用代碼實(shí)現(xiàn)，沒有引用任何外部資源或文件，可以很方便的被各種項目引用。

項目介紹

  • 項目名稱：OpenHarmony-JS-Icon
  • 項目源地址：https://gitee.com/chenqiao002/open-harmony-js-icon
  • 所屬系列：OpenHarmony下的的JS 自定義組件開發(fā)示例
  • 開發(fā)版本：OpenHarmony-SDK-6，DevEco Studio 2.2.0.200
  • 項目作者和維護(hù)人：陳喬
  • 郵箱：chenqiao002@chinasoftinc.com
  • 本示例基于OpenHarmony下的JavaScript UI框架，通過使用常用組件、畫布組件和自定義組件等來實(shí)現(xiàn)一個自定義的icon組件，通過本示例可以基本了解和使用該組件。
  • 本項目是基于OpenHarmony項目而不是HarmonyOS項目，請注意運(yùn)行環(huán)境。
  • 請參考OpenHarmony項目配置方法進(jìn)行項目配置和運(yùn)行。
  • 如果你不熟悉OpenHarmony的JS開發(fā)，請參考該項目的開發(fā)講解。

文件目錄

在Pages目錄下，只有一個index首頁，在首頁中展示了icon自定義組件的使用樣例。

在common文件夾下的icon文件夾是自定義的icon組件，在icon文件夾中js文件夾是icon繪制使用到的方法和數(shù)據(jù)。

使用說明

項目預(yù)覽

下載OpenHarmony-JS-Icon項目，啟動 DevEco Studio并打開工程。

進(jìn)入entry->src->main->js->default->pages->index，打開index.hml點(diǎn)擊Previewer進(jìn)行預(yù)覽。

引入

在index.hml的第一行，引用自定義組件，這里我們將name屬性設(shè)置為icon。

 
 
 
 
      
  
  
  
  1.  
    2.

基礎(chǔ)用法

通過設(shè)置icon組件的name屬性來展示不同的圖標(biāo)。

 
 
 
 
      
  
  
  
  1.  
    2.

角標(biāo)提示

通過設(shè)置icon組件的badge-config屬性來對角標(biāo)信息進(jìn)行設(shè)置。

 
 
 
 
      
  
  
  
  1.  
    2.  
 
 

 
 
 
 
      
  
  
  
  1. badgeConfig: { 
    2.   
  
  
  
  2.     config: { 
    3.   
  
  
  
  3.         badgeColor: "#0a59f7", 
    4.   
  
  
  
  4.         textColor: "#ffffff", 
    5.   
  
  
  
  5.     }, 
    6.   
  
  
  
  6.     count: 0, 
    7.   
  
  
  
  7.     visible: true, 
    8.   
  
  
  
  8. }, 
    9.

圖標(biāo)顏色和背景顏色

通過設(shè)置icon組件的color屬性來設(shè)置，background-color可以設(shè)置圖標(biāo)的背景顏色。

 
 
 
 
      
  
  
  
  1.  
    2.

圖標(biāo)大小

通過設(shè)置icon組件的size屬性來控制圖標(biāo)的大小。

 
 
 
 
      
  
  
  
  1.  
    2.

圖標(biāo)禁用

通過設(shè)置icon組件的disabled屬性控制圖標(biāo)是否禁用，disabled默認(rèn)為false，禁用狀態(tài)設(shè)置為true時圖標(biāo)為灰色，color和badge-config屬性只有在disabled為false時生效。

 
 
 
 
      
  
  
  
  1.  
    2.

圖片繪制

通過設(shè)置icon組件的name屬性設(shè)置為圖片的地址。

 
 
 
 
      
  
  
  
  1.  
    2.

API

props

代碼示例：

 
 
 
 
      
  
  
  
  1. export default { 
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.     props: { 
    4.   
  
  
  
  4.     // icon 名稱 
    5.   
  
  
  
  5.         name: { 
    6.   
  
  
  
  6.             default: '' 
    7.   
  
  
  
  7.         }, 
    8.   
  
  
  
  8.     // icon 樣式前綴 
    9.   
  
  
  
  9.         classPrefix: { 
    10.   
  
  
  
  10.             default: 'hos-icon' 
    11.   
  
  
  
  11.         }, 
    12.   
  
  
  
  12.     // icon 尺寸 
    13.   
  
  
  
  13.         size: { 
    14.   
  
  
  
  14.             default: 24, 
    15.   
  
  
  
  15.         }, 
    16.   
  
  
  
  16.     // icon 顏色 
    17.   
  
  
  
  17.         color: { 
    18.   
  
  
  
  18.             default: "#333333" 
    19.   
  
  
  
  19.         }, 
    20.   
  
  
  
  20.     // icon 背景顏色 
    21.   
  
  
  
  21.         backgroundColor: { 
    22.   
  
  
  
  22.             default: "#ffffff" 
    23.   
  
  
  
  23.         }, 
    24.   
  
  
  
  24.     // 角標(biāo)配置 
    25.   
  
  
  
  25.         badgeConfig: { 
    26.   
  
  
  
  26.             default: { 
    27.   
  
  
  
  27.                 config: { 
    28.   
  
  
  
  28.                     badgeColor: "#0a59f7", 
    29.   
  
  
  
  29.                     textColor: "#ffffff", 
    30.   
  
  
  
  30.                 }, 
    31.   
  
  
  
  31.                 placement: "rightTop", 
    32.   
  
  
  
  32.                 count: 0, 
    33.   
  
  
  
  33.                 maxcount: 99, 
    34.   
  
  
  
  34.                 visible: false, 
    35.   
  
  
  
  35.                 label: "", 
    36.   
  
  
  
  36.             } 
    37.   
  
  
  
  37.         }, 
    38.   
  
  
  
  38.     // icon 圖標(biāo)禁用 
    39.   
  
  
  
  39.         disabled: { 
    40.   
  
  
  
  40.             default: false 
    41.   
  
  
  
  41.         }, 
    42.   
  
  
  
  42.     // icon 點(diǎn)擊方法攜帶的參數(shù) 
    43.   
  
  
  
  43.         dataClick: { 
    44.   
  
  
  
  44.             default: null 
    45.   
  
  
  
  45.         } 
    46.   
  
  
  
  46.     } 
    47.   
  
  
  
  47. } 
    48.

Events

代碼示例：

hml文件，icon組件綁定點(diǎn)擊事件和綁定點(diǎn)擊實(shí)現(xiàn)參數(shù)：

 
 
 
 
      
  
  
  
  1.  
    2.

js文件，在iconClick方法上接收參數(shù)的detail屬性為綁定的數(shù)據(jù)：

 
 
 
 
      
  
  
  
  1. iconClick(data) { 
    2.   
  
  
  
  2.     console.log("iconClick"); 
    3.   
  
  
  
  3.     console.log(data.detail); 
    4.   
  
  
  
  4. } 
    5.

執(zhí)行結(jié)果：

繪制原理

所有的圖標(biāo)繪制均是基于HarmonyOS JS API 畫布組件 來實(shí)現(xiàn)的，根據(jù)官方提供的繪制方法自定義封裝繪制圖形，基本實(shí)現(xiàn)了以下幾種基礎(chǔ)圖形繪制的封裝。

繪制直線

直線的繪制主要用到了lineTo(x,y)方法，下面示例中的 ctx.beginPath() 是創(chuàng)建一個新的繪制路徑，ctx.moveTo(10, 10) 是當(dāng)前路徑起始點(diǎn)移動到指定點(diǎn)，ctx.lineTo(280, 160)則是繪制直線到終止點(diǎn)，ctx.stroke()是進(jìn)行邊框繪制操作，每次畫布繪制都是一條透明的路徑，沒有stroke的話是不會顯示繪制的路徑的;

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.beginPath(); 
    2.   
  
  
  
  2. ctx.moveTo(10, 10); 
    3.   
  
  
  
  3. ctx.lineTo(280, 160); 
    4.   
  
  
  
  4. ctx.stroke(); 
    5.

繪制圓弧

繪制圓弧有兩個api，arc() 和 arcTo() ，其中我們主要看看arc(x,y,radius,startAngle,endAngle,anticlockwise)方法是如何繪制圓弧的。

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.beginPath(); 
    2.   
  
  
  
  2. ctx.arc(100, 75, 50, 0, 6.28); 
    3.   
  
  
  
  3. ctx.stroke(); 
    4.

繪制橢圓弧

繪制橢圓弧使用 ellipse() ，下面示例中繪制了一段橢圓弧，但是在實(shí)際操作中我發(fā)現(xiàn)，如果是繪制一個完整的橢圓，startAngle設(shè)置為Math.PI * 0，endAngle設(shè)置為Math.PI * 2 并不能繪制一個完整的橢圓，畫布上什么也沒畫，在此我是使用一個中間角度然后調(diào)用兩次ellipse()方法才得到一個完整的圓弧，不知道有沒有大佬遇到過相同的問題或者知道根本原因能交流一下。

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.beginPath(); 
    2.   
  
  
  
  2. ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); 
    3.   
  
  
  
  3. ctx.stroke(); 
    4.

繪制矩形

官方繪制矩形使用rect()方法，此方法功能比較單一，一般我們在使用矩形的時候可能會有圓角的需求，在此項目中并沒有使用到官方的方法繪制，而是使用lineTo()直線和arc()圓弧兩個api封裝的一個可以繪制帶圓角的矩形，詳情可以查看源碼封裝

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) 
    2.   
  
  
  
  2. ctx.stroke(); // Draw it 
    3.

繪制三次貝賽爾曲線

三次貝賽爾曲線的繪制主要用到了bezierCurveTo()

參數(shù)：

 
 
 
 
      
  
  
  
  1. ctx.beginPath(); 
    2.   
  
  
  
  2. ctx.moveTo(20, 20); 
    3.   
  
  
  
  3. ctx.quadraticCurveTo(100, 100, 200, 20); 
    4.   
  
  
  
  4. ctx.stroke(); 
    5.

繪制二次貝賽爾曲線

二次貝賽爾曲線的繪制主要用到了quadraticCurveTo() ，其實(shí)不管是三次的還是二次的都是使用額外的控制點(diǎn)來控制線條的走向，線條繪制用到了高階數(shù)學(xué)中的函數(shù)求導(dǎo)的方式來計算，因此控制點(diǎn)的具體值不能很快速的能得到精確的結(jié)果，只有不斷的使用和反復(fù)的嘗試才能熟練掌握控制點(diǎn)的設(shè)置。

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.beginPath(); 
    2.   
  
  
  
  2. ctx.moveTo(20, 20); 
    3.   
  
  
  
  3. ctx.quadraticCurveTo(100, 100, 200, 20); 
    4.   
  
  
  
  4. ctx.stroke(); 
    5.

繪制圖片

繪制圖片會使用到 drawImage() ，單純的繪制圖片其實(shí)意義不大，因?yàn)橛衖mage組件，這個功能主要作用是能對圖片在前端進(jìn)行裁剪，而不需要使用到后臺服務(wù)來操作。

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. var test = this.$element('drawImage'); 
    2.   
  
  
  
  2. var ctx = test.getContext('2d'); 
    3.   
  
  
  
  3. var img = new Image(); 
    4.   
  
  
  
  4. img.src = 'common/image/test.jpg'; 
    5.   
  
  
  
  5. ctx.drawImage(img, 50, 80, 80, 80); 
    6.

繪制文字

文字繪制使用fillText()方法，其中ctx.font主要是對文字的樣式、大小，粗細(xì)，字體系列等進(jìn)行設(shè)置。

參數(shù)：

示例：

 
 
 
 
      
  
  
  
  1. ctx.font = '35px sans-serif'; 
    2.   
  
  
  
  2. ctx.fillText("Hello World!", 20, 60); 
    3.

以上就是本項目主要使用到的幾種api，為了便于圖標(biāo)數(shù)據(jù)結(jié)構(gòu)的清晰配置，所有的api都經(jīng)過了二次封裝，數(shù)據(jù)結(jié)構(gòu)和封裝結(jié)果可以查看項目源碼。

注意事項

  1. 可以使用角標(biāo)，使用時需將所有的badge屬性作為一個對象用badge-config名稱傳入，這個用法參考了官方badge組件。
  2. 可以繪制圖片，在name屬性上設(shè)置圖片路徑，路徑必須是絕對路徑或者云路徑，不能使用"./“或者”…/"等開頭的相對路徑，而且圖片尺寸需和icon的size值一樣，不然可能會導(dǎo)致繪制不完整，官方有image組件，這個功能有點(diǎn)雞肋。
  3. 雖然圖標(biāo)顏色可以設(shè)置透明色，但是不建議設(shè)置透明色，透明色可能會導(dǎo)致部分圖標(biāo)繪制的效果與預(yù)期相差較大。
  4. 圖標(biāo)的形式參考了市面上主流的圖標(biāo)形式，全部的圖標(biāo)繪制均為canvas繪制，無任何代碼參考，使用的api均為鴻蒙JS UI官方api。
  5. 圖標(biāo)繪制使用的是canvas，雖然在一些特別細(xì)節(jié)的地方可能還比不上矢量圖標(biāo)清晰度，但是此庫理論上可以實(shí)現(xiàn)任意圖標(biāo)，大家有需求或者有新的圖標(biāo)需要繪制的請評論留言，謝謝。
  6. 目前圖標(biāo)已繪制了230+，已基本完成計劃實(shí)現(xiàn)的圖標(biāo)，還會繼續(xù)更新，敬請關(guān)注。
  7. 此項目使用canvas繪制圖標(biāo)，其實(shí)圖標(biāo)可以參考自定義字體樣式來實(shí)現(xiàn)字體圖標(biāo)，相對來說字體圖標(biāo)文件更小、圖標(biāo)更清晰、也更利于更新管理，有需要的可以看看Vant Openharmony

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.


文章名稱：HarmonyOS JS UI 自定義icon組件
鏈接URL：http://www.dlmjj.cn/article/dpicehe.html