HarmonyOS 鸿蒙Next canvas上绘制UI，整个画布如何实现跟手滑动效果，能提供demo

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next canvas上绘制UI，整个画布如何实现跟手滑动效果，能提供demo

canvas上绘制UI，整个画布如何实现跟手滑动效果，能提供demo或指导文档 

Harmonyos Next教程
2 回复

请参考如下代码：

[@Entry](/user/Entry)

[@Component](/user/Component)

struct Page9 {

  private settings: RenderingContextSettings = new RenderingContextSettings(true)

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  [@State](/user/State) [@Watch](/user/Watch)('draw') positionXY : number[] = [0, 0]; // 原始坐标点

  prePosition: number[] = []; // 上一次坐标点

  clickXY: number[] = []; // 鼠标落下坐标点

  shiftingPosition: number[] = []; // 偏移参照点

  rectWidth: number = 100;

  rectHeight: number = 100;

  PanGestureFlag: boolean = false;

  build() {

    Column() {

      Canvas(this.context)

        .width('100%')

        .height('50%')

        .backgroundColor('#ffff00')

        .margin({top: 50})

        .onReady(() => {

          this.draw()

        })

        .gesture( // 拖拽手势

          PanGesture()

            .onActionStart((event: GestureEvent)=>{

              let x = event.fingerList[0].localX;

              let y = event.fingerList[0].localY;

              if(x >= this.positionXY[0] &&

                x<= (this.positionXY[0] + this.rectWidth) &&

                y > this.positionXY[1] &&

                y<= (this.positionXY[1] + this.rectHeight)

              ){

                this.PanGestureFlag = true; // 可以拖动

                this.clickXY = [parseInt(`${x}`), parseInt(`${y}`)];

                this.shiftingPosition = [...this.positionXY];

                console.info(`shiftingPosition ${this.shiftingPosition}`)

              }

            })

            .onActionUpdate((event: GestureEvent)=>{

              if(this.PanGestureFlag) {

                this.prePosition = [...this.positionXY]; // 保存上一次坐标

                const x = this.shiftingPosition[0] + parseInt(`${event.offsetX}`);

                const y = this.shiftingPosition[1] + parseInt(`${event.offsetY}`);

                this.positionXY = [x, y];

                // console.info(`shiftingPosition ${this.shiftingPosition}`);

                console.log(`positionXY ${this.positionXY}`);

              }

            })

            .onActionEnd(()=>{

              this.PanGestureFlag = false; // 结束后，停止拖动

            })

        )

    }

  }

  draw() {

    this.context.reset();

    if (this.prePosition.length) {

      this.context.clearRect(this.prePosition[0], this.prePosition[1], this.rectWidth, this.rectHeight);

    }

    this.context.fillRect(this.positionXY[0], this.positionXY[1], this.rectWidth, this.rectHeight)

  }

更多关于HarmonyOS 鸿蒙Next canvas上绘制UI，整个画布如何实现跟手滑动效果，能提供demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统上实现Next canvas上的UI跟手滑动效果，可以通过监听触摸事件并更新画布的位置来实现。以下是一个简单的示例代码，展示了如何实现这一功能：

// 示例代码，非实际Java代码，仅示意逻辑
@Override
public boolean onTouchEvent(TouchEvent event) {
    int action = event.getAction();
    if (action == TouchEvent.ACTION_MOVE) {
        // 获取触摸点的位置
        float x = event.getX(0);
        float y = event.getY(0);

        // 计算滑动偏移量（这里假设有一个初始位置initialX和initialY）
        float dx = x - initialX;
        float dy = y - initialY;

        // 更新画布位置
        canvasPositionX += dx;
        canvasPositionY += dy;

        // 刷新画布
        invalidate();

        // 更新初始位置
        initialX = x;
        initialY = y;
    }
    return true;
}

// 在onDraw中绘制内容，根据canvasPositionX和canvasPositionY进行偏移
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 绘制逻辑，根据canvasPositionX和canvasPositionY进行画布内容的偏移绘制
}

注意，上述代码为逻辑示意，并非实际可运行的Java代码。在鸿蒙系统中，你需要使用鸿蒙的UI框架和事件处理机制来实现。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部