alignitems和textalign区别

时间: 2024-05-23 12:16:01 浏览: 116

HarmonyOSOpenHarmony应用开发-ArkTS画布组.doc

### HarmonyOS/OpenHarmony应用开发-ArkTS画布组知识点详解 #### 一、概览在本篇文章中，我们将深入探讨HarmonyOS/OpenHarmony中的ArkTS画布组件及其CanvasRenderingContext2D对象的一些关键属性：`font`, `textAlign`, 和 `textBaseline`。这些属性在绘制文本时至关重要，能够帮助开发者实现更精确、更美观的文本布局。 #### 二、`font` 属性 `font` 属性用于设置文本的样式。它决定了字体家族、大小、粗细和斜体等特性。 ##### 代码示例： ```javascript @Entry @Component struct Fonts { 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 = '30px sans-serif' this.context.fillText("Hello World", 20, 60) }) } .width('100%') .height('100%') } } ``` **效果展示**：这段代码会创建一个黄色背景的Canvas，并在其上使用30像素大小的无衬线字体显示“Hello World”。 #### 三、`textAlign` 属性 `textAlign` 属性用于控制文本的水平对齐方式。它可以设置为 `start`, `end`, `left`, `center`, 或者 `right`。 ##### 代码示例： ```javascript @Entry @Component struct CanvasExample { 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.strokeStyle = '#0000ff' this.context.moveTo(140, 10) this.context.lineTo(140, 160) this.context.stroke() this.context.font = '18px sans-serif' // 设置不同的 textAlign 值并绘制文本 this.context.textAlign = 'start' this.context.fillText('textAlign=start', 140, 60) this.context.textAlign = 'end' this.context.fillText('textAlign=end', 140, 80) this.context.textAlign = 'left' this.context.fillText('textAlign=left', 140, 100) this.context.textAlign = 'center' this.context.fillText('textAlign=center', 140, 120) this.context.textAlign = 'right' this.context.fillText('textAlign=right', 140, 140) }) } .width('100%') .height('100%') } } ``` **效果展示**：此示例展示了不同`textAlign`值的效果。通过一条蓝色的垂直线作为参考，我们可以清楚地看到文本是如何根据不同的对齐方式进行布局的。 #### 四、`textBaseline` 属性 `textBaseline` 属性用于控制文本的垂直对齐方式。它可以设置为 `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, 或者 `bottom`。 ##### 代码示例：虽然原始部分没有提供完整的`textBaseline`示例代码，但我们可以基于前面的例子构建一个简化的版本： ```javascript @Entry @Component struct TextBaselineExample { 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.strokeStyle = '#0000ff' this.context.moveTo(140, 10) this.context.lineTo(140, 160) this.context.stroke() this.context.font = '18px sans-serif' // 设置不同的 textBaseline 值并绘制文本 this.context.textBaseline = 'top' this.context.fillText('textBaseline=top', 140, 15) this.context.textBaseline = 'hanging' this.context.fillText('textBaseline=hanging', 140, 35) this.context.textBaseline = 'middle' this.context.fillText('textBaseline=middle', 140, 55) this.context.textBaseline = 'alphabetic' this.context.fillText('textBaseline=alphabetic', 140, 75) this.context.textBaseline = 'ideographic' this.context.fillText('textBaseline=ideographic', 140, 95) this.context.textBaseline = 'bottom' this.context.fillText('textBaseline=bottom', 140, 115) }) } .width('100%') .height('100%') } } ``` **效果展示**：此示例展示了不同`textBaseline`值的效果。通过一条蓝色的垂直线作为参考，我们可以观察到文本是如何根据不同的基线进行垂直定位的。 ### 总结通过以上介绍，我们可以看出`font`, `textAlign`, 和 `textBaseline` 这三个属性对于在HarmonyOS/OpenHarmony的应用开发中精确控制文本布局具有重要作用。掌握它们的使用方法可以帮助开发者实现更加美观且功能丰富的用户界面。通过实际编程练习，开发者可以更好地理解和应用这些属性，从而提高应用程序的质量和用户体验。

`align-items` 和 `text-align` 是两个不同的 CSS 属性，具有不同的作用。 `align-items` 属性用于设置容器内的元素在交叉轴上的对齐方式。例如，在一个 flex 容器中，当容器的高度大于其内部元素的高度时，可以使用 `align-items` 属性来设置元素在垂直方向上的对齐方式。该属性只对容器内部的元素有效。 `text-align` 属性用于设置文本的对齐方式，即决定文本在其容器中水平对齐的方式。该属性只对容器内的文本有效。因此，两者的主要区别在于作用对象不同：`align-items` 作用于容器内的所有元素，而 `text-align` 只作用于容器内的文本。

阅读全文

alignitems和textalign区别

相关推荐

React Native自定义标题栏组件的实现方法

react-native-1

构建自定义主题和样式的Dash应用

React Native组件基础：学习创建和使用组件

【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip

【java毕业设计】大学志愿填报系统源码（springboot+vue+mysql+说明文档）.zip

基于java的网吧管理系统答辩PPT.pptx

基于java的基于SSM架构的网上书城系统答辩PPT.pptx

tornado-6.1-cp37-cp37m-win32.whl

气泡排序、插入排序、选择排序、快速排序、希尔排序、堆排序、合并排序-SortAlgorithm.zip

Keyboard Maestro 11.0.3-macwk.dmg

基于微信小程序的鲜花销售微信小程序答辩PPT.pptx

【java毕业设计】智能推荐旅游平台源码（springboot+vue+mysql+说明文档）.zip

tornado-6.2b1-cp39-cp39-musllinux_1_1_x86_64.whl

【java毕业设计】東耳篮球馆会员信息管理系统源码（springboot+vue+mysql+说明文档）.zip

tornado-6.1b2-cp38-cp38-manylinux2014_aarch64.whl

基于java的土家风景文化管理平台答辩PPT.pptx

Jira-software-9,12.12

最新推荐

【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip

【java毕业设计】大学志愿填报系统源码（springboot+vue+mysql+说明文档）.zip

基于java的网吧管理系统答辩PPT.pptx

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界