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实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O