diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index 6c999673ee73895345000efd0925b2e6909966b5..dacdf9e950beca5bc73b016797b660196dc523e6 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -9,6 +9,5 @@ - 开发基础知识 - [应用包结构说明(FA模型)](package-structure.md) - [应用包结构说明(Stage模型)](stage-structure.md) - - [资源文件的分类](basic-resource-file-categories.md) - [SysCap说明](syscap.md) diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md index eaec4b89c7e510cad40d6af970f59cbb0f051052..f080d2ba2f0f246e9a108c94e4fb12a40072a1ee 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md +++ b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md @@ -1,167 +1,167 @@ -# 类型说明 +# 数据类型说明 ## 长度类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| length | string \| number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：
- px：逻辑尺寸单位。
- fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 | -| percentage | string | 百分比尺寸单位，如“50%”。 | +| 名称 | 类型定义 | 描述 | +| ---------- | -------------------------- | ---------------------------------------- | +| length | string \| number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：
- px：逻辑尺寸单位。
- fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 | +| percentage | string | 百分比尺寸单位，如“50%”。 | ## 颜色类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | +| 名称 | 类型定义 | 描述 | +| ----- | --------------------- | ---------------------------------------- | | color | string \|颜色枚举字符串 | 用于描述颜色信息。
字符串格式如下：
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX格式：'\#rrggbb'，'\#aarrggbb'
- 枚举格式：'black'，'white'。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > JS脚本中不支持颜色枚举格式。 | **表1** 当前支持的颜色枚举 -| 枚举名称 | 对应颜色 | 颜色 | -| -------- | -------- | -------- | -| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) | -| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) | -| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | -| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) | -| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) | -| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) | -| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) | -| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) | -| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) | -| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) | -| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) | -| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) | -| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) | -| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) | -| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) | -| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) | -| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) | -| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) | -| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) | -| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) | -| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) | -| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) | -| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) | -| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) | -| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) | -| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) | -| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) | -| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) | -| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) | -| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) | -| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) | -| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) | -| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) | -| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) | -| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) | -| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) | -| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) | -| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) | -| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) | -| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) | -| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) | -| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) | -| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) | -| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) | -| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) | -| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) | -| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) | -| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) | -| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) | -| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) | -| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) | -| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) | -| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) | -| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) | -| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) | -| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) | -| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) | -| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) | -| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) | -| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) | -| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) | -| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) | -| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) | -| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) | -| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) | -| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) | -| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) | -| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) | -| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) | -| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) | +| 枚举名称 | 对应颜色 | 颜色 | +| -------------------- | -------- | ---------------------------------------- | +| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) | +| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) | +| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | +| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) | +| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) | +| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) | +| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) | +| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) | +| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) | +| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) | +| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) | +| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) | +| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) | +| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) | +| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) | +| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) | +| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) | +| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) | +| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) | +| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) | +| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) | +| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) | +| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) | +| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) | +| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) | +| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) | +| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) | +| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) | +| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) | +| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) | +| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) | +| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) | +| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) | +| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) | +| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) | +| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) | +| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) | +| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) | +| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) | +| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) | +| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) | +| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) | +| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) | +| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) | +| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) | +| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) | +| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) | +| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) | +| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) | +| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) | +| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) | +| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) | +| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) | +| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) | +| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) | +| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) | +| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) | +| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) | +| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) | +| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) | +| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) | +| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) | +| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) | +| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) | +| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) | +| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) | +| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) | +| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) | +| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) | +| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) | | lightgoldenrodyellow | \#fafad2 | ![zh-cn_image_0000001127125218](figures/zh-cn_image_0000001127125218.png) | -| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) | -| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) | -| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) | -| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) | -| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) | -| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) | -| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) | -| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) | -| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) | -| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) | -| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) | -| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) | -| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) | -| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) | -| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) | -| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) | -| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) | -| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) | -| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) | -| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) | -| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) | -| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) | -| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) | -| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) | -| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) | -| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) | -| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) | -| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) | -| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) | -| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) | -| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) | -| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) | -| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) | -| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) | -| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) | -| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) | -| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) | -| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) | -| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) | -| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) | -| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) | -| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) | -| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) | -| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) | -| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) | -| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) | -| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) | -| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) | -| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) | -| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) | -| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) | -| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) | -| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) | -| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) | -| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) | -| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) | -| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) | -| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) | -| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) | -| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) | -| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) | -| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) | -| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) | -| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) | -| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) | -| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) | -| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) | -| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) | -| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) | -| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) | -| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) | -| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) | -| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) | -| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) | -| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) | -| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) | +| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) | +| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) | +| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) | +| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) | +| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) | +| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) | +| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) | +| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) | +| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) | +| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) | +| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) | +| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) | +| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) | +| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) | +| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) | +| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) | +| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) | +| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) | +| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) | +| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) | +| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) | +| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) | +| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) | +| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) | +| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) | +| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) | +| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) | +| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) | +| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) | +| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) | +| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) | +| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) | +| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) | +| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) | +| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) | +| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) | +| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) | +| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) | +| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) | +| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) | +| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) | +| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) | +| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) | +| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) | +| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) | +| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) | +| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) | +| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) | +| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) | +| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) | +| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) | +| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) | +| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) | +| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) | +| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) | +| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) | +| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) | +| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) | +| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) | +| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) | +| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) | +| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) | +| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) | +| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) | +| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) | +| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) | +| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) | +| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) | +| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) | +| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) | +| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) | +| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) | +| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) | +| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) | +| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) | +| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) | diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 476b00bf7175aa04eb12cc36ffae87f114df7e12..e1a56ca5da6a285cff07f8f1f145a424d7e31f99 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,131 +1,132 @@ # 基于TS扩展的声明式开发范式 -- 组件 - - 通用 - - 通用事件 - - [点击事件](ts-universal-events-click.md) - - [触摸事件](ts-universal-events-touch.md) - - [挂载卸载事件](ts-universal-events-show-hide.md) - - [拖拽事件](ts-universal-events-drag-drop.md) - - [按键事件](ts-universal-events-key.md) - - [焦点事件](ts-universal-focus-event.md) - - [鼠标事件](ts-universal-mouse-key.md) - - [组件区域变化事件](ts-universal-component-area-change-event.md) - - 通用属性 - - [尺寸设置](ts-universal-attributes-size.md) - - [位置设置](ts-universal-attributes-location.md) - - [布局约束](ts-universal-attributes-layout-constraints.md) - - [Flex布局](ts-universal-attributes-flex-layout.md) - - [边框设置](ts-universal-attributes-border.md) - - [背景设置](ts-universal-attributes-background.md) - - [透明度设置](ts-universal-attributes-opacity.md) - - [显隐控制](ts-universal-attributes-visibility.md) - - [禁用控制](ts-universal-attributes-enable.md) - - [浮层](ts-universal-attributes-overlay.md) - - [Z序控制](ts-universal-attributes-z-order.md) - - [图形变换](ts-universal-attributes-transformation.md) - - [图像效果](ts-universal-attributes-image-effect.md) - - [形状裁剪](ts-universal-attributes-sharp-clipping.md) - - [文本样式设置](ts-universal-attributes-text-style.md) - - [栅格设置](ts-universal-attributes-grid.md) - - [颜色渐变](ts-universal-attributes-gradient-color.md) - - [Popup控制](ts-universal-attributes-popup.md) - - [Menu控制](ts-universal-attributes-menu.md) - - [点击控制](ts-universal-attributes-click.md) - - [焦点控制](ts-universal-attributes-focus.md) - - [悬浮态效果](ts-universal-attributes-hover-effect.md) - - [组件标识](ts-universal-attributes-component-id.md) - - [触摸热区设置](ts-universal-attributes-touch-target.md) - - [多态样式](ts-universal-attributes-polymorphic-style.md) - - 手势处理 - - [绑定手势方法](ts-gesture-settings.md) - - 基础手势 - - [TapGesture](ts-basic-gestures-tapgesture.md) - - [LongPressGesture](ts-basic-gestures-longpressgesture.md) - - [PanGesture](ts-basic-gestures-pangesture.md) - - [PinchGesture](ts-basic-gestures-pinchgesture.md) - - [RotationGesture](ts-basic-gestures-rotationgesture.md) - - [SwipeGesture](ts-basic-gestures-swipegesture.md) - - [组合手势](ts-combined-gestures.md) - - 基础组件 - - [Blank](ts-basic-components-blank.md) - - [Button](ts-basic-components-button.md) - - [Checkbox](ts-basic-components-checkbox.md) - - [CheckboxGroup](ts-basic-components-checkboxgroup.md) - - [DataPanel](ts-basic-components-datapanel.md) - - [DatePicker](ts-basic-components-datepicker.md) - - [Divider](ts-basic-components-divider.md) - - [Gauge](ts-basic-components-gauge.md) - - [Image](ts-basic-components-image.md) - - [ImageAnimator](ts-basic-components-imageanimator.md) - - [LoadingProgress](ts-basic-components-loadingprogress.md) - - [Marquee](ts-basic-components-marquee.md) - - [Navigation](ts-basic-components-navigation.md) - - [Progress](ts-basic-components-progress.md) - - [QRCode](ts-basic-components-qrcode.md) - - [Radio](ts-basic-components-radio.md) - - [Rating](ts-basic-components-rating.md) - - [RichText](ts-basic-components-richtext.md) - - [ScrollBar](ts-basic-components-scrollbar.md) - - [Search](ts-basic-components-search.md) - - [Select](ts-basic-components-select.md) - - [Slider](ts-basic-components-slider.md) - - [Span](ts-basic-components-span.md) - - [Stepper](ts-basic-components-stepper.md) - - [StepperItem](ts-basic-components-stepperitem.md) - - [Text](ts-basic-components-text.md) - - [TextArea](ts-basic-components-textarea.md) - - [TextClock](ts-basic-components-textclock.md) - - [TextInput](ts-basic-components-textinput.md) - - [TextPicker](ts-basic-components-textpicker.md) - - [TextTimer](ts-basic-components-texttimer.md) - - [TimePicker](ts-basic-components-timepicker.md) - - [Toggle](ts-basic-components-toggle.md) - - [Web](ts-basic-components-web.md) - - [Xcomponent](ts-basic-components-xcomponent.md) - - 容器组件 - - [AlphabetIndexer](ts-container-alphabet-indexer.md) - - [Badge](ts-container-badge.md) - - [Column](ts-container-column.md) - - [ColumnSplit](ts-container-columnsplit.md) - - [Counter](ts-container-counter.md) - - [Flex](ts-container-flex.md) - - [GridContainer](ts-container-gridcontainer.md) - - [Grid](ts-container-grid.md) - - [GridItem](ts-container-griditem.md) - - [List](ts-container-list.md) - - [ListItem](ts-container-listitem.md) - - [Navigator](ts-container-navigator.md) - - [Panel](ts-container-panel.md) - - [Refresh](ts-container-refresh.md) - - [Row](ts-container-row.md) - - [RowSplit](ts-container-rowsplit.md) - - [Scroll](ts-container-scroll.md) - - [SideBarContainer](ts-container-sidebarcontainer.md) - - [Stack](ts-container-stack.md) - - [Swiper](ts-container-swiper.md) - - [Tabs](ts-container-tabs.md) - - [TabContent](ts-container-tabcontent.md) - - 媒体组件 - - [Video](ts-media-components-video.md) - - 绘制组件 - - [Circle](ts-drawing-components-circle.md) - - [Ellipse](ts-drawing-components-ellipse.md) - - [Line](ts-drawing-components-line.md) - - [Polyline](ts-drawing-components-polyline.md) - - [Polygon](ts-drawing-components-polygon.md) - - [Path](ts-drawing-components-path.md) - - [Rect](ts-drawing-components-rect.md) - - [Shape](ts-drawing-components-shape.md) - - 画布组件 - - [Canvas](ts-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) - - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) - - [Lottie](ts-components-canvas-lottie.md) - - [Path2D对象](ts-components-canvas-path2d.md) - - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) - - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) - - [ImageData对象](ts-components-canvas-imagedata.md) +- 组件通用信息 + - 通用事件 + - [点击事件](ts-universal-events-click.md) + - [触摸事件](ts-universal-events-touch.md) + - [挂载卸载事件](ts-universal-events-show-hide.md) + - [拖拽事件](ts-universal-events-drag-drop.md) + - [按键事件](ts-universal-events-key.md) + - [焦点事件](ts-universal-focus-event.md) + - [鼠标事件](ts-universal-mouse-key.md) + - [组件区域变化事件](ts-universal-component-area-change-event.md) + - 通用属性 + - [尺寸设置](ts-universal-attributes-size.md) + - [位置设置](ts-universal-attributes-location.md) + - [布局约束](ts-universal-attributes-layout-constraints.md) + - [Flex布局](ts-universal-attributes-flex-layout.md) + - [边框设置](ts-universal-attributes-border.md) + - [背景设置](ts-universal-attributes-background.md) + - [透明度设置](ts-universal-attributes-opacity.md) + - [显隐控制](ts-universal-attributes-visibility.md) + - [禁用控制](ts-universal-attributes-enable.md) + - [浮层](ts-universal-attributes-overlay.md) + - [Z序控制](ts-universal-attributes-z-order.md) + - [图形变换](ts-universal-attributes-transformation.md) + - [图像效果](ts-universal-attributes-image-effect.md) + - [形状裁剪](ts-universal-attributes-sharp-clipping.md) + - [文本样式设置](ts-universal-attributes-text-style.md) + - [栅格设置](ts-universal-attributes-grid.md) + - [颜色渐变](ts-universal-attributes-gradient-color.md) + - [Popup控制](ts-universal-attributes-popup.md) + - [Menu控制](ts-universal-attributes-menu.md) + - [点击控制](ts-universal-attributes-click.md) + - [焦点控制](ts-universal-attributes-focus.md) + - [悬浮态效果](ts-universal-attributes-hover-effect.md) + - [组件标识](ts-universal-attributes-component-id.md) + - [触摸热区设置](ts-universal-attributes-touch-target.md) + - [多态样式](ts-universal-attributes-polymorphic-style.md) + - 手势处理 + - [绑定手势方法](ts-gesture-settings.md) + - 基础手势 + - [TapGesture](ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-basic-gestures-rotationgesture.md) + - [SwipeGesture](ts-basic-gestures-swipegesture.md) + - [组合手势](ts-combined-gestures.md) +- 基础组件 + - [Blank](ts-basic-components-blank.md) + - [Button](ts-basic-components-button.md) + - [Checkbox](ts-basic-components-checkbox.md) + - [CheckboxGroup](ts-basic-components-checkboxgroup.md) + - [DataPanel](ts-basic-components-datapanel.md) + - [DatePicker](ts-basic-components-datepicker.md) + - [Divider](ts-basic-components-divider.md) + - [Gauge](ts-basic-components-gauge.md) + - [Image](ts-basic-components-image.md) + - [ImageAnimator](ts-basic-components-imageanimator.md) + - [LoadingProgress](ts-basic-components-loadingprogress.md) + - [Marquee](ts-basic-components-marquee.md) + - [Navigation](ts-basic-components-navigation.md) + - [Progress](ts-basic-components-progress.md) + - [QRCode](ts-basic-components-qrcode.md) + - [Radio](ts-basic-components-radio.md) + - [Rating](ts-basic-components-rating.md) + - [RichText](ts-basic-components-richtext.md) + - [ScrollBar](ts-basic-components-scrollbar.md) + - [Search](ts-basic-components-search.md) + - [Select](ts-basic-components-select.md) + - [Slider](ts-basic-components-slider.md) + - [Span](ts-basic-components-span.md) + - [Stepper](ts-basic-components-stepper.md) + - [StepperItem](ts-basic-components-stepperitem.md) + - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextClock](ts-basic-components-textclock.md) + - [TextInput](ts-basic-components-textinput.md) + - [TextPicker](ts-basic-components-textpicker.md) + - [TextTimer](ts-basic-components-texttimer.md) + - [TimePicker](ts-basic-components-timepicker.md) + - [Toggle](ts-basic-components-toggle.md) + - [Web](ts-basic-components-web.md) + - [Xcomponent](ts-basic-components-xcomponent.md) +- 容器组件 + - [AlphabetIndexer](ts-container-alphabet-indexer.md) + - [Badge](ts-container-badge.md) + - [Column](ts-container-column.md) + - [ColumnSplit](ts-container-columnsplit.md) + - [Counter](ts-container-counter.md) + - [Flex](ts-container-flex.md) + - [GridContainer](ts-container-gridcontainer.md) + - [Grid](ts-container-grid.md) + - [GridItem](ts-container-griditem.md) + - [List](ts-container-list.md) + - [ListItem](ts-container-listitem.md) + - [Navigator](ts-container-navigator.md) + - [Panel](ts-container-panel.md) + - [Refresh](ts-container-refresh.md) + - [Row](ts-container-row.md) + - [RowSplit](ts-container-rowsplit.md) + - [Scroll](ts-container-scroll.md) + - [SideBarContainer](ts-container-sidebarcontainer.md) + - [Stack](ts-container-stack.md) + - [Swiper](ts-container-swiper.md) + - [Tabs](ts-container-tabs.md) + - [TabContent](ts-container-tabcontent.md) +- 媒体组件 + - [Video](ts-media-components-video.md) +- 绘制组件 + - [Circle](ts-drawing-components-circle.md) + - [Ellipse](ts-drawing-components-ellipse.md) + - [Line](ts-drawing-components-line.md) + - [Polyline](ts-drawing-components-polyline.md) + - [Polygon](ts-drawing-components-polygon.md) + - [Path](ts-drawing-components-path.md) + - [Rect](ts-drawing-components-rect.md) + - [Shape](ts-drawing-components-shape.md) +- 画布组件 + - [Canvas](ts-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) + - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - [Path2D对象](ts-components-canvas-path2d.md) + - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) + - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) + - [ImageData对象](ts-components-canvas-imagedata.md) + + - 动画 - [属性动画](ts-animatorproperty.md) - [显式动画](ts-explicit-animation.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 762ed8031b87fcb5f3a165b59b7bff813cdd0d02..dcad1ecba1c1713c9ce3a1edf53471cb95ced229 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -12,9 +12,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | + | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | ### RenderingContextSettings @@ -24,33 +24,33 @@ RenderingContextSettings(antialias?: bool) 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | --------- | ---- | ---- | ----- | ---------------- | + | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | ## 属性 -| 名称 | 类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | -| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | -| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | -| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | -| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | -| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | -| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | -| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | -| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | -| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | -| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | -| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | -| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | -| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | -| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | +| 名称 | 类型 | 默认值 | 描述 | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | +| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | +| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | +| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | +| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | +| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | +| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | +| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | +| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | +| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 @@ -427,19 +427,19 @@ struct LineDashOffset { ### globalCompositeOperation -| 名称 | 描述 | -| -------- | -------- | -| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | -| source-atop | 在现有绘制内容顶部显示新绘制内容。 | -| source-in | 在现有绘制内容中显示新绘制内容。 | -| source-out | 在现有绘制内容之外显示新绘制内容。 | -| destination-over | 在新绘制内容上方显示现有绘制内容。 | -| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | -| destination-in | 在新绘制内容中显示现有绘制内容。 | -| destination-out | 在新绘制内容外显示现有绘制内容。 | -| lighter | 显示新绘制内容和现有绘制内容。 | -| copy | 显示新绘制内容而忽略现有绘制内容。 | -| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | +| 名称 | 描述 | +| ---------------- | ------------------------ | +| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | +| source-atop | 在现有绘制内容顶部显示新绘制内容。 | +| source-in | 在现有绘制内容中显示新绘制内容。 | +| source-out | 在现有绘制内容之外显示新绘制内容。 | +| destination-over | 在新绘制内容上方显示现有绘制内容。 | +| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | +| destination-in | 在新绘制内容中显示现有绘制内容。 | +| destination-out | 在新绘制内容外显示现有绘制内容。 | +| lighter | 显示新绘制内容和现有绘制内容。 | +| copy | 显示新绘制内容而忽略现有绘制内容。 | +| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | ``` @Entry @@ -641,12 +641,12 @@ fillRect(x: number, y: number, w: number, h: number): void 填充一个矩形。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | - | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ------ | ------ | ---- | ---- | ------------- | + | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | + | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | - 示例 ``` @@ -682,12 +682,12 @@ strokeRect(x: number, y: number, w: number, h: number): void 绘制具有边框的矩形，矩形内部不填充。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ------ | ------ | ---- | ---- | ------------ | + | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | - 示例 ``` @@ -722,12 +722,12 @@ clearRect(x: number, y: number, w: number, h: number): void 删除指定区域内的绘制内容。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | + | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | - 示例 ``` @@ -764,11 +764,11 @@ fillText(text: string, x: number, y: number): void 绘制填充类文本。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ---- | ------ | ---- | ---- | --------------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - 示例 ``` @@ -804,11 +804,11 @@ strokeText(text: string, x: number, y: number): void 绘制描边类文本。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | --------------- | + | text | string | 是 | “” | 需要绘制的文本内容。 | + | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | + | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - 示例 ``` @@ -844,19 +844,19 @@ measureText(text: string): TextMetrics 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | text | string | 是 | "" | 需要进行测量的文本。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ---- | ------ | ---- | ---- | ---------- | + | text | string | 是 | "" | 需要进行测量的文本。 | - 返回值 - | 类型 | 说明 | - | -------- | -------- | - | TextMetrics | 文本的尺寸信息 | + | 类型 | 说明 | + | ----------- | ------- | + | TextMetrics | 文本的尺寸信息 | - TextMetrics类型描述 - | 属性 | 类型 | 描述 | - | -------- | -------- | -------- | - | width | number | 字符串的宽度。 | + | 属性 | 类型 | 描述 | + | ----- | ------ | ------- | + | width | number | 字符串的宽度。 | - 示例 ``` @@ -893,9 +893,9 @@ stroke(path?: Path2D): void 进行边框绘制操作。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ---------------------------------------- | ---- | ---- | ------------ | + | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | - 示例 ``` @@ -904,7 +904,7 @@ stroke(path?: Path2D): void 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) @@ -940,7 +940,7 @@ beginPath(): void struct BeginPath { 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) @@ -972,10 +972,10 @@ moveTo(x: number, y: number): void 路径从当前点移动到指定点。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ---- | ------ | ---- | ---- | --------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | - 示例 ``` @@ -984,7 +984,7 @@ moveTo(x: number, y: number): void struct MoveTo { 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) @@ -1014,10 +1014,10 @@ lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | --------- | + | x | number | 是 | 0 | 指定位置的x坐标。 | + | y | number | 是 | 0 | 指定位置的y坐标。 | - 示例 ``` @@ -1026,7 +1026,7 @@ lineTo(x: number, y: number): void struct LineTo { 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) @@ -1062,7 +1062,7 @@ closePath(): void struct ClosePath { 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) @@ -1094,10 +1094,10 @@ createPattern(image: ImageBitmap, repetition: string): void 通过指定图像和重复方式创建图片填充的模板。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | - | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | + | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | - 示例 ``` @@ -1107,7 +1107,7 @@ createPattern(image: ImageBitmap, repetition: string): void private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1136,14 +1136,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, 创建三次贝赛尔曲线的路径。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | - | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | - | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | - | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | - | x | number | 是 | 0 | 路径结束时的x坐标值。 | - | y | number | 是 | 0 | 路径结束时的y坐标值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | -------------- | + | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | - 示例 ``` @@ -1152,7 +1152,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, struct BezierCurveTo { 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) @@ -1182,12 +1182,12 @@ 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坐标值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | ----------- | + | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | + | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | + | x | number | 是 | 0 | 路径结束时的x坐标值。 | + | y | number | 是 | 0 | 路径结束时的y坐标值。 | - 示例 ``` @@ -1225,14 +1225,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, 绘制弧线路径。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 弧线圆心的x坐标值。 | - | y | number | 是 | 0 | 弧线圆心的y坐标值。 | - | radius | number | 是 | 0 | 弧线的圆半径。 | - | startAngle | number | 是 | 0 | 弧线的起始弧度。 | - | endAngle | number | 是 | 0 | 弧线的终止弧度。 | - | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------------- | ------- | ---- | ----- | ---------- | + | x | number | 是 | 0 | 弧线圆心的x坐标值。 | + | y | number | 是 | 0 | 弧线圆心的y坐标值。 | + | radius | number | 是 | 0 | 弧线的圆半径。 | + | startAngle | number | 是 | 0 | 弧线的起始弧度。 | + | endAngle | number | 是 | 0 | 弧线的终止弧度。 | + | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | - 示例 ``` @@ -1241,7 +1241,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, 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) @@ -1270,13 +1270,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | - | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | - | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | - | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | - | radius | number | 是 | 0 | 圆弧的圆半径值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | --------------- | + | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 是 | 0 | 圆弧的圆半径值。 | - 示例 ``` @@ -1285,7 +1285,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void struct ArcTo { 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) @@ -1314,16 +1314,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number 在规定的矩形区域绘制一个椭圆。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | - | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | - | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | - | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | - | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | - | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | - | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | - | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ------------- | ------- | ---- | ----- | ----------------- | + | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | + | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | + | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | + | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | + | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | + | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | + | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | + | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | - 示例 @@ -1333,7 +1333,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number 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) @@ -1351,7 +1351,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number } } ``` - + ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png) @@ -1362,12 +1362,12 @@ rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | + | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | + | width | number | 是 | 0 | 指定矩形的宽度。 | + | height | number | 是 | 0 | 指定矩形的高度。 | - 示例 ``` @@ -1376,7 +1376,7 @@ rect(x: number, y: number, width: number, height: number): void 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) @@ -1410,7 +1410,7 @@ fill(): void struct Fill { 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) @@ -1444,7 +1444,7 @@ clip(): void struct Clip { 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) @@ -1464,7 +1464,7 @@ clip(): void } } ``` - + ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) @@ -1475,9 +1475,9 @@ rotate(rotate: number): void 针对当前坐标轴进行顺时针旋转。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ---------------------------------------- | + | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | - 示例 ``` @@ -1486,7 +1486,7 @@ rotate(rotate: number): void struct Rotate { 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) @@ -1514,10 +1514,10 @@ scale(x: number, y: number): void 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 设置水平方向的缩放值。 | - | y | number | 是 | 0 | 设置垂直方向的缩放值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | ----------- | + | x | number | 是 | 0 | 设置水平方向的缩放值。 | + | y | number | 是 | 0 | 设置垂直方向的缩放值。 | - 示例 ``` @@ -1526,7 +1526,7 @@ scale(x: number, y: number): void struct Scale { 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) @@ -1556,20 +1556,20 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： -> +> > - x' = scaleX \* x + skewY \* y + translateX -> +> > - y' = skewX \* x + scaleY \* y + translateY - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---------- | ------ | ---- | ---- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | - 示例 ``` @@ -1578,7 +1578,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 struct Transform { 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) @@ -1612,14 +1612,14 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---------- | ------ | ---- | ---- | -------- | + | scaleX | number | 是 | 0 | 指定水平缩放值。 | + | skewX | number | 是 | 0 | 指定水平倾斜值。 | + | skewY | number | 是 | 0 | 指定垂直倾斜值。 | + | scaleY | number | 是 | 0 | 指定垂直缩放值。 | + | translateX | number | 是 | 0 | 指定水平移动值。 | + | translateY | number | 是 | 0 | 指定垂直移动值。 | - 示例 ``` @@ -1628,7 +1628,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() struct SetTransform { 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) @@ -1659,10 +1659,10 @@ translate(x: number, y: number): void 移动当前坐标系的原点。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 设置水平平移量。 | - | y | number | 是 | 0 | 设置竖直平移量。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | -------- | + | x | number | 是 | 0 | 设置水平平移量。 | + | y | number | 是 | 0 | 设置竖直平移量。 | - 示例 ``` @@ -1671,7 +1671,7 @@ translate(x: number, y: number): void struct Translate { 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) @@ -1704,17 +1704,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, 进行图像绘制。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | - | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | - | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | - | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dWidth | number | 否 | 0 | 绘制区域的宽度。 | - | dHeight | number | 否 | 0 | 绘制区域的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | + | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | + | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | + | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | + | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | + | dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | + | dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | - 示例 @@ -1751,10 +1751,10 @@ createImageData(width: number, height: number): Object 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 - 参数 - | 参数 | 类型 | 必填 | 默认 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | number | 是 | 0 | ImageData的宽度。 | - | height | number | 是 | 0 | ImageData的高度。 | + | 参数 | 类型 | 必填 | 默认 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | width | number | 是 | 0 | ImageData的宽度。 | + | height | number | 是 | 0 | ImageData的高度。 | ### createImageData @@ -1764,9 +1764,9 @@ createImageData(imageData: Object): Object 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 - 参数 - | 参数 | 类型 | 必填 | 默认 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | imagedata | Object | 是 | null | 复制现有的ImageData对象。 | + | 参数 | 类型 | 必填 | 默认 | 描述 | + | --------- | ------ | ---- | ---- | ----------------- | + | imagedata | Object | 是 | null | 复制现有的ImageData对象。 | ### getPixelMap @@ -1774,12 +1774,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | --------------- | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | ### getImageData @@ -1787,12 +1787,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | --------------- | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | ### putImageData @@ -1802,15 +1802,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | - | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | - | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | - | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | - | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | - | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | - | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ----------- | ------ | ---- | ------------ | ----------------------------- | + | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | + | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | + | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | + | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | + | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | + | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | + | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | - 示例 ``` @@ -1819,7 +1819,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? struct PutImageData { 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) @@ -1859,7 +1859,7 @@ restore(): void 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) @@ -1890,7 +1890,7 @@ save(): void 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) @@ -1915,12 +1915,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 创建一个线性渐变色。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x0 | number | 是 | 0 | 起点的x轴坐标。 | - | y0 | number | 是 | 0 | 起点的y轴坐标。 | - | x1 | number | 是 | 0 | 终点的x轴坐标。 | - | y1 | number | 是 | 0 | 终点的y轴坐标。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | -------- | + | x0 | number | 是 | 0 | 起点的x轴坐标。 | + | y0 | number | 是 | 0 | 起点的y轴坐标。 | + | x1 | number | 是 | 0 | 终点的x轴坐标。 | + | y1 | number | 是 | 0 | 终点的y轴坐标。 | - 示例 ``` @@ -1961,14 +1961,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, 创建一个径向渐变色。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | - | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | - | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | - | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | - | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | - | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ---- | ------ | ---- | ---- | ----------------- | + | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | + | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | + | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | + | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | + | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | + | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | - 示例 ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 99a01941c43678e3fb87a819bee8d48ee46a16ae..0a44ddc144d2b368ce4d315bd94c2070e9376aea 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -21,44 +21,44 @@ Swiper(value:{controller?: SwiperController}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | ------------------------------------- | ---- | ---- | -------------------- | + | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | -| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | -| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | -| indicator | boolean | true | 是否启用导航点指示器。 | -| loop | boolean | true | 是否开启循环。 | -| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | -| vertical | boolean | false | 是否为纵向滑动。 | -| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | -| cachedCount8+ | number | 1 | 设置预加载子组件个数。 | -| disableSwipe8+ | boolean | false | 禁用组件滑动切换功能。 | -| curve8+ | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | -| indicatorStyle8+| {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - |设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- | +| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | +| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | +| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | +| indicator | boolean | true | 是否启用导航点指示器。 | +| loop | boolean | true | 是否开启循环。
设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 | +| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | +| vertical | boolean | false | 是否为纵向滑动。 | +| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | +| cachedCount8+ | number | 1 | 设置预加载子组件个数。 | +| disableSwipe8+ | boolean | false | 禁用组件滑动切换功能。 | +| curve8+ | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | +| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - | 设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 | ## SwiperController Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 -| 接口名称 | 功能描述 | -| -------- | -------- | -| showNext():void | 翻至下一页。 | -| showPrevious():void | 翻至上一页。 | +| 接口名称 | 功能描述 | +| ------------------- | ------ | +| showNext():void | 翻至下一页。 | +| showPrevious():void | 翻至上一页。 | ## 事件 -| 名称 | 功能描述 | -| -------- | -------- | -| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 | +| 名称 | 功能描述 | +| ---------------------------------------- | ------------------ | +| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 | ## 示例 diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index 96ecee545b855d4247dae7ff15608cca6a327744..4bf7813015ba52ac703389a86ac749c9e1372330 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -80,10 +80,9 @@ - [目录结构](ts-framework-directory.md) - [应用代码文件访问规则](ts-framework-file-access-rules.md) - [js标签配置](ts-framework-js-tag.md) - - 资源访问 - - [访问应用资源](ts-application-resource-access.md) - - [访问系统资源](ts-system-resource-access.md) - - [媒体资源类型说明](ts-media-resource-type.md) + - 资源管理 + - [资源文件的分类](ui-ts-basic-resource-file-categories.md) + - [资源访问](ts-resource-access.md) - [像素单位](ts-pixel-units.md) - [类型定义](ts-types.md) - 声明式语法 diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-1.png b/zh-cn/application-dev/ui/figures/create-resource-file-1.png new file mode 100644 index 0000000000000000000000000000000000000000..a6d82caac558cd58b78aba3014b6ac60148f6bc8 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-1.png differ diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-2.png b/zh-cn/application-dev/ui/figures/create-resource-file-2.png new file mode 100644 index 0000000000000000000000000000000000000000..b4d23e8dc15bafbb08ca691575ce2ea9fe989e91 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-2.png differ diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-3.png b/zh-cn/application-dev/ui/figures/create-resource-file-3.png new file mode 100644 index 0000000000000000000000000000000000000000..566653c5e49753e1f04d0d6b5b5c3e931f4354b5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-3.png differ diff --git a/zh-cn/application-dev/ui/ts-media-resource-type.md b/zh-cn/application-dev/ui/ts-media-resource-type.md deleted file mode 100644 index 10be60e4aff925fe9be48b23f3d02a613052fa2b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-media-resource-type.md +++ /dev/null @@ -1,23 +0,0 @@ -# 媒体资源类型说明 - - - -- 图片资源类型说明 - | 格式 | 文件后缀名 | - | -------- | -------- | - | JPEG | .jpg | - | PNG | .png | - | GIF | .gif | - | SVG | .svg | - | WEBP | .webp | - | BMP | .bmp | - -- 音视频资源类型说明 - | 格式 | 支持的文件类型 | - | -------- | -------- | - | H.263 | .3gp
.mp4 | - | H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | - | MPEG-4 SP | .3gp | - | VP8 | .webm
.mkv | - - diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md similarity index 50% rename from zh-cn/application-dev/ui/ts-application-resource-access.md rename to zh-cn/application-dev/ui/ts-resource-access.md index bcf4f33544def6213f4acac60dcae451ebea944c..b71591bbdca383c1302b4e10bb3f216e7abe1851 100644 --- a/zh-cn/application-dev/ui/ts-application-resource-access.md +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -1,56 +1,64 @@ -# 访问应用资源 +# 资源访问 -## 资源定义 +## 访问应用资源 -应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织： +在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 -- 一级目录为base目录、限定词目录以及rawfile目录 - - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。 - - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。 - - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。 +引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 -- 二级目录为资源目录 - - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。 - - 当前支持的文件和资源类型如下： - | 文件名 | 资源类型 | - | ----------- | ------------ | - | color.json | 颜色资源。 | - | float.json | 间距、圆角、字体等资源。 | - | string.json | 字符串资源。 | - | plural.json | 字符串资源。 | - | media目录 | 图片资源。 | +> **说明：** +> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 +在xxx.ets文件中，可以使用在resources目录中定义的资源。 -## 资源引用 +```ts +Text($r('app.string.string_hello')) + .fontColor($r('app.color.color_hello')) + .fontSize($r('app.float.font_hello')) +} -在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 +Text($r('app.string.string_world')) + .fontColor($r('app.color.color_world')) + .fontSize($r('app.float.font_world')) +} -引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 +Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s + .fontColor($r('app.color.color_hello')) + .fontSize($r('app.float.font_hello')) +} -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 +Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换 + .fontColor($r('app.color.color_world')) + .fontSize($r('app.float.font_world')) +} + +Image($r('app.media.my_background_image')) // media资源的$r引用 +Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片 -## 示例 +Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片 +``` +## 访问系统资源 -base目录中部分自定义资源如下所示： +系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。 +开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。 + +```ts +Text('Hello') + .fontColor($r('sys.color.ohos_id_color_emphasize')) + .fontSize($r('sys.float.ohos_id_text_size_headline1')) + .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) + .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) +Image($r('sys.media.ohos_app_icon')) + .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) + .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) + .height(200) + .width(300) ``` - resources - ├─ base - │ ├─ element - │ │ ├─ color.json - │ │ ├─ string.json - │ │ └─ float.json - │ └─ media - │ └─ my_background_image.png - └─ rawfile - ├─ test.png - └─ newDir - └─ newTest.png -``` +## 资源文件示例 color.json文件的内容如下： @@ -133,35 +141,7 @@ plural.json文件的内容如下： } ``` - 在ets文件中，可以使用在resources目录中定义的资源。 - -``` -Text($r('app.string.string_hello')) - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.string.string_world')) - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Text($r('app.string.message_arrive', "five of the clock")) //引用string资源，$r的第二个参数用于替换%s - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.plural.eat_apple', 5, 5)) //plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换 - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Image($r('app.media.my_background_image')) //media资源的$r引用 - -Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片 - -Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片 -``` + ## 相关实例 diff --git a/zh-cn/application-dev/ui/ts-system-resource-access.md b/zh-cn/application-dev/ui/ts-system-resource-access.md deleted file mode 100644 index ac9a956742e2238a338653c0360078a4c0161c66..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-system-resource-access.md +++ /dev/null @@ -1,20 +0,0 @@ -# 访问系统资源 - - -系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。 - - -开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。 - -``` -Text('Hello') - .fontColor($r('sys.color.ohos_id_color_emphasize')) - .fontSize($r('sys.float.ohos_id_text_size_headline1')) - .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) - .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) -Image($r('sys.media.ohos_app_icon')) - .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) - .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) - .height(200) - .width(300) -``` diff --git a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md similarity index 68% rename from zh-cn/application-dev/quick-start/basic-resource-file-categories.md rename to zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md index 7437de6729fa415b94876fee3d9fa50dcd2b1a65..8f704f9f69a725690f39e855e38a51477c6cfe1e 100644 --- a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md +++ b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md @@ -71,8 +71,62 @@ base目录与限定词目录下面可以创建资源组目录（包括element、 **表3** 资源组目录说明 -| 资源组目录 | 目录说明 | 资源文件 | -| --------- | ---------------------------------------- | ---------------------------------------- | -| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | -| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | -| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | +| 资源组目录 | 目录说明 | 资源文件 | +| ------- | ---------------------------------------- | ---------------------------------------- | +| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | +| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | +| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | + +### 媒体资源类型说明 + +表1 图片资源类型说明 + +| 格式 | 文件后缀名 | +| ---- | ----- | +| JPEG | .jpg | +| PNG | .png | +| GIF | .gif | +| SVG | .svg | +| WEBP | .webp | +| BMP | .bmp | + +表2 音视频资源类型说明 + +| 格式 | 支持的文件类型 | +| ------------------------------------ | --------------- | +| H.263 | .3gp
.mp4 | +| H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | +| MPEG-4 SP | .3gp | +| VP8 | .webm
.mkv | + +## 创建资源文件 + +在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。 + +同时，DevEco Studio也提供了创建资源目录和资源文件的界面。 + +- 创建资源目录及资源文件 + + 在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。 + + 文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。 + + 目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。 + + ![create-resource-file-1](figures/create-resource-file-1.png) + +- 创建资源目录 + + 在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。 + + 选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。 + + ![create-resource-file-2](figures/create-resource-file-2.png) + +- 创建资源文件 + + 在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。 + + 例如，在element目录下可新建Element Resource File。 + + ![create-resource-file-3](figures/create-resource-file-3.png) \ No newline at end of file