1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15// @ts-nocheck 16import router from '@ohos.router'; 17 18@Entry 19@Component 20struct FullImagePage { 21 @State imageStrId: string = router.getParams().imageStrId 22 //第一个手指的横坐标开始 23 @State picStar1x: number = 0 24 //第一个手指的横坐标结束 25 @State picEnd1x: number = 0 26 //第一个手指移动过程中的横坐标位置 27 @State picAddStar1x: number = 0 28 //第一个手指的纵坐标开始 29 @State picStar1y: number = 0 30 //第一个手指的纵坐标结束 31 @State picEnd1y: number = 0 32 //第一个手指移动过程中的纵坐标位置 33 @State picAddStar1y: number = 0 34 //第二个手指的横坐标开始 35 @State picStar2x: number = 0 36 //第二个手指的横坐标结束 37 @State picEnd2x: number = 0 38 //第二个手指移动过程中的横坐标位置 39 @State picAddStar2x: number = 0 40 //第二个手指的纵坐标开始 41 @State picStar2y: number = 0 42 //第二个手指的纵坐标结束 43 @State picEnd2y: number = 0 44 //第二个手指移动过程中的纵坐标位置 45 @State picAddStar2y: number = 0 46 //两个手指之间的距离变化 47 @State picChange: number = 0 48 //开始时两个手指之间的距离 49 @State now1: number = 0 50 //移动中两个手指之间的距离 51 @State now2: number = 0 52 //图片缩放后，一个手指时的起始横坐标位置 53 @State point1: number = 0 54 //图片缩放后，一个手指移动时的横坐标位置 55 @State point2: number = 0 56 //图片缩放后，一个手指时的起始纵坐标位置 57 @State point4: number = 0 58 //图片缩放后，一个手指移动时的纵坐标位置 59 @State point5: number = 0 60 //图片的左边距 61 @State marginLeft: number = 0 62 //图片的上边距 63 @State marginTop: number = 0 64 //图片移动的左距离 65 @State numLeft: number = 0 66 //图片移动的上距离 67 @State numTop: number = 0 68 //将手指抬起时的变化记录赋值 69 @State size: number = 0 70 71 build() { 72 Column() { 73 Image(`/resources/images/photo${this.imageStrId.toString()}.jpg`) 74 //此处330为初始图片大小 75 .width(330 + this.picChange) 76 .sharedTransition('shareImage') 77 .objectFit(ImageFit.Contain) 78 .margin({ left: this.marginLeft, top: this.marginTop }) 79 .onTouch((event: TouchEvent) => { 80 //判断是否是双指 81 if (event.touches.length === 2) { 82 this.marginLeft = 0 83 if (event.type === TouchType.Down) { 84 //取双指的坐标位置 85 this.picStar1x = event.touches[0].x 86 this.picStar1y = event.touches[0].y 87 this.picStar2x = event.touches[1].x 88 this.picStar2y = event.touches[1].y 89 } else if (event.type === TouchType.Move) { 90 //双指移动时的位置 91 this.picAddStar1x = event.touches[0].x 92 this.picAddStar1y = event.touches[0].y 93 this.picAddStar2x = event.touches[1].x 94 this.picAddStar2y = event.touches[1].y 95 //勾股定理算出开始和移动时的双指距离 96 this.now1 = Math.sqrt((this.picStar2x - this.picStar1x) * (this.picStar2x - this.picStar1x) + (this.picStar2y - this.picStar1y) * (this.picStar2y - this.picStar1y)) 97 this.now2 = Math.sqrt((this.picAddStar2x - this.picAddStar1x) * (this.picAddStar2x - this.picAddStar1x) + (this.picAddStar2y - this.picAddStar1y) * (this.picAddStar2y - this.picAddStar1y)) 98 } else if (event.type === TouchType.Up) { 99 //将手指抬起时的变化记录赋值 100 this.size = this.picChange 101 } 102 //双指变化的距离 103 this.picChange = (this.now2 - this.now1) + this.size 104 if (this.picChange < -150) { 105 this.picChange = -150 106 } else if (this.picChange > 200) { 107 this.picChange = 200 108 } 109 //一个手指 110 } else if (event.touches.length === 1) { 111 if (event.type === TouchType.Down) { 112 //获取手指的横坐标 113 this.point1 = event.touches[0].x 114 //获取手指的纵坐标 115 this.point4 = event.touches[0].y 116 } else if (event.type === TouchType.Move) { 117 this.point2 = event.touches[0].x 118 this.point5 = event.touches[0].y 119 //只有图片放大才可以移动 120 if (this.picChange != 0) { 121 //变化值不为0 122 if (this.numLeft != 0) { 123 this.marginLeft = this.numLeft + (this.point2 - this.point1) 124 this.marginTop = this.numTop + (this.point5 - this.point4) 125 //左边距 126 if (this.marginLeft > 200) { 127 this.marginLeft = 200 128 } else if (this.marginLeft < -100) { 129 this.marginLeft = -100 130 } 131 //上边距 132 if (this.marginTop > 200) { 133 this.marginTop = 200 134 } else if (this.marginTop < -200) { 135 this.marginTop = -200 136 } 137 //变化值为0 138 } else { 139 this.marginLeft = (this.point2 - this.point1) 140 this.marginTop = (this.point5 - this.point4) 141 //左边距 142 if (this.marginLeft > 200) { 143 this.marginLeft = 200 144 } else if (this.marginLeft < -100) { 145 this.marginLeft = -100 146 } 147 //上边距 148 if (this.marginTop > 200) { 149 this.marginTop = 200 150 } else if (this.marginTop < -200) { 151 this.marginTop = -200 152 } 153 } 154 } 155 } else if (event.type === TouchType.Up) { 156 //记录值 157 this.numLeft = this.marginLeft 158 this.numTop = this.marginTop 159 } 160 } 161 }) 162 } 163 .onClick(() => { 164 router.back() 165 }) 166 .width('100%') 167 .height('100%') 168 } 169 170 pageTransition() { 171 PageTransitionEnter({ duration: 0 }) 172 PageTransitionExit({ duration: 0 }) 173 } 174}