鴻蒙HarmonyOS三方件開發指南（8）-RoundedImage
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技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任。
https://harmonyos.51cto.com/#zz
