[[380586]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

1. RoundedImage組件功能介紹

1.1. 功能介紹：

RoundedImage組件可以將圖片顯示成圓形，橢圓形，圓角矩形，目前僅支持上述三種樣式顯示。

1.2. 模擬器上運行效果：

2. RoundedImage使用方法

2.1. 新建工程，增加組件Har包依賴

在應用模塊中添加HAR，只需要將library-debug.har復制到entry\libs目錄下即可(由于build.gradle中已經依賴的libs目錄下的*.har，因此不需要再做修改)。

2.2. 修改主頁面的布局文件

修改主頁面的布局文件ability_main.xml，增加com.custom.library.RoundedImage組件，組件的寬和高自定義。

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:orientation="vertical"> 
    <com.custom.library.RoundedImage 
        ohos:id="$+id:image1" 
        ohos:height="300" 
        ohos:width="300" 
        ohos:top_margin="20vp" 
        ohos:layout_alignment="center"/> 
    <com.custom.library.RoundedImage 
        ohos:id="$+id:image2" 
        ohos:height="400" 
        ohos:width="400" 
        ohos:layout_alignment="center" 
        ohos:top_margin="20vp"/> 
    <com.custom.library.RoundedImage 
        ohos:id="$+id:image3" 
        ohos:height="500" 
        ohos:width="500" 
        ohos:layout_alignment="center" 
        ohos:top_margin="20vp"/> 
</DirectionalLayout> 

 2.3. 修改MainAbilitySlince的UI加載代碼

在MainAbilitySlince類的onStart函數中。

增加如下代碼可顯示圓角矩形：

@Override 
public void onStart(Intent intent) { 
    super.onStart(intent); 
    super.setUIContent(ResourceTable.Layout_ability_main); 
    RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
    roundedImage1.setPixelMapToRoundedRect(ResourceTable.Media_photo, 100, 50, 100, 50); 
    RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
    roundedImage2.setPixelMapToRoundedRect(ResourceTable.Media_photo1, 100, 100, 100, 100); 
    RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
    roundedImage3.setPixelMapToRoundedRect(ResourceTable.Media_photo2, 50, 100, 50, 100); 
    } 

 增加如下代碼可顯示圓形：

@Override 
public void onStart(Intent intent) { 
    super.onStart(intent); 
    super.setUIContent(ResourceTable.Layout_ability_main); 
    RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
    roundedImage1.setPixelMapToCircleImage(ResourceTable.Media_photo); 
    RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
    roundedImage2.setPixelMapToCircleImage(ResourceTable.Media_photo1); 
    RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
    roundedImage3.setPixelMapToCircleImage(ResourceTable.Media_photo2); 
} 

 增加如下代碼可顯示橢圓形：

@Override 
public void onStart(Intent intent) { 
    super.onStart(intent); 
    super.setUIContent(ResourceTable.Layout_ability_main); 
    RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
    roundedImage1.setPixelMapToOvalImage(ResourceTable.Media_photo3); 
    RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
    roundedImage2.setPixelMapToOvalImage(ResourceTable.Media_photo4); 
    RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
    roundedImage3.setPixelMapToOvalImage(ResourceTable.Media_photo5); 
} 

 3. RoundedImage開發實現

3.1. 新建一個Module

新建一個Module，類型選擇HarmonyOS Library，模塊名為library。

3.2. 新建一個RoundedImage類

新建一個RoundedImage類，繼承自Image類，實現DrawTask.onDraw接口，代碼如下：

用于繪制圓形：

@Override 
public void onDraw(Component component, Canvas canvas) { 
    float centerX = getWidth() / 2f; 
    float centerY = getHeight() / 2f; 
    float radius = Math.min(centerX, centerY); 
    Paint paint = new Paint(); 
    Shader shader = new PixelMapShader(holder, Shader.TileMode.CLAMP_TILEMODE, Shader.TileMode.CLAMP_TILEMODE); 
    paint.setShader(shader, Paint.ShaderType.SWEEP_SHADER); 
    canvas.drawCircle(centerX, centerY, radius, paint); 
} 

 用于繪制橢圓形：

@Override 
public void onDraw(Component component, Canvas canvas) { 
    Paint paint = new Paint(); 
    Shader shader = new PixelMapShader(holder, Shader.TileMode.CLAMP_TILEMODE, Shader.TileMode.CLAMP_TILEMODE); 
    paint.setShader(shader, Paint.ShaderType.SWEEP_SHADER); 
    PixelMap pixelMap = holder.getPixelMap(); 
    int min = Math.min(pixelMap.getImageInfo().size.width, pixelMap.getImageInfo().size.height); 
    int radiusX = Math.min(min, minImageLength); 
    float halfRadiusX = radiusX / 2f; 
    float quarterRadiusX = radiusX / 4f; 
    float left = getWidth() / 2f - halfRadiusX; 
    float right = getWidth() / 2f + halfRadiusX; 
    float top = getHeight() / 2f - quarterRadiusX; 
    float bottom = getHeight() / 2f + quarterRadiusX; 
    RectFloat rect = new RectFloat(left, top, right, bottom); 
    canvas.drawOval(rect, paint); 
} 

 用于設置圓角矩形，調用Image方法進行設置：

setCornerRadii(new float[]{topLeft, topLeft, topRigth, topRigth, bottomRight, bottomRight, bottomLeft, bottomLeft}); 

3.3. 編譯HAR包

利用Gradle可以將HarmonyOS Library庫模塊構建為HAR包，構建HAR包的方法如下：

在Gradle構建任務中，雙擊PackageDebugHar或PackageReleaseHar任務，構建Debug類型或Release類型的HAR。

待構建任務完成后，可以在loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。

項目源代碼地址：https://github.com/isoftstone-dev/RoundedImage_HarmonyOS

歡迎交流：HWIS-HOS@isoftstone.com

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任。

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz