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

measureText

measureText(text: string): TextMetrics

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

 

示例：

1. // xxx.ets
2. @Entry
3. @Component
4. struct MeasureText {
5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
8.   build() {
9.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
10.       Canvas(this.context)
11.         .width('100%')
12.         .height('100%')
13.         .backgroundColor('#ffff00')
14.         .onReady(() =>{
15.           this.context.font = '50px sans-serif'
16.           this.context.fillText("Hello World!", 20, 100)
17.           this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
18.       })
19.     }
20.     .width('100%')
21.     .height('100%')
22.   }
23. }

 

stroke

stroke(path?: Path2D): void

进行边框绘制操作。

参数：

参数	类型	必填	默认值	描述
path	Path2D	否	null	需要绘制的Path2D。

示例：

1. // xxx.ets
2. @Entry
3. @Component
4. struct Stroke {
5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
8.   build() {
9.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
10.       Canvas(this.context)
11.         .width('100%')
12.         .height('100%')
13.         .backgroundColor('#ffff00')
14.         .onReady(() =>{
15.           this.context.moveTo(25, 25)
16.           this.context.lineTo(25, 105)
17.           this.context.lineTo(75, 105)
18.           this.context.lineTo(75, 25)
19.           this.context.strokeStyle = 'rgb(0,0,255)'
20.           this.context.stroke()
21.         })
22.     }
23.     .width('100%')
24.     .height('100%')
25.   }
26. }