HarmonyOS App开发造轮子--自定义圆形图片

2024-06-06 03:12
文章标签 自定义 app 开发 图片 圆形 harmonyos 轮子

本文主要是介绍HarmonyOS App开发造轮子--自定义圆形图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路：

1、对比之前自己在其他程序开发中自定义组件的思路，首先寻找父组件Image和Component相关的Api，看看是否具备OnDraw方法。

2、了解Canvas相关Api操作，特别是涉及到位图的操作。

通过翻阅大量资料，发现了两个关键的api，分别是Component的addDrawTask方法和其内部静态接口DrawTask

#2020征文-手机# HarmonyOS App开发造轮子--自定义圆形图片组件-鸿蒙开发者社区

#2020征文-手机# HarmonyOS App开发造轮子--自定义圆形图片组件-鸿蒙开发者社区

三、自定义组件模块

1、新建一个工程之后，创建一个独立的Java FA模块，然后删除掉里面所有布局以及自动生成的java代码，然后自己创建一个class继承ImageView

2、写一个类继承ImageView，在其中暴露出public的设置圆形图片的api方法以供后面调用；

3、在原有的Image组件获取到位图之后，利用该位图数据利用addDrawTask方法配合Canvas进行位图输出形状的重新绘制，这里需要使用Canvas的一个

关键api方法drawPixelMapHolderRoundRectShape；

4、注意，为了让Canvas最后输出的图片为圆形，需要将图片在布局中的宽度和高度设置成一样，否则输出的为圆角矩形或者椭圆形。

最后封装后的详细代码如下：

package com.xdw.customview;import ohos.agp.components.AttrSet;
import ohos.agp.components.Image;
import ohos.agp.render.PixelMapHolder;
import ohos.agp.utils.RectFloat;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.media.image.ImageSource;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Rect;
import ohos.media.image.common.Size;import java.io.InputStream;/*** Created by 夏德旺 on 2021/1/1 11:00*/
public class RoundImage extends Image {private static final HiLogLabel LABEL = new HiLogLabel(HiLog.DEBUG, 0, "RoundImage");private PixelMapHolder pixelMapHolder;//像素图片持有者private RectFloat rectDst;//目标区域private RectFloat rectSrc;//源区域public RoundImage(Context context) {this(context,null);}public RoundImage(Context context, AttrSet attrSet) {this(context,attrSet,null);}/*** 加载包含该控件的xml布局，会执行该构造函数* @param context* @param attrSet* @param styleName*/public RoundImage(Context context, AttrSet attrSet, String styleName) {super(context, attrSet, styleName);HiLog.error(LABEL,"RoundImage");}public void onRoundRectDraw(int radius){//添加绘制任务this.addDrawTask((view, canvas) -> {if (pixelMapHolder == null){return;}synchronized (pixelMapHolder) {//给目标区域赋值，宽度和高度取自xml配置文件中的属性rectDst = new RectFloat(0,0,getWidth(),getHeight());//绘制圆角图片canvas.drawPixelMapHolderRoundRectShape(pixelMapHolder, rectSrc, rectDst, radius, radius);pixelMapHolder = null;}});}//使用canvas绘制圆形private void onCircleDraw(){//添加绘制任务，自定义组件的核心api调用，该接口的参数为Component下的DrawTask接口this.addDrawTask((view, canvas) -> {if (pixelMapHolder == null){return;}synchronized (pixelMapHolder) {//给目标区域赋值，宽度和高度取自xml配置文件中的属性rectDst = new RectFloat(0,0,getWidth(),getHeight());//使用canvas绘制输出圆角矩形的位图，该方法第4个参数和第5个参数为radios参数，// 绘制图片，必须把图片的宽度和高度先设置成一样，然后把它们设置为图片宽度或者高度一半时则绘制的为圆形canvas.drawPixelMapHolderRoundRectShape(pixelMapHolder, rectSrc, rectDst, getWidth()/2, getHeight()/2);pixelMapHolder = null;}});}/***获取原有Image中的位图资源后重新检验绘制该组件* @param pixelMap*/private void putPixelMap(PixelMap pixelMap){if (pixelMap != null) {rectSrc = new RectFloat(0, 0, pixelMap.getImageInfo().size.width, pixelMap.getImageInfo().size.height);pixelMapHolder = new PixelMapHolder(pixelMap);invalidate();//重新检验该组件}else{pixelMapHolder = null;setPixelMap(null);}}/*** 通过资源ID获取位图对象**/private PixelMap getPixelMap(int resId) {InputStream drawableInputStream = null;try {drawableInputStream = getResourceManager().getResource(resId);ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();sourceOptions.formatHint = "image/png";ImageSource imageSource = ImageSource.create(drawableInputStream, null);ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();decodingOptions.desiredSize = new Size(0, 0);decodingOptions.desiredRegion = new Rect(0, 0, 0, 0);decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;PixelMap pixelMap = imageSource.createPixelmap(decodingOptions);return pixelMap;} catch (Exception e) {e.printStackTrace();} finally {try{if (drawableInputStream != null){drawableInputStream.close();}}catch (Exception e) {e.printStackTrace();}}return null;}/*** 对外调用的api，设置圆形图片方法* @param resId*/public void setPixelMapAndCircle(int resId){PixelMap pixelMap = getPixelMap(resId);putPixelMap(pixelMap);onCircleDraw();}/*** 对外调用的api，设置圆角图片方法* @param resId* @param radius*/public void setPixelMapAndRoundRect(int resId,int radius){PixelMap pixelMap = getPixelMap(resId);putPixelMap(pixelMap);onRoundRectDraw(radius);}
}

5、修改config.json文件，代码如下

{"app": {"bundleName": "com.xdw.customview","vendor": "xdw","version": {"code": 1,"name": "1.0"},"apiVersion": {"compatible": 4,"target": 4,"releaseType": "Beta1"}},"deviceConfig": {},"module": {"package": "com.xdw.customview","deviceType": ["phone","tv","tablet","car","wearable"],"reqPermissions": [{"name": "ohos.permission.INTERNET"}],"distro": {"deliveryWithInstall": true,"moduleName": "roundimage","moduleType": "har"}}
}

这样该模块就可以导出后续给其他所有工程引用了，后面还可以编译之后发布到gradle上直接通过添加依赖来进行使用（这个是后话），下面我们先通过本地依赖导入的方式来调用这个自定义组件模块吧。

四、其他工程调用该自定义组件并测试效果

1、再来新建一个工程，然后将之前的模块导入到新建的工程中（DevEco暂时不支持自动导入外部模块的操作，需要手动导入操作，请关注我的另外一篇博客）

2、在gradle中引用导入的模块的组件，代码如下：

dependencies {entryImplementation project(':entry')implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])testCompile'junit:junit:4.12'
}

3、在布局中引用自定义的圆形图片，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Textohos:id="$+id:text_helloworld"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="Hello World"ohos:text_size="50"/><com.xdw.customview.RoundImageohos:id="$+id:image"ohos:height="200vp"ohos:width="200vp"/>
</DirectionalLayout>

4、在Java代码中进行调用，代码如下：

package com.example.testcustomview.slice;import com.example.testcustomview.ResourceTable;
import com.xdw.customview.RoundImage;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);RoundImage roundImage = (RoundImage) findComponentById(ResourceTable.Id_image);roundImage.setPixelMapAndCircle(ResourceTable.Media_man);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

5、开启手机模拟器进行测试，效果如下

#2020征文-手机# HarmonyOS App开发造轮子--自定义圆形图片组件-鸿蒙开发者社区

最后

如果你想快速提升鸿蒙技术，那么可以直接领取这份包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

2.大厂面试必问面试题

3.鸿蒙南向开发技术

 4.鸿蒙APP开发必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料免费领取（安全链接，放心点击）

这篇关于HarmonyOS App开发造轮子--自定义圆形图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1034933。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2