diff --git a/zh-cn/application-dev/reference/Readme-CN.md b/zh-cn/application-dev/reference/Readme-CN.md index 2fe3bc167f975b6fed0688e38fa631c2b8606d13..d6f15475f8fc82c182cc3acc258947389ffb4f49 100644 --- a/zh-cn/application-dev/reference/Readme-CN.md +++ b/zh-cn/application-dev/reference/Readme-CN.md @@ -1,7 +1,7 @@ # 开发参考 -- [组件参考（基于TS扩展的声明式开发范式）](arkui-ts/Readme-CN.md) -- [组件参考（基于JS扩展的类Web开发范式）](arkui-js/Readme-CN.md) +- [组件参考（基于eTS的声明式开发范式）](arkui-ts/Readme-CN.md) +- [组件参考（兼容JS的类Web开发范式）](arkui-js/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [接口参考（JS及TS API）](apis/Readme-CN.md) - 接口参考（Native API） diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index 18e7b78ced59bd69f28023df446b76b1c9d5ff6a..f69a30d4bc57b842f7b6041c6be3df9753a9a9c2 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -1,4 +1,4 @@ -# 基于JS扩展的类Web开发范式 +# 兼容JS的类Web开发范式 - 组件通用信息 - [通用属性](js-components-common-attributes.md) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index 45652c36949000bb41f628ec4d1cdc36c6e8f689..7eb222bd9a40ba46eab060932e5d9a36ae0386ea 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -1,6 +1,7 @@ # picker -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 @@ -31,7 +32,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------ | ---- | ---- | ---------------------------------------- | -| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | | selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置普通选择器的值。 | @@ -47,7 +48,7 @@ | selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期选择器的值。 | | lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | -| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | ### 时间选择器 @@ -59,7 +60,7 @@ | containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | | selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，
该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | ### 日期时间选择器 @@ -70,7 +71,7 @@ | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。
- 月日时分：MM-DD-HH-mm
- 年月日时分：YYYY-MM-DD-HH-mm
不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+lunar5+booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
说明：
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | | lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | @@ -82,7 +83,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------- | --------- | ---- | ---------------------------------------- | | columns | number | - | 是 | 设置多列文本选择器的列数。 | -| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。selectedArray[0,0,0,…]否设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。valueArray-否设置多列文本选择器的值，每一列被选中项对应的值构成的数组。使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 | | value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 | @@ -95,7 +96,7 @@ | -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | | text-color | <color> | - | 否 | 选择器的文本颜色。 | | font-size | <length> | - | 否 | 选择器的文本尺寸。 | -| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | letter-spacing | <length> | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | @@ -122,7 +123,7 @@ | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | ---------------------------------------- | -| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> month值范围为： 0（1月）~11（12月）。5+ | +| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
month值范围为： 0（1月）~11（12月）。5+ | | cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | @@ -171,7 +172,7 @@ + oncancel="textoncancel" class="pickertext"> 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 cf9074f1e24c2d81aa48be846f1f864d9ef88358..e48fce335e707b6458f0ae614900568f6a7695d4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,4 +1,4 @@ -# 基于TS扩展的声明式开发范式 +# 基于eTS的声明式开发范式 - 组件通用信息 - 通用事件 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 152ff182e77fc382f99a785de5ad2aa95194deb9..d1a50d55c72296d163d4619ece317b2cf5b01f81 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1,6 +1,7 @@ # CanvasRenderingContext2D对象 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -13,9 +14,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) **参数：** - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | ### RenderingContextSettings @@ -26,9 +27,9 @@ RenderingContextSettings(antialias?: boolean) **参数：** - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | --------- | ------- | ---- | ----- | ---------------- | - | antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| --------- | ------- | ---- | ----- | ---------------- | +| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | ## 属性 @@ -38,23 +39,23 @@ RenderingContextSettings(antialias?: boolean) | [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | | [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 设置描边的颜色。
- 类型为string时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
默认值：'butt'。 | -| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
默认值：'miter'。 | -| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
默认值：10。 | -| [font](#font) | string | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
默认值：'normal normal 14px sans-serif'。 | -| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。 | -| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
默认值：'alphabetic'。 | +| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
默认值：'butt'。 | +| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
默认值：'miter'。 | +| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
默认值：10。 | +| [font](#font) | string | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
默认值：'normal normal 14px sans-serif'。 | +| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。 | +| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
默认值：'alphabetic'。 | | [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | -| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。
默认值：0.0。 | +| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。
默认值：0.0。 | | [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。
默认值：'source-over'。 | -| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。
默认值：0.0。 | -| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 | +| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。
默认值：0.0。 | +| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 | | [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | | [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 +> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 ### fillStyle @@ -662,12 +663,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 | 指定矩形的高度。 | **示例：** @@ -706,12 +707,12 @@ strokeRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------ | - | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | ------------ | +| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -750,12 +751,12 @@ clearRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -794,15 +795,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void 绘制填充类文本。 -**参数：** - - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | - +**参数：** +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------------- | +| text | string | 是 | "" | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | **示例：** ```ts @@ -841,12 +839,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | ------ | ---- | ---- | --------------- | +| text | string | 是 | “” | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | +| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 | **示例：** @@ -886,33 +884,33 @@ measureText(text: string): TextMetrics **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | ---------- | - | text | string | 是 | "" | 需要进行测量的文本。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | ---------- | +| text | string | 是 | "" | 需要进行测量的文本。 | **返回值：** - | 类型 | 说明 | - | ----------- | ------- | - | TextMetrics | 文本的尺寸信息 | +| 类型 | 说明 | +| ----------- | ------- | +| TextMetrics | 文本的尺寸信息 | **TextMetrics类型描述:** - | 属性 | 类型 | 描述 | - | ----- | ------ | ------- | - | width | number | 字符串的宽度。 | - | height | number | 字符串的高度。 | - | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | - | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | - | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | - | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| - | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| - | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| - | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| - | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| - | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| - | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| - | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| +| 属性 | 类型 | 描述 | +| ------------------------ | ------ | ---------------------------------------- | +| width | number | 字符串的宽度。 | +| height | number | 字符串的高度。 | +| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | +| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | +| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | +| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。 | +| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。 | +| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。 | +| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。 | +| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。 | +| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。 | +| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。 | +| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。 | @@ -956,9 +954,9 @@ stroke(path?: Path2D): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ---------------------------------------- | ---- | ---- | ------------ | - | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ---------------------------------------- | ---- | ---- | ------------ | +| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | **示例：** @@ -1040,10 +1038,10 @@ moveTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1085,10 +1083,10 @@ lineTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1170,16 +1168,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | 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'。 | **返回值：**： - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | +| 类型 | 说明 | +| ------------------------------- | ----------------------- | +| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | **示例：** @@ -1221,14 +1219,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坐标值。 | **示例：** @@ -1270,12 +1268,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坐标值。 | **示例：** @@ -1317,14 +1315,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 | 弧线的终止弧度。 | - | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------------- | ------- | ---- | ----- | ---------- | +| x | number | 是 | 0 | 弧线圆心的x坐标值。 | +| y | number | 是 | 0 | 弧线圆心的y坐标值。 | +| radius | number | 是 | 0 | 弧线的圆半径。 | +| startAngle | number | 是 | 0 | 弧线的起始弧度。 | +| endAngle | number | 是 | 0 | 弧线的终止弧度。 | +| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | **示例：** @@ -1365,13 +1363,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 | 圆弧的圆半径值。 | **示例：** @@ -1412,16 +1410,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 | 椭圆绘制的结束点角度，以弧度表示。 | - | counterclockwise | 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 | 椭圆绘制的结束点角度，以弧度表示。 | +| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | **示例：** @@ -1462,12 +1460,12 @@ rect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -1507,9 +1505,9 @@ fill(fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | -------------- | ---- | --------- | ---------------------------------------- | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。 | **示例:** @@ -1548,10 +1546,10 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | path | Path2D | 是 | | Path2D填充路径。 | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | -------------- | ---- | --------- | ---------------------------------------- | +| path | Path2D | 是 | | Path2D填充路径。 | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。 | **示例:** @@ -1588,7 +1586,7 @@ struct Fill { .height('100%') } } - ``` +``` ![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png) @@ -1601,9 +1599,9 @@ clip(fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | -------------- | ---- | --------- | ---------------------------------------- | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。 | **示例:** @@ -1644,11 +1642,11 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | path | Path2D | 是 | - | Path2D剪切路径。 | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| - +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | -------------- | ---- | --------- | ---------------------------------------- | +| path | Path2D | 是 | - | Path2D剪切路径。 | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。 | + ### filter @@ -1659,9 +1657,9 @@ filter(filter: string): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------- | - | filter | string | 是 | - | 接受各类滤镜效果的函数。| +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------ | ---- | ---- | ------------ | +| filter | string | 是 | - | 接受各类滤镜效果的函数。 | ### getTransform @@ -1693,9 +1691,9 @@ rotate(angle: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ---------------------------------------- | - | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ----- | ------ | ---- | ---- | ---------------------------------------- | +| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | **示例：** @@ -1735,10 +1733,10 @@ scale(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------- | - | x | number | 是 | 0 | 设置水平方向的缩放值。 | - | y | number | 是 | 0 | 设置垂直方向的缩放值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ----------- | +| x | number | 是 | 0 | 设置水平方向的缩放值。 | +| y | number | 是 | 0 | 设置垂直方向的缩放值。 | **示例：** @@ -1786,14 +1784,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------------------- | +| a | number | 是 | 0 | scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 | skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 | translateX: 指定水平移动值。 | +| f | number | 是 | 0 | translateY: 指定垂直移动值。 | **示例：** @@ -1839,14 +1837,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------------------- | +| a | number | 是 | 0 | scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 | skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 | translateX: 指定水平移动值。 | +| f | number | 是 | 0 | translateY: 指定垂直移动值。 | **示例：** @@ -1894,10 +1892,10 @@ translate(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | -------- | - | x | number | 是 | 0 | 设置水平平移量。 | - | y | number | 是 | 0 | 设置竖直平移量。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------- | +| x | number | 是 | 0 | 设置水平平移量。 | +| y | number | 是 | 0 | 设置竖直平移量。 | **示例：** @@ -1942,17 +1940,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | 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坐标值。 | - | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | - | dh | 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坐标值。 | +| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | +| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | +| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | +| dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | +| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | +| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | **示例：** @@ -1993,10 +1991,10 @@ createImageData(sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | sw | number | 是 | 0 | ImageData的宽度。 | - | sh | number | 是 | 0 | ImageData的高度。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| ---- | ------ | ---- | ---- | ------------- | +| sw | number | 是 | 0 | ImageData的宽度。 | +| sh | number | 是 | 0 | ImageData的高度。 | ### createImageData @@ -2007,15 +2005,15 @@ createImageData(imageData: ImageData): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | --------- | ------ | ---- | ---- | ----------------- | - | imagedata | [ImageData](ts-components-canvas-imagebitmap.md)| 是 | null | 复制现有的ImageData对象。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| --------- | ---------------------------------------- | ---- | ---- | ----------------- | +| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 复制现有的ImageData对象。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。| +| 类型 | 说明 | +| ---------------------------------------- | -------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | ### getPixelMap @@ -2026,18 +2024,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | 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 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | +| 类型 | 说明 | +| ---------------------------------------- | ------------- | +| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | ### getImageData @@ -2047,18 +2045,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | 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 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | +| 类型 | 说明 | +| ---------------------------------------- | -------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | ### putImageData @@ -2071,15 +2069,15 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ----------- | ------ | ---- | ------------ | ----------------------------- | - | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | 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 | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 | +| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | +| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | +| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | +| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | +| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | +| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | **示例：** @@ -2125,8 +2123,8 @@ setLineDash(segments: number[]): void **参数：** -| 参数 | 类型 | 描述 | -| -------- | ----- | -------------------- | +| 参数 | 类型 | 描述 | +| -------- | -------- | ------------------- | | segments | number[] | 描述线段如何交替和线段间距长度的数组。 | **示例：** @@ -2167,8 +2165,8 @@ getLineDash(): number[] **返回值：** -| 类型 | 说明 | -| ----- | ------------------------ | +| 类型 | 说明 | +| -------- | ------------------------ | | number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 | **示例：** @@ -2210,9 +2208,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality) **参数：** -| 参数 | 类型 | 描述 | -| ------ | ----------- | ------------------ | -| quality |imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | +| 参数 | 类型 | 描述 | +| ------- | --------------------- | ---------------------------------------- | +| quality | imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | @@ -2224,9 +2222,9 @@ transferFromImageBitmap(bitmap: ImageBitmap): void **参数：** -| 参数 | 类型 | 描述 | -| ------ | ----------- | ------------------ | -| bitmap |[ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | +| 参数 | 类型 | 描述 | +| ------ | ---------------------------------------- | ------------------ | +| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | **示例：** @@ -2386,12 +2384,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轴坐标。 | **示例：** @@ -2435,14 +2433,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-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index b1bdbfba1a1595952094d573e1f452b0c2c8dd9e..0bf7187ad5d6a3d2c81a3662f6487f269ab27c44 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -14,7 +14,7 @@ | 名称 | 支持冒泡 | 功能描述 | | ---------------------------------------- | ---- | ---------------------------------------- | -| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 | +| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 | ## 示例 diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index a54003072d7028cca338ddc92c97e72c377bc65e..435fd6777edb98f96ab1502e28d4eeafe59ff9eb 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -1,7 +1,7 @@ # UI开发 - [方舟开发框架（ArkUI）概述](arkui-overview.md) -- 基于TS扩展的声明式开发范式 +- UI开发（基于eTS的声明式开发范式） - [概述](ui-ts-overview.md) - 框架说明 - 文件组织 @@ -71,7 +71,7 @@ - [构建食物分类Grid布局](ui-ts-building-category-grid-layout.md) - [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md) - [性能提升的推荐方案](ts-performance-improvement-recommendation.md) -- 基于JS扩展的类Web开发范式 +- UI开发（兼容JS的类Web开发范式） - [概述](ui-js-overview.md) - 框架说明 - [文件组织](js-framework-file.md) diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index e80deb47e22b89f623c2d13498222ea3845343fe..08e119eb28eaddd337a300875e53cefd6efdee3a 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -26,12 +26,12 @@ - 平台API通道：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 -- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。 +- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于eTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。 | 开发范式名称 | 简介 | 适用场景 | 适用人群 | | -------- | ---------------------------------------- | ---------------- | ------------------- | - | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | | 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | + | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md index ffc32f5b1b0b2c7c51fb17f919a5f93ea70a6fef..b132dc619ce4271d1cb31e1b95173dc481650c93 100644 --- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md +++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md @@ -3,9 +3,9 @@ 应用代码文件可通过如下方式访问： -- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。 +- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。 -- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。 +- 使用当前模块根路径引用代码文件，比如：common/utils/utils。 - 公共代码文件推荐放在**common**目录下。 @@ -13,7 +13,7 @@ ## 示例 ``` -import { FoodData, FoodList } from "../common/utils/utils.ets"; +import { FoodData, FoodList } from "../common/utils/utils"; @Entry @Component diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md index a048cb8911d454fbed5b4d3020de818370362f8d..d33fd6ddfcbd2773faa06aae992d18a817e605a9 100644 --- a/zh-cn/application-dev/ui/ui-js-component-tabs.md +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -8,21 +8,22 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 在pages/index目录下的hml文件中创建一个Tabs组件。 ``` - -
- - item1 - item2 - - -
- content1 -
-
- content2 -
- - + +
+ + + item1 + item2 + + +
+ content1 +
+
+ content2 +
+ +
``` diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index 89be29a238b9521c61b8bda3b12d855f3c3ca4da..f90e63188bef24b16926e69115f332bd91e03591 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -1,13 +1,13 @@ # 概述 -基于JS扩展的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 +兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 -请参考[基于JS扩展的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。 +请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。 ## 整体架构 -使用基于JS扩展的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 +使用兼容JS的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 @@ -32,7 +32,7 @@ ## 相关实例 -基于JS扩展的类Web开发范式的方舟开发框架，有以下相关实例可供参考： +兼容JS的类Web开发范式的方舟开发框架，有以下相关实例可供参考： - [`AtomicLayout`：原子布局（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout)