代码拉取完成,页面将自动刷新
图片预览在应用开发中是一种常见场景,这里实现了对于图片的 缩放、移动、旋转、多图片预览功能做了处理。
图片预览 |
---|
![]() |
使用说明:
|entry/src/main/ets
| |---entryablity
| | |---EntryAbility.ts // 程序入口类
| |---constants // 常量
| |---model // 自定义数据模型
| |---utils // 工具类
| |---picturepreviewsample // 示例使用
| | |---PicturePreviewSample.ets // 场景构建案例
| |---view // 图片预览方案涉及的主要组件
| | |---PicturePreview.ets // 图片预览组件
| | |---PicturePreviewImage.ets // 单张图片的显示组件
@State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
Image(this.imageUrl)
.transform(this.matrix)
@State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
Image(this.imageUrl)
.offset({
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
Image(this.imageUrl)
.objectFit(ImageFit.Cover)
Image(this.imageUrl)
.width(this.fitWH === "width" ? $r("app.string.image_default_width") : undefined)
.height(this.fitWH === "height" ? $r("app.string.image_default_height") : undefined)
.aspectRatio(this.imageWHRatio)
.onComplete((event) => {
if (event) {
let imageW = event.width;
let imageH = event.height;
let windowSize = windowSizeManager.get();
// 图片宽高比
this.imageWHRatio = imageW / imageH;
// 图片默认大小
this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSize);
// 图片宽度 等于 视口宽度 则图片使用宽度适配 否则 使用 高度适配
if (this.imageDefaultSize.width === windowSize.width) {
this.imageWH = ImageWH.width;
} else {
this.imageWH = ImageWH.height;
}
/**
* 1.5 的基本倍数上添加 撑满全屏需要多少倍数
* 1.5 是初始化时候给的值
* 在1.5上面加是为了让图片可以放的更大
*/
this.imageScaleInfo.maxScaleValue += this.imageWH === ImageWH.width ?
(windowSize.height / this.imageDefaultSize.height) :
(windowSize.width / this.imageDefaultSize.width);
}
})
Image(this.imageUrl)
.gesture(
GestureGroup(
GestureMode.Exclusive,
// TODO:知识点:滑动图片
PanGesture({ fingers: 1 })
.onActionUpdate((event: GestureEvent) => {
if (this.imageWH != ImageWH.default) {
this.setCrossAxis(event);
this.setPrincipalAxis(event);
}
})
.onActionEnd((event: GestureEvent) => {
this.imageOffsetInfo.stash();
this.evaluateBound();
})
)
)
Image(this.imageUrl)
.gesture(
GestureGroup(
GestureMode.Exclusive,
// TODO:知识点:双指旋转图片
RotationGesture({ angle: this.imageRotateInfo.startAngle })
.onActionUpdate((event: GestureEvent) => {
let angle = this.imageRotateInfo.lastRotate + event.angle;
if (event.angle > 0) {
angle -= this.imageRotateInfo.startAngle;
} else {
angle += this.imageRotateInfo.startAngle;
}
this.matrix = matrix4.identity()
.scale({
x: this.imageScaleInfo.scaleValue,
y: this.imageScaleInfo.scaleValue
})
.rotate({
x: 0,
y: 0,
z: 1,
angle: angle,
}).copy();
this.imageRotateInfo.currentRotate = angle;
})
.onActionEnd((event: GestureEvent) => {
let rotate = simplestRotationQuarter(this.imageRotateInfo.currentRotate);
runWithAnimation(() => {
this.imageRotateInfo.currentRotate = rotate;
this.matrix = matrix4.identity()
.rotate({
x: 0,
y: 0,
z: 1,
angle: this.imageRotateInfo.currentRotate,
}).copy();
this.imageRotateInfo.stash();
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
})
})
)
)
不涉及
不涉及
本示例仅支持标准系统上运行。
本示例为Stage模型,从API version 12开始支持。SDK版本号:5.0.0.71 Release,镜像版本号:OpenHarmony 5.0.1.107。
本示例需要使用DevEco Studio 5.0.2 Release (Build Version: 5.0.7.200, built on January 23, 2025)编译运行。
如需单独下载本工程,执行如下命令:
git init
git config core.sparsecheckout true
echo code/UI/ImageViewer/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。