鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
一、背景
在采用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最后输出的图片为圆形,需要将图片在布局中的宽度和高度设置成一样,否则输出的为圆角矩形或者椭圆形。
最后封装后的详细代码如下:
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);
}
}
到此这篇关于鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的文章就介绍到这了,更多相关鸿蒙HarmonyOS自定义圆形图片组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码相关推荐
- HarmonyOS图片,HarmonyOS App开发造轮子--自定义圆形图片组件
一.背景 在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...
- 华为鸿蒙搭载在m30 吗,华为鸿蒙OS操作系统正式发布 鸿蒙操作系统或将搭载Mate30...
鸿蒙OS将作为华为迎接全场景体验时代到来的产物,发挥其轻量化.小巧.功能强大的优势,率先应用在智能手表.智慧屏.车载设备.智能音箱等智能终端上,华为着力构建一个跨终端的融合共享生态,为消费者打造全场景 ...
- 华为鸿蒙os系统测试,华为鸿蒙OS系统测试结果相继出炉!果然没让花粉们久等:最好的体验...
[5月6日讯]相信大家都知道,华为官方在近期开始大批量推送鸿蒙OS系统,多达十多款华为机型可以升级鸿蒙OS系统2.0 Bate公测版,终于让广大花粉用户们用上了鸿蒙OS系统,在UI界面设计.运行速度等 ...
- HarmonyOS APP开发入门3——组件(四 CommonDialog普通弹框组件 )
HarmonyOS APP开发入门3--组件(四 CommonDialog普通弹框组件 ) 文章目录 HarmonyOS APP开发入门3--组件(四 CommonDialog普通弹框组件 ) Com ...
- Android 自定义 圆环,Android自定义view实现圆环效果实例代码
先上效果图,如果大家感觉不错,请参考实现代码. 重要的是如何实现自定义的view效果 (1)创建类,继承view,重写onDraw和onMesure方法 public class CirclePerc ...
- vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
- JavaScript打造很酷的图片放大效果实例代码
代码简介: 非常酷的一个JavaScript图片放大效果,不信就运行一下试试,相信你会喜欢的. 代码内容: View Code <html><head><title> ...
- python数据写入表格生成图片_python在word文档里插入图片和表格实例代码演示
# -*- coding: UTF8 -*- from docx import Document from docx.shared import Pt doc = Document() # 文件存储路 ...
- 华为HarmonyOS鸿蒙系统介绍,华为鸿蒙OS系统怎么样 华为HarmonyOS鸿蒙系统介绍
华为鸿蒙OS系统怎么样?华为在8月9日的2019华为开发者大会上正式发布了华为HarmonyOS鸿蒙系统,大家知道这个系统具体是用在哪些产品上的吗?有哪些功能呢?能兼容别的系统吗?下面小编为大家带来了 ...
最新文章
- EIRP/ERP(有效辐射功率)基本概念
- PUT or POST
- 【Consul】Consul架构-Gossip协议
- JavaScript + Thymeleaf + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十八)模板脚本
- 购物商城Web开发第二十三天
- 关于变量的命名和属性(C#)
- java实现tcp服务器(单线程、多线程)、客户端
- mongodb导出csv文件到vcf
- JAVA计算机毕业设计大学生二手物品交易网站演示记录2021Mybatis+系统+数据库+调试部署
- oracle+suspend+参数,oracle数据库的挂起(Suspending)和恢复(Resuming)
- 2-1.基金的募集,交易与登记
- NPM install报错certificate has expired
- java京东秒杀_小猿圈Python之实现京东秒杀功能技巧
- 7-12 打印倒直角三角形图案
- reflection removal
- 申宝股票-家居和家电板块大涨
- 跟老男孩学Linux 5 in 1 PDF
- UE4-地形材质函数创建及使用
- 如何调用DLL中的函数
- 写一个php web符号打印成沙漏的形状,打印