中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
本文原创发布在华为开发者社区。
本示例介绍弧形菜单的场景化案例。
实现弧形菜单功能源码链接
弧形菜单展示,通过手势旋转菜单位置。核心代码如下,源码参考Index.ets
Column() { Stack() { ForEach(this.imageList, (item: string, index: number) => { Image($r(item)) .width(this.ImageWidth) .height(this.ImageHeight) .border({ color: "#FFF", width: 2 }) .position({ x: this.points[index][0], y: this.points[index][1] }) .objectFit(ImageFit.Auto) .rotate({ centerX: 100 / 2, centerY: 200 / 2, angle: this.getAngele(index) }) .zIndex(this.imageList.length - index) .id(`${index}`) }) } //centerY = 图片高度 + 圆的半径 .rotate({ angle: this.stackAngle, centerY: 200 + 100 }) }.height('100%') .width('100%') .backgroundColor("#ffa7a7a7") .gesture( PanGesture(this.panOption) .onActionStart((event: GestureEvent) => { Logger.info('Pan start ' + event.offsetX) let info = event.fingerList[0] this.x1 = px2vp(this.screenWidth) / 2 - info.globalX this.y1 = 200 + 100 - info.globalY Logger.info('Pan start ' + this.x1 + ' ' + this.y1) }) .onActionEnd((event: GestureEvent) => { Logger.info('Pan start ' + event.offsetY) Logger.info('Pan start ' + this.x2 + ' ' + this.y2) }) .onActionUpdate((event: GestureEvent) => { Logger.info('this.stackAngle = ' + this.stackAngle) if (event) { let info = event.fingerList[0] this.x2 = px2vp(this.screenWidth) / 2 - info.globalX this.y2 = 200 + 100 - info.globalY this.distance = Math.sqrt((event.offsetX) * (event.offsetX) + (event.offsetY) * (event.offsetY)) if ((this.x1 * this.y2 - this.x2 * this.y1) > 0) { this.stackAngle = (this.stackAngle + (this.distance / 60)) % 360 } else { this.stackAngle = (this.stackAngle - (this.distance / 60)) % 360 } } }) )
微信扫码分享