Toggle navigation
Toggle navigation
This project
Loading...
Sign in
developOne
/
harmonyPool
Go to a project
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation pinning
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
王士厅
2024-09-24 15:22:40 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
b1797b00aeb6cb776de3b57dddf37df28cce39f6
b1797b00
1 parent
2edd3083
fix: 图集替换ir单方案,修改了部分,方案还有问题
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
200 additions
and
6 deletions
sight_harmony/features/wdComponent/src/main/ets/components/GalleryImage.ets
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
sight_harmony/features/wdComponent/src/main/ets/pages/MultiPictureListPage.ets
sight_harmony/features/wdComponent/src/main/ets/viewmodel/MyDataSource.ets
sight_harmony/products/phone/src/main/ets/pages/view/MultiPictureDetailPageComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/GalleryImage.ets
0 → 100644
View file @
b1797b0
import display from '@ohos.display';
const TAG = 'GalleryImage'
@Component
export struct GalleryImage {
private url: string = "";
private index: number = 0;
@State downLoadEnable: boolean = true;
@Link isScaling: boolean
@State showLoading: boolean = false;
@State rotateAngle: number = 0;
@State showError: boolean = false;
@State scaleValue: number = 1;
@State pinchValue: number = 1;
@State pinchX: number | string = '50%';
@State pinchY: number | string = '50%';
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.None, fingers: 1 })
@State offsetX: number = 0
@State offsetY: number = 0
@State positionX: number = 0
@State positionY: number = 0
private imageWith: number = 0;
@State sizeValue: number = 0;
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
aboutToAppear(): void {
this.showLoading = true;
this.downLoadEnable = false;
console.info(TAG);
}
aboutToDisAppear(): void {
console.info("");
}
aboutToReuse(): void {
console.info("");
}
build() {
Column() {
Image(this.url)
.width(this.imageWidth)
.height("100%")
.objectFit(ImageFit.Contain)//todo 加载失败时占位图没隐藏
.alt($r("app.media.datail_imageLoading_w"))
.interpolation(ImageInterpolation.High)
.onComplete(msg => {
if (msg) {
this.imageWidth = '100%'
console.info(TAG, "index:" + this.index + ", loadingStatus:" + msg.loadingStatus)
// 图片数据加载成功
if (msg.loadingStatus === 0) {
this.showLoading = true;
this.downLoadEnable = false;
} else if (msg.loadingStatus === 1) {
// 图片数据解码成功
this.showLoading = false;
this.downLoadEnable = true;
this.imageWith = px2vp(display.getDefaultDisplaySync().width)
}
}
})
.onError(() => {
console.info(TAG, "图片加载异常")
this.showLoading = false;
this.showError = true;
})// 在组件上绑定缩放比例,可以通过修改缩放比例来实现组件的缩小或者放大
.scale({
x: this.scaleValue,
y: this.scaleValue,
z: 1,
centerX: this.pinchX,
centerY: this.pinchY
})// 以组件左上角为坐标原点进行移动
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.gesture(
GestureGroup(GestureMode.Parallel,
// 两指或以上的捏合手势
PinchGesture({ fingers: 2 })
.onActionStart(() => {
console.info(TAG, 'Pinch start');
})// 当捏合手势触发时,可以通过回调函数获取缩放比例,从而修改组件的缩放比例
.onActionUpdate((event: GestureEvent) => {
const scaleValue = this.pinchValue * event.scale;
if (scaleValue <= 3 && scaleValue >= 0.8) {
this.scaleValue = scaleValue;
this.pinchX = event.pinchCenterX;
this.pinchY = event.pinchCenterY;
}
})
.onActionEnd(() => {
this.pinchValue = this.scaleValue;
console.info(TAG, 'Pinch end');
if (this.pinchValue > 1) {
this.panOption.setDirection(PanDirection.Horizontal)
this.isScaling = true;
} else {
this.panOption.setDirection(PanDirection.None)
this.isScaling = false;
}
}),
// 绑定count为1的TapGesture
TapGesture({ count: 1 })
.onAction(() => {
}),
// 绑定count为2的TapGesture
TapGesture({ count: 2 })
.onAction(() => {
console.info(TAG, '双击 start')
animateTo({
duration: 400,
}, () => {
this.scaleValue = 1;
this.pinchX = '50%';
this.pinchY = '50%';
this.pinchValue = this.scaleValue;
this.offsetX = 0;
this.offsetY = 0;
this.positionX = 0;
this.positionY = 0;
this.panOption.setDirection(PanDirection.None);
this.isScaling = false;
})
}),
PanGesture(this.panOption)
.onActionStart(() => {
console.info(TAG, 'Pan start')
})
.onActionUpdate((event?: GestureEvent) => {
if (event) {
if (this.scaleValue > 1) {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
this.sizeValue = this.imageWith
}
}
})
.onActionEnd(() => {
this.positionX = this.offsetX
this.positionY = this.offsetY
console.info(TAG, 'Pan end')
})
))
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
\ No newline at end of file
...
...
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
View file @
b1797b0
...
...
@@ -114,8 +114,16 @@ export struct MultiPictureDetailItemComponent {
calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
let width = 0
let height = 0;
// width = size.width;
// height = size.width / imageWHRatio;
if (imageWHRatio > size.width / size.height) {
// 图片宽高比大于屏幕宽高比,图片默认以屏幕宽度进行显示
width = size.width;
height = size.width / imageWHRatio;
} else {
height = size.height;
width = size.height * imageWHRatio;
}
return { width: width, height: height };
}
...
...
@@ -179,7 +187,9 @@ export struct MultiPictureDetailItemComponent {
Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO:知识点:宽高只根据其尺寸设置一个,通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.aspectRatio(this.imageWHRatio)
.objectFit(ImageFit.Cover)// TODO:知识点:保持宽高比进行缩放,可以超出父组件,以便实现多图切换的增强功能
.autoResize(false)
.interpolation(ImageInterpolation.High)
.autoResize(false)
.transform(this.matrix)// TODO:知识点:通过matrix控制图片的缩放
...
...
@@ -229,11 +239,6 @@ export struct MultiPictureDetailItemComponent {
.gesture(
GestureGroup(
GestureMode.Exclusive,
// 单击返回上一层
// TapGesture({ count: 1 })
// .onAction(() => {
// router.back()
// }),
// TODO:知识点:双击切换图片大小
TapGesture({ count: 2 })
.onAction(() => {
...
...
@@ -315,9 +320,10 @@ export struct MultiPictureDetailItemComponent {
}
this.imageScaleInfo.stash();
}),
//
//
TODO:知识点:滑动图片
// TODO:知识点:滑动图片
// PanGesture({ fingers: 1 })// TODO:需求:默认大小下左右滑动应当是切换图片
// .onActionUpdate((event: GestureEvent) => {
// console.log(TAG, "PanGesture", JSON.stringify(event))
// if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) {
// // 默认大小下不允许移动
// return;
...
...
sight_harmony/features/wdComponent/src/main/ets/pages/MultiPictureListPage.ets
View file @
b1797b0
...
...
@@ -100,6 +100,7 @@ export struct MultiPictureListPage {
.vertical(false)
.autoPlay(false)
.loop(false)
.disableSwipe(!this.isEnableSwipe)
.effectMode(EdgeEffect.None)
.cachedCount(3)
.indicator(false)
...
...
sight_harmony/features/wdComponent/src/main/ets/viewmodel/MyDataSource.ets
0 → 100644
View file @
b1797b0
import {
PhotoListBean,
} from 'wdBean';
export class MyDataSource implements IDataSource {
private list: PhotoListBean[] = []
// private listener: DataChangeListener
constructor(list: PhotoListBean[]) {
this.list = list
}
totalCount(): number {
return this.list.length
}
getData(index: number): PhotoListBean {
return this.list[index]
}
getList(): PhotoListBean[] {
return this.list;
}
registerDataChangeListener(listener: DataChangeListener): void {
// this.listener = listener
}
unregisterDataChangeListener() {
}
}
\ No newline at end of file
...
...
sight_harmony/products/phone/src/main/ets/pages/view/MultiPictureDetailPageComponent.ets
View file @
b1797b0
...
...
@@ -337,6 +337,7 @@ export struct MultiPictureDetailPageComponent {
.indicator(false)
.displayCount(1)
.loop(false)
.disableSwipe(!this.isEnableSwipe)
.effectMode(EdgeEffect.Spring)
.id('e_swiper_content')
.alignRules({
...
...
Please
register
or
login
to post a comment