HarmonyOS图片,【图片旋转】HarmonyOS Codelab挑战赛记录

最新推荐文章于 2024-09-02 15:04:24 发布
最新推荐文章于 2024-09-02 15:04:24 发布
阅读量133 收藏
点赞数
文章标签： HarmonyOS图片

图片旋转

项目启动

c71521a302db9bcc53dd565a8e3ac0ab.png

布局文件

在resource/base/layout 目录下修改 ability_main.xml

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

ohos:height="match_content"

ohos:width="match_content"

ohos:layout_alignment="horizontal_center"

ohos:text="HarmonyOS图像开发"

ohos:text_size="80"

ohos:top_margin="40vp"

/>

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_content"

ohos:width="match_content"

ohos:layout_alignment="horizontal_center"

ohos:orientation="horizontal"

ohos:top_margin="20vp">

ohos:id="$+id:whirl_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:background_button"

ohos:padding="12vp"

ohos:right_margin="5vp"

ohos:text="旋转"

ohos:text_size="20vp"

ohos:top_margin="10vp">

ohos:id="$+id:crop_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:background_button"

ohos:left_margin="5vp"

ohos:padding="12vp"

ohos:text="剪裁"

ohos:text_size="20vp"

ohos:top_margin="10vp">

ohos:id="$+id:scale_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:background_button"

ohos:left_margin="5vp"

ohos:padding="12vp"

ohos:text="缩放"

ohos:text_size="20vp"

ohos:top_margin="10vp">

ohos:id="$+id:mirror_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:background_button"

ohos:left_margin="5vp"

ohos:padding="12vp"

ohos:text="镜像"

ohos:text_size="20vp"

ohos:top_margin="10vp"/>

ohos:id="$+id:image"

ohos:height="match_content"

ohos:width="match_content"

ohos:image_src="$media:shanghai.png"

ohos:layout_alignment="horizontal_center"

ohos:top_margin="20vp">

57e09fa6dbb8e8abf7e35bcf38d8b255.png

在resource/base/graphic目录下添加background_button.xml

ohos:shape="rectangle">

ohos:radius="40"/>

ohos:color="#e9e9e9"/>

slice 目录

在src/main/java/com/example/pictureoperation/slice目录下(不同的项目名称不同，官网例子为com/huawei/codelab)修改 MainAbilitySlice.java文件，继承AbilitySlice。

定义成员变量

bbdc5e76441e69336296f3ceb90d4cbc.png

类名和包名对应你的项目名，复制过来的项目代码需要对应修改

MainAbilitySlice.java

package com.example.pictureoperation.slice;

import com.example.pictureoperation.ResourceTable;

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.components.Button;

import ohos.agp.components.Component;

import ohos.agp.components.Image;

import ohos.agp.render.Canvas;

import ohos.agp.render.Paint;

import ohos.agp.render.PixelMapHolder;

import ohos.global.resource.NotExistException;

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.IOException;

import java.io.InputStream;

/**

* 图像主页面

*/

public class MainAbilitySlice extends AbilitySlice {

private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "MainAbilitySlice");

Image image;

PixelMap imagePixelMap;

Button whirlImageBtn;

Button cropImageBtn;

Button scaleImageBtn;

Button mirrorImageBtn;

private int whirlCount = 0;

private boolean isCorp = false;

private boolean isScale = false;

private boolean isMirror = false;

private float scaleX = 1.0f;

@Override

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

initView();

}

private void initView() {

if (findComponentById(ResourceTable.Id_whirl_image) instanceof Button) {

whirlImageBtn = (Button) findComponentById(ResourceTable.Id_whirl_image);

}

if (findComponentById(ResourceTable.Id_crop_image) instanceof Button) {

cropImageBtn = (Button) findComponentById(ResourceTable.Id_crop_image);

}

if (findComponentById(ResourceTable.Id_scale_image) instanceof Button) {

scaleImageBtn = (Button) findComponentById(ResourceTable.Id_scale_image);

}

if (findComponentById(ResourceTable.Id_mirror_image) instanceof Button) {

mirrorImageBtn = (Button) findComponentById(ResourceTable.Id_mirror_image);

}

if (findComponentById(ResourceTable.Id_image) instanceof Image) {

image = (Image) findComponentById(ResourceTable.Id_image);

}

whirlImageBtn.setClickedListener(new ButtonClick());

cropImageBtn.setClickedListener(new ButtonClick());

scaleImageBtn.setClickedListener(new ButtonClick());

mirrorImageBtn.setClickedListener(new ButtonClick());

}

private class ButtonClick implements Component.ClickedListener {

@Override

public void onClick(Component component) {

int btnId = component.getId();

switch (btnId) {

case ResourceTable.Id_whirl_image:

// 旋转图片

whirlCount++;

isCorp = false;

isScale = false;

isMirror = false;

imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);

image.setPixelMap(imagePixelMap);

break;

case ResourceTable.Id_crop_image:

// 剪裁图片

whirlCount = 0;

isCorp = !isCorp;

isScale = false;

isMirror = false;

imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);

image.setPixelMap(imagePixelMap);

break;

case ResourceTable.Id_scale_image:

// 缩放图片

whirlCount = 0;

isCorp = false;

isScale = !isScale;

isMirror = false;

imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);

image.setPixelMap(imagePixelMap);

break;

case ResourceTable.Id_mirror_image:

// 镜像图片

whirlCount = 0;

isCorp = false;

isScale = false;

isMirror = true;

imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);

mirrorImage(imagePixelMap);

image.setPixelMap(imagePixelMap);

break;

default:

break;

}

}

}

private void mirrorImage(PixelMap pixelMap) {

scaleX = -scaleX;

image.addDrawTask(

new Component.DrawTask() {

@Override

public void onDraw(Component component, Canvas canvas) {

if (isMirror) {

isMirror = false;

PixelMapHolder pmh = new PixelMapHolder(pixelMap);

canvas.scale(

scaleX,

1.0f,

(float) pixelMap.getImageInfo().size.width / 2,

(float) pixelMap.getImageInfo().size.height / 2);

canvas.drawPixelMapHolder(

pmh,

0,

0,

new Paint());

}

}

});

}

/**

* 通过图片ID返回PixelMap

*

* home.php?mod=space&uid=952169 resourceId 图片的资源ID

* home.php?mod=space&uid=155549 图片的PixelMap

*/

private PixelMap getPixelMapFromResource(int resourceId) {

InputStream inputStream = null;

try {

// 创建图像数据源ImageSource对象

inputStream = getContext().getResourceManager().getResource(resourceId);

ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();

srcOpts.formatHint = "image/jpg";

ImageSource imageSource = ImageSource.create(inputStream, srcOpts);

// 设置图片参数

ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();

// 旋转

decodingOptions.rotateDegrees = 90 * whirlCount;

// 缩放

decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);

// 剪裁

decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);

decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;

return imageSource.createPixelmap(decodingOptions);

} catch (IOException e) {

HiLog.info(LABEL_LOG, "IOException");

} catch (NotExistException e) {

HiLog.info(LABEL_LOG, "NotExistException");

} finally {

if (inputStream != null) {

try {

inputStream.close();

} catch (IOException e) {

HiLog.info(LABEL_LOG, "inputStream IOException");

}

}

}

return null;

}

@Override

public void onActive() {

super.onActive();

}

@Override

public void onForeground(Intent intent) {

super.onForeground(intent);

}

}

9392a4e77e0bfc5eb95c5fe52e4525fc.png

这里的 Media_shanghai 对应

c5167c579c2e023f3f4341b454a90fa0.png

最后导入一张 1024 * 768 的图片

11254019fe80d1bba3fce347c8ba4888.png

效果展示

0a6419466dafc5e7dfeddd3b2ac99ed3.gif

使用HarmonyOS实现图片编辑，裁剪、旋转、亮度、透明度
2401_82546228的博客
03-28 2723
本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了图片编辑实现过程。样例主要包含以下功能：
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
【图片旋转】HarmonyOS Codelab挑战赛记录
qq_39149063的博客
04-22 725
图片旋转 项目启动 布局文件 在resource/base/layout 目录下修改 ability_main.xml <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orient
【arkts】HarmonyOS 实现图片的水平翻转和垂直翻转
hanacha_的博客
03-11 810
图片水平（左右）翻转。图片垂直（上下）翻转。
鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
特创数字
01-21 1914
【代码】鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
鸿蒙Harmony应用开发—ArkTS-转场动画（组件内转场）
m0_64420071的博客
03-20 1967
组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验。
HarmonyOS应用开发-放大与缩小效果展现.zip
05-20
HarmonyOS 提供了基于组件（Component）的开发模式，这些组件可以是按钮、图片、文本等，它们支持丰富的样式和行为定制。对于放大与缩小效果，我们主要关注的是视图（View）的缩放变换。 在 HarmonyOS 中，可以利用...
HarmonyOS应用开发者基础认证题目+答案
最新发布
09-26
HarmonyOS应用开发者基础认证题目，以及答案，本人目前已经取得证书啦，有需要的朋友自行下载哦~ 1.DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 （正确） 2.main_pages.json存放页面page路径配置信息。...
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
HarmonyOS云开发基础认证自刷题库
09-13
【 HarmonyOS 云开发基础认证自刷题库详解】 在当今的互联网技术发展潮流中，华为推出的HarmonyOS操作系统以其跨平台、分布式的特点受到了广泛关注。为了帮助开发者更好地掌握HarmonyOS的云开发技能，官方提供了...
HarmonyOS-组件动画
weixin_73928401的博客
05-23 869
ArkUI为我们提供了一种组件动画实现的API，因此只要调用API即可，不必考虑动画的每一帧是如何填充的，因此我们想利用ArkUI实现组件的动画时，只需要关注两点：一是组件起始和结束时的状态（位置），二是动画播放时的信息，例如时长和速度等
鸿蒙 HarmonyOs 动画效果 快速入门
制定持续可量化的目标，不断坚持。
06-30 1647
设置动画曲线。默认值：Curve.EaseInOut,平滑开始和结束设置播放次数。默认值：1，取值范围：[-1, +∞]设置为 -1 表示无限次播放。
【ArkTS】鸿蒙开发 在用户界面点击图片实现图片旋转和图片缩小动画
m0_66128366的博客
03-22 2672
为了实现图片点击旋转、缩放、位移等功能，我主要应用了多态样式：stateStyles()属性和动画animation（）属性，具体用法可以参考官网给出的说明：stateStyles()属性： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-statestyles-0000001482592098-V2。
2024年鸿蒙最新OpenHarmony开发实战：图片常见操作（JS）(3)，HarmonyOS鸿蒙面试宝典
2401_84870960的博客
05-15 386
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
HarmonyOS实战开发-实现图片的水平翻转和垂直翻转
LIUCHANGSHUO的博客
09-02 646
图片水平（左右）翻转。图片垂直（上下）翻转。
【HarmonyOS】【JS】小白的鸿蒙学习之路2--小小的图片啊，动呀动起来
华为开发者联盟
05-19 1410
4、上面所有的组件都定义了class属性，它对应的样式都定义在index.css中。index.hml：此文件定义了index页面的布局、index页面中用到的组件，以及这些组件的层级关系。index.js：此文件定义了index页面的业务逻辑，比如数据绑定、事件处理等。en-US.json：此文件定义了在英文模式下页面显示的变量内容。zh-CN.json：此文件定义了在中文模式下页面显示的变量内容。index.css：此文件定义了index页面的样式。image组件、动画。
HarmonyOS的三大技术特点
道亦无名
02-01 1406
harmonyos系统图片,鸿蒙HarmonyOS-获取系统照片并解码渲染显示2（附更完整的Demo）...
weixin_36106506的博客
05-27 1230
声明一下哦，本篇是接着我的上一篇文章——#2020征文-手机#获取系统照片并解码渲染显示(附完整demo) 原创 来写的。需要的可以先读读上一篇文件滴，本篇则是在上一篇代码基础上进一步修改而来。说一下功能的升级(较上一版本)：(ps:我也想搞分布式，可目前的现实不允许，还是等远程模拟器的多设备分布式联调能力开放吧)1.没有图片会出现提示2.相册中的所有照片都可显示，并且显示计数3.应用随打开随刷...
HarmonyOS图片生成技术与源码解析
资源摘要信息:"HarmonyOS随机生成图片功能实现方法" 知识点一：HarmonyOS操作系统概述 HarmonyOS（鸿蒙操作系统）是华为开发的操作系统，旨在实现跨多种设备的无缝协作体验。该操作系统采用微内核设计，具有分布式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>