test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [image-viewer] optimise translate calc method (#13157)

Browse Source 
* Use trigonometric functions to calculate translate, which can support any angle
This commit is contained in:
zwgwf 2024-08-03 20:08:08 +08:00 committed by GitHub
parent d94aa4cdb5
commit 94a24dcbc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/components/image-viewer/src/image-viewer.vue
View File

@ -178,20 +178,11 @@ const imgStyle = computed(() => {
let translateX = offsetX / scale
let translateY = offsetY / scale
switch (deg % 360) {
case 90:
case -270:
;[translateX, translateY] = [translateY, -translateX]
break
case 180:
case -180:
;[translateX, translateY] = [-translateX, -translateY]
break
case 270:
case -90:
;[translateX, translateY] = [-translateY, translateX]
break
}
const radian = (deg * Math.PI) / 180
const cosRadian = Math.cos(radian)
const sinRadian = Math.sin(radian)
translateX = translateX * cosRadian + translateY * sinRadian
translateY = translateY * cosRadian - (offsetX / scale) * sinRadian
const style: CSSProperties = {
transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,