HarmonyOS 鸿蒙Next 关于拖拽固定到指定位置的需求 求大佬指点

 进行优化：

1.利用截图实现替身

2.控制方块落点

import { componentSnapshot, componentUtils, curves } from '[@kit](/user/kit).ArkUI';
import { image } from '[@kit](/user/kit).ImageKit';

/**
* 可以拖动组件并限制活动范围
*/
[@Entry](/user/Entry)
[@Component](/user/Component)
struct GestureDemo {

 build() {
   Column({ space: 10 }) {
     Row() {
     }
     .width(300)
     .height(200)
     .border({ color: Color.Red, width: 1 })
     .id('redRow')
     .backgroundColor(Color.White)

     Row({ space: 5 }) {
       Repeat(new Array(5).fill('0').map((item: string, index) => item + index))
         .each((repeat) => {
           GestureItem({ text: repeat.item, rangId: 'redRow' })
         })
     }
     .width(300)
     .height(60)
     .border({ color: Color.Blue, width: 1 })
     .padding(10)
   }.alignItems(HorizontalAlign.Center)
   .width("100%")
   .height("100%")
 }
}

[@Component](/user/Component)
export struct GestureItem {
 [@State](/user/State) offsetX: number = 0;
 [@State](/user/State) offsetY: number = 0;
 [@State](/user/State) positionX: number = 0;
 [@State](/user/State) positionY: number = 0;
 [@Prop](/user/Prop) text: string
 siz: number = 50
 ratio: number = 1.2
 // 控制范围
 rangX: [number, number] = [0, 100]
 rangY: [number, number] = [0, 100]
 isGet: boolean = false
 // 落点区域id
 rangId: string = ''
 // 替身
 [@State](/user/State) pixmap: image.PixelMap | undefined = undefined

 build() {
   Stack() {
     // 展示信息
     Row() {
       Text(this.text)
     }
     .border({ color: Color.Blue, width: 1 })
     .backgroundColor(Color.Orange)
     .id(this.text)
     .width("100%")
     .height("100%")
     // 替身图片
     Image(this.pixmap)
       .width("100%")
       .height("100%")
       .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
       .animation({ curve: curves.springMotion() })
       .gesture(
         PanGesture()
           .onActionStart(() => {
             // 进行截图
             componentSnapshot.get(this.text, (error: Error, pixmap: image.PixelMap) => {
               this.pixmap = pixmap
             }, { waitUntilRenderFinished: true })
             // 获取范围信息
             if (!this.isGet) {
               let obj: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.rangId);
               let thisObj: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.text);
               this.rangX[0] = px2vp(obj.windowOffset.x - thisObj.windowOffset.x)
               this.rangY[0] = px2vp(obj.windowOffset.y - thisObj.windowOffset.y)
               this.rangX[1] = px2vp(obj.size.width - thisObj.windowOffset.x)
               this.rangY[1] =
                 px2vp(obj.size.height + obj.windowOffset.y - thisObj.windowOffset.y - thisObj.size.height)
               this.isGet = true
             }
           })
           .onActionUpdate((event: GestureEvent | undefined) => {
             if (event) {
               this.offsetX = this.positionX + event.offsetX;
               this.offsetY = this.positionY + event.offsetY;
             }
           })
           .onActionEnd(() => {
             // 根据范围进行落点
             if (this.offsetX > this.rangX[0] && this.offsetX < this.rangX[1] &&
               this.offsetY > this.rangY[0] && this.offsetY < this.rangY[1]
             ) {
               this.positionX = this.offsetX;
               this.positionY = this.offsetY;
             } else {
               this.offsetX = 0
               this.offsetY = 0
               this.positionX = 0
               this.positionY = 0
             }
           })
       )
   }.width(this.siz)
   .aspectRatio(this.ratio)
 }
}

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17