[文章]

【软通动力】HarmonyOS三方件开发指南(8)——RoundedImage

2021-4-12 09:51:58  194 HarmonyOS 三方件
分享
1
1. RoundedImage组件功能介绍
1.1. 功能介绍:
        RoundedImage组件可以将图片显示成圆形,椭圆形,圆角矩形,目前仅支持上述三种样式显示。
1.2. 模拟器上运行效果:
1.png
2.png
3.png
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);
  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.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);
  11. }
复制代码
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);
  10. }
复制代码
用于绘制椭圆形:
  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(left, top, right, bottom);
  16.     canvas.drawOval(rect, paint);
  17. }
复制代码
用于设置圆角矩形,调用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
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任

相关文章

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章
快速回复
扫一扫分享
返回顶部 返回列表