鸿蒙HarmonyOS三方件开发指南(8)-RoundedImage

开发 OpenHarmony
文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz

[[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组件,组件的宽和高自定义。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"
  7.     <com.custom.library.RoundedImage 
  8.         ohos:id="$+id:image1" 
  9.         ohos:height="300" 
  10.         ohos:width="300" 
  11.         ohos:top_margin="20vp" 
  12.         ohos:layout_alignment="center"/> 
  13.     <com.custom.library.RoundedImage 
  14.         ohos:id="$+id:image2" 
  15.         ohos:height="400" 
  16.         ohos:width="400" 
  17.         ohos:layout_alignment="center" 
  18.         ohos:top_margin="20vp"/> 
  19.     <com.custom.library.RoundedImage 
  20.         ohos:id="$+id:image3" 
  21.         ohos:height="500" 
  22.         ohos:width="500" 
  23.         ohos:layout_alignment="center" 
  24.         ohos:top_margin="20vp"/> 
  25. </DirectionalLayout> 

 2.3. 修改MainAbilitySlince的UI加载代码

在MainAbilitySlince类的onStart函数中。

增加如下代码可显示圆角矩形:

  1. @Override 
  2. public void onStart(Intent intent) { 
  3.     super.onStart(intent); 
  4.     super.setUIContent(ResourceTable.Layout_ability_main); 
  5.     RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
  6.     roundedImage1.setPixelMapToRoundedRect(ResourceTable.Media_photo, 100, 50, 100, 50); 
  7.     RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
  8.     roundedImage2.setPixelMapToRoundedRect(ResourceTable.Media_photo1, 100, 100, 100, 100); 
  9.     RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
  10.     roundedImage3.setPixelMapToRoundedRect(ResourceTable.Media_photo2, 50, 100, 50, 100); 
  11.     } 

 增加如下代码可显示圆形:

  1. @Override 
  2. public void onStart(Intent intent) { 
  3.     super.onStart(intent); 
  4.     super.setUIContent(ResourceTable.Layout_ability_main); 
  5.     RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
  6.     roundedImage1.setPixelMapToCircleImage(ResourceTable.Media_photo); 
  7.     RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
  8.     roundedImage2.setPixelMapToCircleImage(ResourceTable.Media_photo1); 
  9.     RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
  10.     roundedImage3.setPixelMapToCircleImage(ResourceTable.Media_photo2); 

 增加如下代码可显示椭圆形:

  1. @Override 
  2. public void onStart(Intent intent) { 
  3.     super.onStart(intent); 
  4.     super.setUIContent(ResourceTable.Layout_ability_main); 
  5.     RoundedImage roundedImage1 = (RoundedImage) findComponentById(ResourceTable.Id_image1); 
  6.     roundedImage1.setPixelMapToOvalImage(ResourceTable.Media_photo3); 
  7.     RoundedImage roundedImage2 = (RoundedImage) findComponentById(ResourceTable.Id_image2); 
  8.     roundedImage2.setPixelMapToOvalImage(ResourceTable.Media_photo4); 
  9.     RoundedImage roundedImage3 = (RoundedImage) findComponentById(ResourceTable.Id_image3); 
  10.     roundedImage3.setPixelMapToOvalImage(ResourceTable.Media_photo5); 

 3. RoundedImage开发实现

3.1. 新建一个Module

新建一个Module,类型选择HarmonyOS Library,模块名为library。

3.2. 新建一个RoundedImage类

新建一个RoundedImage类,继承自Image类,实现DrawTask.onDraw接口,代码如下:

用于绘制圆形:

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

 用于绘制椭圆形:

  1. @Override 
  2. public void onDraw(Component component, Canvas canvas) { 
  3.     Paint paint = new Paint(); 
  4.     Shader shader = new PixelMapShader(holder, Shader.TileMode.CLAMP_TILEMODE, Shader.TileMode.CLAMP_TILEMODE); 
  5.     paint.setShader(shader, Paint.ShaderType.SWEEP_SHADER); 
  6.     PixelMap pixelMap = holder.getPixelMap(); 
  7.     int min = Math.min(pixelMap.getImageInfo().size.width, pixelMap.getImageInfo().size.height); 
  8.     int radiusX = Math.min(min, minImageLength); 
  9.     float halfRadiusX = radiusX / 2f; 
  10.     float quarterRadiusX = radiusX / 4f; 
  11.     float left = getWidth() / 2f - halfRadiusX; 
  12.     float right = getWidth() / 2f + halfRadiusX; 
  13.     float top = getHeight() / 2f - quarterRadiusX; 
  14.     float bottom = getHeight() / 2f + quarterRadiusX; 
  15.     RectFloat rect = new RectFloat(lefttopright, bottom); 
  16.     canvas.drawOval(rect, paint); 

 用于设置圆角矩形,调用Image方法进行设置:

  1. 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

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-02-24 15:22:47

鸿蒙HarmonyOS应用开发

2021-03-01 09:48:24

鸿蒙HarmonyOS应用开发

2021-04-16 09:28:18

鸿蒙HarmonyOS应用

2021-01-13 09:40:31

鸿蒙HarmonyOS开发

2021-01-12 12:04:40

鸿蒙HarmonyOS应用开发

2021-01-20 09:54:56

鸿蒙HarmonyOS开发

2021-01-21 13:21:18

鸿蒙HarmonyOSPhotoview组件

2021-06-28 14:48:03

鸿蒙HarmonyOS应用

2021-01-18 09:52:20

鸿蒙HarmonyOS开发

2021-02-26 14:15:27

鸿蒙HarmonyOS应用开发

2021-02-04 09:45:19

鸿蒙HarmonyOS应用开发

2021-03-01 14:01:41

鸿蒙HarmonyOS应用开发

2021-01-22 17:33:03

鸿蒙HarmonyOS应用开发

2021-04-12 09:36:54

鸿蒙HarmonyOS应用

2021-03-31 09:50:25

鸿蒙HarmonyOS应用开发

2021-05-12 15:17:39

鸿蒙HarmonyOS应用

2021-03-19 17:42:01

鸿蒙HarmonyOS应用开发

2021-04-20 09:42:20

鸿蒙HarmonyOS应用开发

2021-03-10 15:03:40

鸿蒙HarmonyOS应用

2021-06-21 15:21:52

鸿蒙HarmonyOS应用开发
点赞
收藏

51CTO技术栈公众号