HarmonyOS 是否支持绘制半圆

效果如图所示:

HarmonyOS 是否支持绘制半圆 -鸿蒙开发者社区

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

可以使用Canvas来绘制,参考示例如下:

@Component
@Entry
export struct WidgetsProgress {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  @State @Watch('onCountUpdated') radianTest: number = 0
  @State color: string = '#ff8c909b'

  onCountUpdated(): void {
    this.canvasTest()
  }

  canvasTest = (): void => {
    let offContext = this.offCanvas.getContext('2d', this.settings)
    offContext.lineCap = 'round'
    offContext.lineWidth = 8
    offContext.beginPath()
    offContext.arc(
      100,
      75,
      50,
      (225 - 90) * Math.PI / 180,
      (135 - 90) * Math.PI / 180
    )
    offContext.strokeStyle = '#ff8c909b'
    offContext.stroke()

    offContext.beginPath()
    offContext.arc(
      100,
      75,
      50,
      (225 - 90) * (Math.PI / 180),
      this.radianTest === 0 ? (135 - 90) * (Math.PI / 180) : (135 - 270 * (1 - this.radianTest) - 90) * (Math.PI / 180),
    )
    offContext.strokeStyle = this.color
    offContext.stroke()
    let image = this.offCanvas.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)
  }

  build() {
    NavDestination() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(
            this.canvasTest
          )

        Button('test')
          .onClick(() => {
            this.color = '#ff144cd2'
            this.radianTest = Number(this.radianTest + 0.01)
            if (this.radianTest > 1) {
              this.radianTest = 0
            }
          })
      }
      .width('100%')
      .height(500)
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
bitmap绘制内容需要支持清屏功能
761浏览 • 1回复 待解决
HarmonyOS 是否支持webrtc
418浏览 • 1回复 待解决
HarmonyOS 是否支持webrtc
488浏览 • 1回复 待解决
HarmonyOS websocket是否支持
46浏览 • 1回复 待解决
HarmonyOS是否支持图表组件?
283浏览 • 1回复 待解决
HarmonyOS是否支持RTSP直播
388浏览 • 1回复 待解决
HarmonyOS ts是否支持反射?
195浏览 • 1回复 待解决
HarmonyOS 开发是否支持ProtoBuf
24浏览 • 1回复 待解决
HarmonyOS attributeModifier是否支持继承?
254浏览 • 1回复 待解决
HarmonyOS是否支持ping命令?
493浏览 • 1回复 待解决
HarmonyOS 目前是否支持cordova
789浏览 • 2回复 待解决
HarmonyOS 是否支持串行队列
59浏览 • 1回复 待解决
HarmonyOS webview是否支持CodeCache
35浏览 • 1回复 待解决
HarmonyOS 是否支持双录?
276浏览 • 1回复 待解决
HarmonyOS 是否支持SVG动画
29浏览 • 1回复 待解决