HarmonyOS实战开发-图片编辑、使用 TextArea 实现多文本输入

介绍

本示例使用 TextArea 实现多文本输入,使用 @ohos.app.ability.common 依赖系统的图库引用,实现在相册中获取图片,使用 @ohos.multimedia.image 生成pixelMap,使用pixelMap的scale(),crop(),rotate()接口实现对图片的缩放,裁剪,旋转功能。 使用@ohos.effectKit 生成effectKit,使用effectKit.getHighestSaturationColor() 接口实现对图片的高亮调节。添加文字/贴纸,利用组件的组合编辑素材大小和位置,再使用OffscreenCanvasRenderingContext2D进行离屏绘制保存。

效果预览

使用说明:

  1. 发表评价页面点击添加图片/照片,页面跳转到图片选择页面;
  2. 进入图片选择页面后,选择需要显示的图片;
  3. 选中图片后,页面会跳转到发表评价页面,点击图片跳转到图片编辑删除页面,点击编辑进入到编辑功能页;
  4. 调整菜单有裁剪、缩放、旋转、调色功能;
  5. 标记菜单有添加文字、添加贴纸功能;
  6. 编辑完成后,点击撤回按钮图片会还原到上一个编辑状态;
  7. 图片编辑完成后,点击保存,页面会跳转到发表评价页面,显示相关照片;
  8. 点击返回按钮,退出应用。

工程目录

bash 复制代码
entry/src/main/ets/
|---pages
|   |---EditImages.ets                       // 图片编辑
|   |---GetPictrues.ets                      // 图片选择
|   |---Index.ets                            // 首页
|   |---UpadatePages.ets                     // 编辑删除界面
photomodify/src/main/ets/components
|---featrue
|   |---ComputeFeature.ets                   // 计算功能
|   |---PixelMapQueue.ets                    // PixelMap队列
|---model
|   |---AdjustData.ets                       // 功能数据
|   |---AdjustModels.ets                     // 功能模型
|   |---MaterialData.ets                     // 素材数据
|   |---MaterialModels.ets                   // 素材模型
|---pages
|   |---EditImage.ets                        // 图片编辑
|   |---InputTextDialog.ets                  // 输入框弹窗
|   |---MaterialEdit.ets                     // 素材编辑组件
|   |---ScalePhotoPage.ets                   // 图片缩放
|   |---ColorSpacePage.ets                   // 色域修改
|   |---UpdatePage.ets                       // 编辑删除界面
|---util     
|   |---CoordinatesUtil.ets                  // 转换坐标系    
|   |---CopyObj.ets                          // 对象克隆     
|   |---ImageUtil.ets                        // 图片宽高处理                    
|   |---Logger.ets                           // 日志工具
|   |---MediaUtil.ts                         // 媒体帮助类
|   |---SvgUtil.ts                           // svg操作帮助类

具体实现

  • 图片选择功能在GetPictures中实现.
  • 图片选择:首先使用startAbilityForResult()启动系统图库应用,然后将选择的图片用select数组保存路径,展示到页面便于选择,选择完跳转到首页,点击一张图片,进入到编辑删除界面。

图片编辑功能在EditImage中实现

  • 图片编辑:图片编辑权限需要使用requestPermissionsFromUser申请,首先根据选择图片获取到的uri打开图片文件,fileAsset.open选择'rw'读写模式,然后使用image.createImageSource创建图片源实例,接下来使用createPixelMap创建PixelMap对象,便于处理图片,最后使用crop对图像进行裁剪处理,使用scale对图像进行缩放处理,rotate进行旋转处理。亮度调节使用effectKit.getHighestSaturationColor()接口实现对图片的高亮调节。添加文字/贴纸,编辑模式下,使用组件组合(Image、Shape、Text)进行交互完成素材大小和位置选择;编辑确认后,再使用OffscreenCanvasRenderingContext2D进行离屏绘制,保存为新的pixelMap。

相关权限

ohos.permission.READ_MEDIA

ohos.permission.WRITE_MEDIA

ohos.permission.MEDIA_LOCATION

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568
  2. 本示例为Stage模型,已适配API version 11版本SDK,SDK版本号(API Version 114.1.3.5),镜像版本号(4.1.3.5);
  3. 本示例需要使用DevEco Studio 版本号(3.1.0.501)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

bash 复制代码
git init
git config core.sparsecheckout true
echo code/BasicFeature/Media/Image/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等...视频教程


鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→ https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128

鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

一、入门必看

1.应用开发导读(ArkTS)
2.........

二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.系统定义
2.技术架构
3.技术特性
4.系统安全
5...

三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3...

四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言

五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列

更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

相关推荐
努力变厉害的小超超3 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
sanzk4 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析9 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6689 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
模拟IC攻城狮9 小时前
华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)
嵌入式硬件·华为·硬件架构·芯片
lqj_本人9 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人9 小时前
使用 Flutter 绘制一个棋盘
harmonyos
TangKenny10 小时前
计算网络信号
java·算法·华为
23zhgjx-NanKon10 小时前
华为eNSP:QinQ
网络·安全·华为