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. 点击返回按钮,退出应用。

工程目录

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)及以上版本才可编译运行。

下载

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536106.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习云计算HCIE选择誉天有什么优势?

誉天云计算课程优势实战性强 课程注重实践操作,通过实际案例和实验操作,让学员深入了解云计算的应用场景和实际操作技能。课程内容全面 涵盖所有云计算涉及的IT基础知识、服务器、存储、网络等方面的基础知识,开源操作系统Linux,开…

HarmonyOS实战开发-拼图、如何实现获取图片,以及图片裁剪分割的功能。

介绍 该示例通过ohos.multimedia.image和ohos.multimedia.mediaLibrary接口实现获取图片,以及图片裁剪分割的功能。 效果预览 使用说明: 使用预置相机拍照后启动应用,应用首页会读取设备内的图片文件并展示获取到的第一个图片,…

【muzzik 分享】3D模型平面切割

# 前言 一年一度的征稿到了,倒腾点存货,3D平面切割通常用于一些解压游戏里,例如水果忍者,切菜这些,今天我就给大家讲讲怎么实现3D切割以及其原理,帮助大家更理解3D中的 Mesh(网格),以及UV贴图和…

机器学习和深度学习--李宏毅(笔记与个人理解)Day11-12

Day11 when gradient is small…… 怎么知道是局部小 还是鞍点? using Math 这里巧妙的说明了hessan矩阵可以决定一个二次函数的凹凸性 也就是 θ \theta θ 是min 还是max,最后那个有些有些 哈 是一个saddle; 然后这里只要看hessan矩阵是不…

Element-UI 下拉框单选转多选回显不清空绑定的值

需求 根据radio切换来更改下拉框是否多选 原因 单选和多选这两个 input 看上去没差别&#xff08;自身和层级都一致&#xff09;&#xff0c;vue出于提高性能&#xff0c;所以 vue 给复用了 解决方案 <template><section><el-radio-group v-model"radi…

风储微网虚拟惯性控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 风储微网虚拟惯性控制系统simulink建模与仿真。风储微网虚拟惯性控制系统是一种模仿传统同步发电机惯性特性的控制策略&#xff0c;它通过集成风力发电系统、储能系统和其他分…

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗?

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗&#xff1f; 聚丙烯&#xff08;Polypropylene&#xff0c;简称PP&#xff09;是一种热塑性聚合物&#xff0c;属于聚烯烃类塑料之一。以下是聚丙烯的一些化学特性&#xff1a; 1. 分子结构&#xff1a; 聚丙烯是由丙烯…

再说vue响应式数据

请说一下你对响应式数据的理解 如何实现响应式数据据 对象 vue2 响应式核心代码 数组 vue2 处理缺陷Vue3则采用 proxy - vue3 响应式核心代码 请说一下你对响应式数据的理解 如何实现响应式数据据 数组和对象类型当值变化时如何劫持到。 对象 对象内部通过defineReactive方…

如何将普通maven项目转为maven-web项目

文件-项目结构&#xff08;File-->Project Structure &#xff09; 模块-->learn&#xff08;moudle-->learn&#xff09; 选中需要添加web的moudle&#xff0c;点击加号&#xff0c;我得是learn&#xff0c;单击选中后进行下如图操作&#xff1a; 编辑路径 结果如下…

Centos7 k8s 集群 - Rook Ceph 安装

环境准备 基础环境 系统名称操作系统CPU内存硬盘Kubernete 版本Docker版本IPmasterCentos74c4gsdb 20G1.17.023.0.1192.168.1.128node01Centos74c4gsdb 20G1.17.023.0.1192.168.1.129node02Centos74c4gsdb 20G1.17.023.0.1192.168.1.130node03Centos74c4gsdb 20G1.17.023.0.1…

OpenHarmony4.0分布式任务调度浅析

1 概述 OpenHarmony 分布式任务调度是一种基于分布式软总线、分布式数据管理、分布式 Profile 等技术特性的任务调度方式。它通过构建一种统一的分布式服务管理机制&#xff0c;包括服务发现、同步、注册和调用等环节&#xff0c;实现了对跨设备的应用进行远程启动、远程调用、…

3d怎么按路径制作模型---模大狮模型网

在3D建模中&#xff0c;按路径制作模型是一种常见的技术&#xff0c;特别适用于创建曲线、管道、绳索等线性形状的物体。虽然这项技术可能对初学者来说有些复杂&#xff0c;但通过一步步的指导和实践&#xff0c;你将能够掌握它。本文将详细介绍按路径制作模型的步骤&#xff0…

OpenDDS-3.27构建与用法

一、OpenDDS-3.27构建 ./configure To enable Java bindings, use ./configure --java make 二、运行Messenger Example&#xff1a; source setenv.sh For the C example&#xff1a;cd DevGuideExamples/DCPS/Messenger For the Java example&#xff1a;cd java/tests/mes…

【JVM】JVM堆占用情况分析(频繁创建的对象、内存泄露等问题)、jmap+jhat、jvisualvm工具使用

文章目录 一. 相关命令1. 查看进程堆内存整体使用情况&#xff1a;OOM的可能2. 统计类的对象数量以及内存占用&#xff1a;定位内存泄漏 二. 分析内存占用1. 使用 jhat 排查对象堆占用情况1.1. 排查步骤1.2. 具体分析例子a. 分析频繁创建对象导致的OOM 1.3. OQL查看某一个对象的…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十 简单视频浮雕画效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十 简单视频浮雕画效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十 简单视频浮雕画效果 一、简单介绍 二、简单视频浮雕画效果实现原理 三、简单视频浮雕画效果…

关于MCU产品开发参数存储的几种方案

关于MCU产品开发参数存储的几种方案 Chapter1 关于MCU产品开发参数存储的几种方案Chapter2 单片机参数处理[保存与读取]Chapter3 嵌入式设备参数存储技巧Chapter4 STM32硬件I2C的一点心得(AT24C32C和AT24C64C) Chapter1 关于MCU产品开发参数存储的几种方案 原文链接 在工作中…

Python 批量检测ip地址连通性,以json格式显示(支持传参单IP或者网段)

代码 ########################################################################## File Name: check_ip_test.py# Author: eight# Mail: 18847097110163.com # Created Time: Thu 11 Apr 2024 08:52:45 AM CST################################################…

突破界限 千视将在 NAB 2024 展会上展示领先的 AV over IP 技术

突破界限&#xff01;千视将在 NAB 2024 展会上展示领先的 AV over IP技术 作为AV over IP领域的先驱者&#xff0c;Kiloview将于2024年4月14日至17日在NAB展会&#xff08;展台号&#xff1a;SU6029&#xff09;隆重登场&#xff0c;展示我们领先业界的AV over IP产品、解决方…

Windows下安装GPU版Pytorch

升级Driver到最新版本 Windows搜索栏中输入设备管理器找到显示适配器一项&#xff0c;点击展开&#xff0c;你将看到你的NVIDIA显卡列在其中右键点击你的NVIDIA显卡&#xff0c;选择更新驱动软件…。在弹出的对话框中&#xff0c;选择自动搜索更新的驱动软件。之后&#xff0c…

nginx反向代理conf

打开nginx配置。 对登录功能测试完毕后&#xff0c;接下来&#xff0c;我们思考一个问题&#xff1a;前端发送的请求&#xff0c;是如何请求到后端服务的&#xff1f; 前端请求地址&#xff1a;http://localhost/api/employee/login 后端接口地址&#xff1a;http://localho…