鸿蒙HarmonyOS三方件开发指南（8）-RoundedImage

想了解更多内容，请访问：

浉河网站建设公司创新互联建站,浉河网站设计制作，有大型网站制作公司丰富经验。已为浉河上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的浉河做网站的公司定做！

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#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.  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4. 
  
  
  
  
  4.     ohos:height="match_parent" 
    5. 
  
  
  
  
  5.     ohos:width="match_parent" 
    6. 
  
  
  
  
  6.     ohos:orientation="vertical"> 
    7. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:id="$+id:image1" 
    9. 
  
  
  
  
  9.         ohos:height="300" 
    10. 
  
  
  
  
  10.         ohos:width="300" 
    11. 
  
  
  
  
  11.         ohos:top_margin="20vp" 
    12. 
  
  
  
  
  12.         ohos:layout_alignment="center"/> 
    13. 
  
  
  
  
  13.     
  
  
  
  
  14.         ohos:id="$+id:image2" 
    15. 
  
  
  
  
  15.         ohos:height="400" 
    16. 
  
  
  
  
  16.         ohos:width="400" 
    17. 
  
  
  
  
  17.         ohos:layout_alignment="center" 
    18. 
  
  
  
  
  18.         ohos:top_margin="20vp"/> 
    19. 
  
  
  
  
  19.     
  
  
  
  
  20.         ohos:id="$+id:image3" 
    21. 
  
  
  
  
  21.         ohos:height="500" 
    22. 
  
  
  
  
  22.         ohos:width="500" 
    23. 
  
  
  
  
  23.         ohos:layout_alignment="center" 
    24. 
  
  
  
  
  24.         ohos:top_margin="20vp"/> 
    25. 
  
  
  
  
  25.  
    26.

 2.3. 修改MainAbilitySlince的UI加载代码

在MainAbilitySlince类的onStart函数中。

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

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

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

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

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

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

 3. RoundedImage开发实现

3.1. 新建一个Module

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

3.2. 新建一个RoundedImage类

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

用于绘制圆形：

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

 用于绘制椭圆形：

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

 用于设置圆角矩形，调用Image方法进行设置：

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

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./#zz

本文题目：鸿蒙HarmonyOS三方件开发指南（8）-RoundedImage
分享地址：http://www.shufengxianlan.com/qtweb/news30/264080.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

Google知识

分类信息网站

手机微信网站　　 　h5页面制作　　 　建站公司　　 　盐亭网站制作公司　　 　成都微商城　　 　定制级高端网站建设　　 　抖音代运营　　 　成都名片印刷　　 　乐山托管服务器　　 　四川雅安服务器托管　　 　西云服务器托管　　 　四川电信机房托管　　 　南充做网站　　 　江油做网站　　 　成都网站推广　　 　企业网站设计　　 　丹棱网站建设　　 　橡塑保温板　　 　郫县明安消防器材　　 　成都企业网站制作