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

2024-06-06 03:12

本文主要是介绍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

相关文章

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图