图像加载库，支持加载、缩放和拖动
以下内容由 AI 翻译，如有问题请 点此提交 issue 反馈
介绍
largeImage4cj 是一个能够加载图像并执行缩放（放大和缩小）及滚动操作的工具，图像放大后可通过拖动来查看完整内容。
特性
- 加载图像
- 支持缩放、拖动查看大图
源码目录
├─AppScope
├─doc # API文档和使用手册存放目录
├─entry # 示例代码文件夹
├─hvigor # 构建工具目录
├─largeImage # largeImage 库文件夹
│ └─src
│ └─main
│ ├─cangjie
│ │ └─src # 框架代码目录
│ └─resources
├─README.md # largeImage4cj 介绍及使用说明
AppScope全局资源存放目录和应用全局信息配置目录docAPI文档和使用手册存放目录entry工程模块 - 编译生成一个HAPentry srcAPP代码目录entry src mainAPP项目目录entry src main cangjie仓颉代码目录entry src main resources资源文件目录largeImage工程模块 - 编译生成一个har包largeImage src模块代码目录largeImage src main模块项目目录largeImage src main cangjie仓颉代码目录largeImage src main resources资源文件目录hvigor构建工具目录
接口说明
主要类和函数接口说明详见 API
使用说明
编译构建
-
通过module引入
- 克隆下载项目
- 将largeImage模块拷贝到应用项目下
- 修改自身应用 entry 下的 oh-package.json5 文件，在 dependencies 字段添加 "largeImage": "file:../largeImage"
{ "name": "entry", "version": "1.0.0", "description": "Please describe the basic information.", "main": "", "author": "", "license": "", "dependencies": { "largeImage": "file:../largeImage" } } - 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，在 [dependencies] 字段下添加 largeImage = {path = "../../../../largeImage/src/main/cangjie", version = "1.0.0"}
[dependencies] [dependencies.largeImage] path = "../../../../largeImage/src/main/cangjie" - 在项目中使用 import largeImage.* 引用largeImage项目
import largeImage.* - 在测试项目时，若使用的是模拟器环境，请在 entry/build-profile.json5 文件的 "cangjieOptions": {} 添加 "abiFilters": ["x86_64"]，如果是真机环境，请将 ["x86_64"] 修改为 ["arm64-v8a"]
-
把 largeImage4cj 作为三方库依赖引入
- 目标工程把 largeImage4cj 依赖库作为 git submodule 引入
> cd $工程根目录 > mkdir third-party > cd third-party > git submodule add "https://gitcode.com/Cangjie-TPC/largeimage4cj.git"- 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，添加依赖
[dependencies] [dependencies.largeImage] path = "../../../../largeImage/src/main/cangjie"- 在项目中使用 largeImage 组件
import largeImage.*
功能示例
@Entry
@Component
class BasicFeatures {
@State
var model: LargeImageModel = LargeImageModel()
var swiperController: SwiperController = SwiperController()
@State
var index: UInt32 = 0
func getData(): LargeImageModel {
model.initMatrix()
model.setImageResource(@r(app.media.sanmartino))
return model
}
func build() {
Stack(Alignment.Bottom) {
LargeImage(model: getData())
Column(5) {
Swiper(swiperController) {
Row(5) {
Text(
"Use a two finger pinch to zoom in and out. The zoom is centred on the pinch gesture, and you can pan at the same time."
)
.width(100.percent)
.height(60)
.layoutWeight(1)
.fontColor(0xffffff)
.textAlign(TextAlign.Center)
.fontSize(16)
Image(@r(app.media.next))
.width(30)
.height(30)
.margin(top: 6, left: 10)
.onClick({
event => index = 1
})
}
.width(100.percent)
.height(60)
.backgroundColor(0x3d3d3d)
Row(5) {
Image(@r(app.media.previous))
.width(30)
.height(30)
.margin(top: 6)
.onClick({
event => index = 0
})
Text("Double tap and swipe up or down to zoom in or out. The zoom is centred where you tapped.")
.width(100.percent)
.height(60)
.layoutWeight(1)
.fontColor(0xffffff)
.textAlign(TextAlign.Center)
.fontSize(16)
Image(@r(app.media.next))
.width(30)
.height(30)
.margin(top: 6, left: 10)
.onClick({
event => index = 2
})
}
.width(100.percent)
.height(60)
.backgroundColor(0x3d3d3d)
Row(5) {
Image(@r(app.media.previous))
.width(30)
.height(30)
.margin(top: 6)
.onClick({
event => index = 1
})
Text("Use one finger to drag the image around.")
.width(100.percent)
.height(60)
.layoutWeight(1)
.fontColor(0xffffff)
.textAlign(TextAlign.Center)
.fontSize(16)
Image(@r(app.media.next))
.width(30)
.height(30)
.margin(top: 6, left: 10)
.onClick({
event => index = 3
})
}
.width(100.percent)
.height(60)
.backgroundColor(0x3d3d3d)
Row(5) {
Image(@r(app.media.previous))
.width(30)
.height(30)
.margin(top: 6)
.onClick({
event => index = 2
})
Text("If you drag quickly and let go, fling momentum keeps the image moving.")
.width(100.percent)
.height(60)
.layoutWeight(1)
.fontColor(0xffffff)
.textAlign(TextAlign.Center)
.fontSize(16)
Image(@r(app.media.next))
.width(30)
.height(30)
.margin(top: 6, left: 10)
.onClick({
event => index = 4
})
}
.width(100.percent)
.height(60)
.backgroundColor(0x3d3d3d)
Row(5) {
Image(@r(app.media.previous))
.width(30)
.height(30)
.margin(top: 6)
.onClick({
event => index = 3
})
Text("Double tap the image to zoom in to that spot. Double tap again to zoom out.")
.width(100.percent)
.height(60)
.layoutWeight(1)
.fontColor(0xffffff)
.textAlign(TextAlign.Center)
.fontSize(16)
}
.width(100.percent)
.height(60)
.backgroundColor(0x3d3d3d)
}
.index(index)
.autoPlay(false)
.indicator(false)
.loop(false)
.duration(50)
.vertical(false)
.itemSpace(0)
.onChange({
index => AppLog.info(index.toString())
})
}
.height(60)
.backgroundColor(0x3d3d3d)
.align(Alignment.Bottom)
}
}
}
约束与限制
在下述版本验证通过：
DevEco Studio (5.0.9.100) Cangjie Support Plugin 5.0.9.100 Cangjie Compiler: 0.53.18 (cjnative)
- 目前不支持设置拖拽手势及滑动手势，其效果暂未支持。
开源协议
本项目基于 Apache License 2.0 ，请自由地享受和参与开源。
参与贡献
欢迎给我们提交PR，欢迎给我们提交Issue，欢迎参与任何形式的贡献。