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

鸿蒙时代

发布于 2023-4-11 10:14

浏览

0收藏

measureText
measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
HarmonyOS/OpenHarmony应用开发-ArkTS画布组件（十一）-鸿蒙开发者社区
示例

.// xxx.ets
.@Entry
.@Component
.struct MeasureText {
.  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.font = '50px sans-serif'
.          this.context.fillText("Hello World!", 20, 100)
.          this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
.      })
.    }
.    .width('100%')
.    .height('100%')
.  }
.}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

HarmonyOS/OpenHarmony应用开发-ArkTS画布组件（十一）-鸿蒙开发者社区

stroke
stroke(path?: Path2D): void
进行边框绘制操作。
HarmonyOS/OpenHarmony应用开发-ArkTS画布组件（十一）-鸿蒙开发者社区
示例

.// xxx.ets
.@Entry
.@Component
.struct Stroke {
.  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.moveTo(25, 25)
.          this.context.lineTo(25, 105)
.          this.context.lineTo(75, 105)
.          this.context.lineTo(75, 25)
.          this.context.strokeStyle = 'rgb(0,0,255)'
.          this.context.stroke()
.        })
.    }
.    .width('100%')
.    .height('100%')
.  }
.}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.