[文章]HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（十一）

measureText

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。

示例

00001. // xxx.ets

00002. @Entry

00003. @Component

00004. struct MeasureText {

00005.   private settings: RenderingContextSettings = new RenderingContextSettings(true)

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

00007. 

00008.   build() {

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

00010.       Canvas(this.context)

00011.         .width('100%')

00012.         .height('100%')

00013.         .backgroundColor('#ffff00')

00014.         .onReady(() =>{

00015.           this.context.font = '50px sans-serif'

00016.           this.context.fillText("Hello World!", 20, 100)

00017.           this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)

00018.       })

00019.     }

00020.     .width('100%')

00021.     .height('100%')

00022.   }

00023. }

stroke

stroke(path?: Path2D): void

进行边框绘制操作。

示例

00001. // xxx.ets

00002. @Entry

00003. @Component

00004. struct Stroke {

00005.   private settings: RenderingContextSettings = new RenderingContextSettings(true)

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

00007. 

00008.   build() {

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

00010.       Canvas(this.context)

00011.         .width('100%')

00012.         .height('100%')

00013.         .backgroundColor('#ffff00')

00014.         .onReady(() =>{

00015.           this.context.moveTo(25, 25)

00016.           this.context.lineTo(25, 105)

00017.           this.context.lineTo(75, 105)

00018.           this.context.lineTo(75, 25)

00019.           this.context.strokeStyle = 'rgb(0,0,255)'

00020.           this.context.stroke()

00021.         })

00022.     }

00023.     .width('100%')

00024.     .height('100%')

00025.   }

00026. }