f SQL-Server-鸿蒙Harmony开发实战：自定义圆形组件-Canvas - Powered by qidao123.com技术社区

鸿蒙Harmony开发实战：自定义圆形组件-Canvas

慢吞云雾缓吐愁  论坛元老 | 2024-9-2 14:23:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1732|帖子 1732|积分 5196

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
在接纳Java共同xml结构编写鸿蒙app页面的时间，发现sdk自带的Image组件并不能将图片设置成圆形，反复了翻阅了官方API手册（紧张查阅了Compont和Image相关的API），早先发现了一个setCornerRadius方法，于是想着将图片宽度和高度设置为一样，然后调用该方法将radios设置为宽度大概高度的一半，以为可以实现圆形图片的效果，厥后发现不行。于是乎想着能不能通过继承原有的Image自己来动手重新自定义一个支持圆形的图片组件。
二、思路：
1、对比之前自己在其他程序开发中自定义组件的思路，起首探求父组件Image和Component相关的Api，看看是否具备OnDraw方法。
2、了解Canvas相关Api利用，特殊是涉及到位图的利用。
通过翻阅大量资料，发现了两个关键的api，分别是Component的addDrawTask方法和其内部静态接口DrawTask

三、自定义组件模块
1、新建一个工程之后，创建一个独立的Java FA模块，然后删撤除内里全部结构以及自动生成的java代码，然后自己创建一个class继承ImageView
2、写一个类继承ImageView，在其中暴暴露public的设置圆形图片的api方法以供后面调用；
3、在原有的Image组件获取到位图之后，利用该位图数据利用addDrawTask方法共同Canvas进行位图输出形状的重新绘制，这里必要使用Canvas的一个
关键api方法drawPixelMapHolderRoundRectShape；
4、留意，为了让Canvas末了输出的图片为圆形，必要将图片在结构中的宽度和高度设置成一样，否则输出的为圆角矩形大概椭圆形。
末了封装后的详细代码如下：
  1. package com.xdw.customview;
  3. import ohos.agp.components.AttrSet;
  4. import ohos.agp.components.Image;
  5. import ohos.agp.render.PixelMapHolder;
  6. import ohos.agp.utils.RectFloat;
  7. import ohos.app.Context;
  8. import ohos.hiviewdfx.HiLog;
  9. import ohos.hiviewdfx.HiLogLabel;
  10. import ohos.media.image.ImageSource;
  11. import ohos.media.image.PixelMap;
  12. import ohos.media.image.common.PixelFormat;
  13. import ohos.media.image.common.Rect;
  14. import ohos.media.image.common.Size;
  16. import java.io.InputStream;
  18. /**
  19. * Created by 夏德旺 on 2021/1/1 11:00
  20. */
  21. public class RoundImage extends Image {
  22.     private static final HiLogLabel LABEL = new HiLogLabel(HiLog.DEBUG, 0, "RoundImage");
  23.     private PixelMapHolder pixelMapHolder;//像素图片持有者
  24.     private RectFloat rectDst;//目标区域
  25.     private RectFloat rectSrc;//源区域
  26.     public RoundImage(Context context) {
  27.         this(context,null);
  29.     }
  31.     public RoundImage(Context context, AttrSet attrSet) {
  32.         this(context,attrSet,null);
  33.     }
  35.     /**
  36.      * 加载包含该控件的xml布局，会执行该构造函数
  37.      * @param context
  38.      * @param attrSet
  39.      * @param styleName
  40.      */
  41.     public RoundImage(Context context, AttrSet attrSet, String styleName) {
  42.         super(context, attrSet, styleName);
  43.         HiLog.error(LABEL,"RoundImage");
  44.     }
  48.     public void onRoundRectDraw(int radius){
  49.         //添加绘制任务
  50.         this.addDrawTask((view, canvas) -> {
  51.             if (pixelMapHolder == null){
  52.                 return;
  53.             }
  54.             synchronized (pixelMapHolder) {
  55.                 //给目标区域赋值，宽度和高度取自xml配置文件中的属性
  56.                 rectDst = new RectFloat(0,0,getWidth(),getHeight());
  57.                 //绘制圆角图片
  58.                 canvas.drawPixelMapHolderRoundRectShape(pixelMapHolder, rectSrc, rectDst, radius, radius);
  59.                 pixelMapHolder = null;
  60.             }
  61.         });
  62.     }
  64.     //使用canvas绘制圆形
  65.     private void onCircleDraw(){
  66.         //添加绘制任务，自定义组件的核心api调用，该接口的参数为Component下的DrawTask接口
  67.         this.addDrawTask((view, canvas) -> {
  68.             if (pixelMapHolder == null){
  69.                 return;
  70.             }
  71.             synchronized (pixelMapHolder) {
  72.                 //给目标区域赋值，宽度和高度取自xml配置文件中的属性
  73.                 rectDst = new RectFloat(0,0,getWidth(),getHeight());
  74.                 //使用canvas绘制输出圆角矩形的位图，该方法第4个参数和第5个参数为radios参数，
  75.                 // 绘制图片，必须把图片的宽度和高度先设置成一样，然后把它们设置为图片宽度或者高度一半时则绘制的为圆形
  76.                 canvas.drawPixelMapHolderRoundRectShape(pixelMapHolder, rectSrc, rectDst, getWidth()/2, getHeight()/2);
  77.                 pixelMapHolder = null;
  78.             }
  79.         });
  80.     }
  83.     /**
  84.      *获取原有Image中的位图资源后重新检验绘制该组件
  85.      * @param pixelMap
  86.      */
  87.     private void putPixelMap(PixelMap pixelMap){
  88.         if (pixelMap != null) {
  89.             rectSrc = new RectFloat(0, 0, pixelMap.getImageInfo().size.width, pixelMap.getImageInfo().size.height);
  90.             pixelMapHolder = new PixelMapHolder(pixelMap);
  91.             invalidate();//重新检验该组件
  92.         }else{
  93.             pixelMapHolder = null;
  94.             setPixelMap(null);
  95.         }
  96.     }
  99.     /**
  100.      * 通过资源ID获取位图对象
  101.      **/
  102.     private PixelMap getPixelMap(int resId) {
  103.         InputStream drawableInputStream = null;
  104.         try {
  105.             drawableInputStream = getResourceManager().getResource(resId);
  106.             ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
  107.             sourceOptions.formatHint = "image/png";
  108.             ImageSource imageSource = ImageSource.create(drawableInputStream, null);
  109.             ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  110.             decodingOptions.desiredSize = new Size(0, 0);
  111.             decodingOptions.desiredRegion = new Rect(0, 0, 0, 0);
  112.             decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;
  113.             PixelMap pixelMap = imageSource.createPixelmap(decodingOptions);
  114.             return pixelMap;
  115.         } catch (Exception e) {
  116.             e.printStackTrace();
  117.         } finally {
  118.             try{
  119.                 if (drawableInputStream != null){
  120.                     drawableInputStream.close();
  121.                 }
  122.             }catch (Exception e) {
  123.                 e.printStackTrace();
  124.             }
  125.         }
  126.         return null;
  127.     }
  129.     /**
  130.      * 对外调用的api，设置圆形图片方法
  131.      * @param resId
  132.      */
  133.     public void setPixelMapAndCircle(int resId){
  134.         PixelMap pixelMap = getPixelMap(resId);
  135.         putPixelMap(pixelMap);
  136.         onCircleDraw();
  137.     }
  139.     /**
  140.      * 对外调用的api，设置圆角图片方法
  141.      * @param resId
  142.      * @param radius
  143.      */
  144.     public void setPixelMapAndRoundRect(int resId,int radius){
  145.         PixelMap pixelMap = getPixelMap(resId);
  146.         putPixelMap(pixelMap);
  147.         onRoundRectDraw(radius);
  148.     }
  149. }
复制代码
5、修改config.json文件，代码如下
  1. {
  2.   "app": {
  3.     "bundleName": "com.xdw.customview",
  4.     "vendor": "xdw",
  5.     "version": {
  6.       "code": 1,
  7.       "name": "1.0"
  8.     },
  9.     "apiVersion": {
  10.       "compatible": 4,
  11.       "target": 4,
  12.       "releaseType": "Beta1"
  13.     }
  14.   },
  15.   "deviceConfig": {},
  16.   "module": {
  17.     "package": "com.xdw.customview",
  18.     "deviceType": [
  19.       "phone",
  20.       "tv",
  21.       "tablet",
  22.       "car",
  23.       "wearable"
  24.     ],
  25.     "reqPermissions": [
  26.       {
  27.         "name": "ohos.permission.INTERNET"
  28.       }
  29.     ],
  30.     "distro": {
  31.       "deliveryWithInstall": true,
  32.       "moduleName": "roundimage",
  33.       "moduleType": "har"
  34.     }
  35.   }
  36. }
复制代码
这样该模块就可以导出后续给其他全部工程引用了，后面还可以编译之后发布到gradle上直接通过添加依赖来进行使用（这个是后话），下面我们先通过当地依赖导入的方式来调用这个自定义组件模块吧。
四、其他工程调用该自定义组件并测试效果
1、再来新建一个工程，然后将之前的模块导入到新建的工程中（DevEco暂时不支持自动导入外部模块的利用，必要手动导入利用，请关注我的另外一篇博客）
2、在gradle中引用导入的模块的组件，代码如下：
  1. dependencies {
  2.     entryImplementation project(':entry')
  3.     implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
  4.     testCompile'junit:junit:4.12'
  5. }
复制代码
3、在结构中引用自定义的圆形图片，代码如下：
  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">
  8.     <Text
  9.         ohos:id="$+id:text_helloworld"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:background_element="$graphic:background_ability_main"
  13.         ohos:layout_alignment="horizontal_center"
  14.         ohos:text="Hello World"
  15.         ohos:text_size="50"
  16.         />
  18.     <com.xdw.customview.RoundImage
  19.         ohos:id="$+id:image"
  20.         ohos:height="200vp"
  21.         ohos:width="200vp"/>
  22. </DirectionalLayout>
复制代码
4、在Java代码中进行调用，代码如下：
  1. package com.example.testcustomview.slice;
  3. import com.example.testcustomview.ResourceTable;
  4. import com.xdw.customview.RoundImage;
  5. import ohos.aafwk.ability.AbilitySlice;
  6. import ohos.aafwk.content.Intent;
  8. public class MainAbilitySlice extends AbilitySlice {
  9.     @Override
  10.     public void onStart(Intent intent) {
  11.         super.onStart(intent);
  12.         super.setUIContent(ResourceTable.Layout_ability_main);
  13.         RoundImage roundImage = (RoundImage) findComponentById(ResourceTable.Id_image);
  14.         roundImage.setPixelMapAndCircle(ResourceTable.Media_man);
  15.     }
  17.     @Override
  18.     public void onActive() {
  19.         super.onActive();
  20.     }
  22.     @Override
  23.     public void onForeground(Intent intent) {
  24.         super.onForeground(intent);
  25.     }
  26. }
复制代码
5、开启手机模仿器进行测试，效果如下


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

慢吞云雾缓吐愁

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表