[文章]HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十五)

阅读量0
0
0

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

创建二次贝赛尔曲线的路径。

参数:

参数 类型 必填 默认值 描述
cpx number 0 贝塞尔参数的x坐标值。
cpy number 0 贝塞尔参数的y坐标值。
x number 0 路径结束时的x坐标值。
y number 0 路径结束时的y坐标值。

示例:

// xxx.ets

@Entry

@Component

struct QuadraticCurveTo {

  private settings: RenderingContextSettings = new RenderingContextSettings(true)

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

 

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Canvas(this.context)

        .width('100%')

        .height('100%')

        .backgroundColor('#ffff00')

        .onReady(() =>{

          this.context.beginPath()

          this.context.moveTo(20, 20)

          this.context.quadraticCurveTo(100, 100, 200, 20)

          this.context.stroke()

      })

    }

    .width('100%')

    .height('100%')

  }

}

图片27.png

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

绘制弧线路径。

参数:

参数 类型 必填 默认值 描述
x number 0 弧线圆心的x坐标值。
y number 0 弧线圆心的y坐标值。
radius number 0 弧线的圆半径。
startAngle number 0 弧线的起始弧度。
endAngle number 0 弧线的终止弧度。
counterclockwise boolean false 是否逆时针绘制圆弧。

示例:

// xxx.ets

@Entry

@Component

struct Arc {

  private settings: RenderingContextSettings = new RenderingContextSettings(true)

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

 

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Canvas(this.context)

        .width('100%')

        .height('100%')

        .backgroundColor('#ffff00')

        .onReady(() =>{

          this.context.beginPath()

          this.context.arc(100, 75, 50, 0, 6.28)

          this.context.stroke()

        })

    }

    .width('100%')

    .height('100%')

  }

}

图片28.png

*附件:HarmonyOSOpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十五)quadraticCurveTo arc.docx

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友