HarmonyOS 鸿蒙Next 求助需要一个环形的滑动条

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

HarmonyOS 鸿蒙Next 求助需要一个环形的滑动条 cke_349.png

大概是这样的环形，我目前是想用Gauge数据量规图表组件 + PanGesture拖动手势进行拖动，但是拖动数值一点都不丝滑吗，无法进行精细调整。

求助大佬给一个解决方案，或者完善一下。


更多关于HarmonyOS 鸿蒙Next 求助需要一个环形的滑动条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

参考量角器demo：

@Entry
@Component
struct index {
  @State angel: number = 0
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private radius: number = 120;
  private centerX: number = 0;
  private centerY: number = 0;

  draw() {
    this.context.clearRect(0, 0, this.context.width, this.context.height)
    // 绘制面板
    this.context.beginPath();
    this.context.arc(this.centerX, this.centerY, this.radius, Math.PI, Math.PI * 2);
    this.context.lineWidth = 1;
    this.context.strokeStyle = 'black';
    this.context.stroke();

    // 绘制刻度
    for (let i = 90; i <= 270; i += 5) {
      this.context.beginPath()
      this.context.lineWidth = 1
      this.context.strokeStyle = 'red'
      this.context.moveTo(this.centerX + this.radius * Math.sin(i / 180 * Math.PI),
        this.centerY + this.radius * Math.cos(i / 180 * Math.PI))
      this.context.lineTo(this.centerX + (this.radius - 3) * Math.sin(i / 180 * Math.PI),
        this.centerY + (this.radius - 3) * Math.cos(i / 180 * Math.PI))
      this.context.stroke()
    }

    // 绘制指针
    this.context.beginPath()
    this.context.strokeStyle = 'green'
    this.context.fillStyle = '#8000ff00'
    this.context.moveTo(this.centerX, this.centerY)
    this.context.lineTo(0, this.centerY)
    this.context.arc(this.centerX, this.centerY, this.radius, Math.PI, Math.PI * (1 + this.angel / 180))
    this.context.lineTo(this.centerX, this.centerY)
    this.context.stroke()
    this.context.fill()
  }

  build() {
    Column() {
      Canvas(this.context)
        .width(300)
        .height(150)
        .backgroundColor(Color.Pink)
        .onReady(() => {
          this.centerX = this.context.width / 2
          this.centerY = this.context.height

          this.draw()
        })
        .onTouch((event) => {
          let x = this.centerX - event.touches[0].x
          let y = this.centerY - event.touches[0].y
          this.angel = Math.atan(y / x) * (180 / Math.PI)
          if (this.angel < 0) {
            // 表示钝角
            this.angel += 180
          }
          this.draw()
        })
      Text('当前角度：' + this.angel.toFixed(2))
    }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next 求助需要一个环形的滑动条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，那末端圆角该如何处理。
以及我需要的是3/4圆，如何控制起点位置。

当前角度：0.00

在HarmonyOS鸿蒙Next系统中，实现一个环形的滑动条（Circular Slider）通常需要利用鸿蒙系统提供的UI组件和动画功能进行自定义开发。以下是一个简要的实现思路：

  1. 自定义组件：首先，你需要创建一个自定义组件来承载环形滑动条。这个组件可以基于Component类进行扩展。

  2. 绘制环形：在自定义组件的onDraw方法中，使用Canvas API绘制一个环形。你可以通过计算角度和半径来确定滑动条的位置。

  3. 处理触摸事件：重写自定义组件的触摸事件处理方法（如onTouchEvent），根据触摸点的位置计算滑动条的新位置，并更新UI。

  4. 动画效果：如果需要平滑过渡效果，可以使用鸿蒙的动画框架来实现滑动条的移动动画。

  5. 属性与事件：为自定义组件添加必要的属性和事件，以便外部可以控制环形滑动条的值并监听其变化。

请注意，以上步骤是一个简要的实现思路，具体实现可能需要根据实际需求进行调整。如果你在实现过程中遇到具体问题，如属性设置、事件监听或动画效果等，可以参考鸿蒙系统的官方文档或示例代码。

如果问题依旧没法解决请联系官网客服,官网地址是

回到顶部