HarmonyOS 鸿蒙Next 如何在组件中心处画圆点

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

HarmonyOS 鸿蒙Next 如何在组件中心处画圆点 我想要实现图片验证码的功能，就是那种依次选中图片然后图片中间出现圆点标记的效果。目前不知道如何在图片中心处画圆点，有大佬知道如何处理吗？

Harmonyos Next教程
4 回复

这种可以使用stack来包裹Image组件和点击事件后的circle组件，设置子组件在容器内的对齐方式为横向和纵向居中即可。外层组件可以使用RelativeContainer来控制stack处于不同位置。

可以看看这个简单demo:

@Entry
@Component
struct Index {
  @State showDot1: boolean = false; // 控制小圆点是否显示
  @State showDot2: boolean = false; // 控制小圆点是否显示

  build() {
    Column() {
      RelativeContainer() {
        Stack({ alignContent: Alignment.Center }) {
          Image($r('app.media.startIcon'))
            .width(100)
            .height(100)
            .onClick(() => {
              this.showDot1 = !this.showDot1
            })
          if (this.showDot1) {
            Circle()
              .size({ width: 50, height: 50 })
              .fill(Color.Red)
              .hitTestBehavior(HitTestMode.Transparent)
          }
        }
        .id('stack1')
        .alignRules({
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

        Stack({ alignContent: Alignment.Center }) {
          Image($r('app.media.test'))
            .width(100)
            .height(100)
            .onClick(() => {
              this.showDot2 = !this.showDot2
            })
          if (this.showDot2) {
            Circle()
              .size({ width: 50, height: 50 })
              .fill(Color.Green)
              .hitTestBehavior(HitTestMode.Transparent)
          }
        }.id('stack2')
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })

      }
      .width("100%")
      .height("30%")
      .borderWidth(1)

    }

    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next 如何在组件中心处画圆点的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢大佬~

可以通过计算两中心坐标的差值并使用offset根据偏移量来移动要显示的组件到目标组件的中心点，比如下面这段代码：

import { componentUtils, display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State screenWidth: number = display.getDefaultDisplaySync().width
  @State screenHeight: number = display.getDefaultDisplaySync().height
  @State x: number = 0
  @State y: number = 0
  @State x2: number = 0
  @State y2: number = 0
  @State flag: boolean = false

  build() {
    Column() {
      Stack() {
        Text('餐')
          .fontSize(100)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Green)
          .textAlign(TextAlign.Center)
          .onClick(() => {

            let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("test");
            let modePosition2: componentUtils.ComponentInfo = componentUtils.getRectangleById("circle");
            let width = modePosition.size.width
            let height = modePosition.size.height

            // 相对于屏幕的坐标
            let x1 = modePosition.screenOffset.x
            let y1 = modePosition.screenOffset.y

            // 组件中心点相对于屏幕的坐标
            this.x = x1 + width / 2
            this.y = y1 + height / 2
            console.log(`x: ${this.x} y: ${this.y}`)

            // circle相较于屏幕的坐标
            let x2 = modePosition2.screenOffset.x
            let y2 = modePosition2.screenOffset.y

            // circle组件的宽高
            let width2 = modePosition2.size.width
            let height2 = modePosition2.size.height
            // circle组件的中心坐标
            this.x2 = x2 + width2 / 2
            this.y2 = y2 + height2 / 2
            console.log(`x2: ${this.x2} y2: ${this.y2}`)

            this.flag = !this.flag
            console.log(`this.x: ${this.x}`)
          })
          .id('test')

        Circle()
          .width(50)
          .height(50)
          .fill(Color.Red)
          .offset({
            x: px2vp(this.x - this.x2),
            y: px2vp(this.y - this.y2)
          })
          .id('circle')
          .visibility(this.flag ? Visibility.Visible : Visibility.None)
          .hitTestBehavior(HitTestMode.Transparent)

      }
      .id('stack')

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

在HarmonyOS鸿蒙Next系统中，如果你想在组件中心处画圆点，可以通过自定义组件并使用Canvas绘图API来实现。以下是实现该功能的简要步骤：

  1. 创建自定义组件：首先，你需要创建一个自定义组件类，继承自Component或其他合适的基类。

  2. 重写onDraw方法：在自定义组件类中，重写onDraw(Canvas canvas)方法。这是组件绘制的核心方法。

  3. 计算中心位置：在onDraw方法中，获取组件的宽度和高度，然后计算出组件的中心点坐标。

  4. 绘制圆点：使用Canvas的drawCircle方法，传入中心点的坐标和圆点的半径来绘制圆点。你可以设置圆点的颜色和画笔样式来满足你的需求。

  5. 注册并使用自定义组件：将自定义组件注册到你的应用中，并在布局文件中或代码中引用它。

示例代码片段（伪代码）：

// 伪代码，具体实现需根据HarmonyOS API调整
class MyCustomComponent extends Component {
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int centerX = width / 2;
        int centerY = height / 2;
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawCircle(centerX, centerY, 10, paint);
    }
}

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html

回到顶部