“d15bfabbd0da7ce4b872a9fe574f3f8cb0134e5f”上不存在“cmake/git@gitcode.net:s920243400/PaddleDetection.git”
提交 d892ddf4 编写于 作者: W wangjiangying

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into...

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into OpenHarmony-3.1-Release
# Screenshot # Screenshot
Provides APIs for you to set information such as the region to capture and the size of the screen region when capturing a screen. The **Screenshot** module provides APIs for you to set information such as the region to capture and the size of the screen region when capturing a screen.
> **NOTE** > **NOTE**
> >
...@@ -57,7 +57,7 @@ Describes the size of the screen region to capture. ...@@ -57,7 +57,7 @@ Describes the size of the screen region to capture.
save(options?: ScreenshotOptions, callback: AsyncCallback<image.PixelMap>): void save(options?: ScreenshotOptions, callback: AsyncCallback<image.PixelMap>): void
Takes a screenshot and saves it as a **PixelMap** object. This method uses a callback to return the result. Takes a screenshot and saves it as a **PixelMap** object. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core **System capability**: SystemCapability.WindowManager.WindowManager.Core
...@@ -67,7 +67,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal ...@@ -67,7 +67,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | --------------------------------------- | ---- | ------------------------------------------------------------ | | -------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
| options | [ScreenshotOptions](#screenshotoptions) | No | Consists of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set them separately.| | options | [ScreenshotOptions](#screenshotoptions) | No | Screenshot settings consist of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set the parameters separately.|
| callback | AsyncCallback<image.PixelMap> | Yes | Callback used to return a **PixelMap** object. | | callback | AsyncCallback<image.PixelMap> | Yes | Callback used to return a **PixelMap** object. |
**Example** **Example**
...@@ -98,7 +98,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal ...@@ -98,7 +98,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal
save(options?: ScreenshotOptions): Promise<image.PixelMap> save(options?: ScreenshotOptions): Promise<image.PixelMap>
Takes a screenshot and saves it as a **PixelMap** object. This method uses a promise to return the result. Takes a screenshot and saves it as a **PixelMap** object. This API uses a promise to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core **System capability**: SystemCapability.WindowManager.WindowManager.Core
...@@ -108,7 +108,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a pro ...@@ -108,7 +108,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a pro
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------- | --------------------------------------- | ---- | ------------------------------------------------------------ | | ------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
| options | [ScreenshotOptions](#screenshotoptions) | No | Consists of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set them separately.| | options | [ScreenshotOptions](#screenshotoptions) | No | Screenshot settings consist of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set the parameters separately.|
**Return value** **Return value**
......
...@@ -587,15 +587,3 @@ You can set multiple transform attributes at the same time to apply different tr ...@@ -587,15 +587,3 @@ You can set multiple transform attributes at the same time to apply different tr
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values. > - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
> >
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played. > - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
## Samples
The following samples are provided to help you better understand how to develop animations with the **transform** attribute:
- [`JsAnimation`: Animation App (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
- [`JsAnimationStyle`: JS Animation and Custom Font Styles (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
- [`Clock`: Clock (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
- [Animation Styles (JavaScaript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
- [Common Image Operations](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageJsDemo)
\ No newline at end of file
...@@ -19,18 +19,3 @@ Components can be classified into the following types based on their functions. ...@@ -19,18 +19,3 @@ Components can be classified into the following types based on their functions.
| Canvas | canvas | | Canvas | canvas |
| Grid | grid-container, grid-row, grid-col | | Grid | grid-container, grid-row, grid-col |
| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform | | SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |
## Samples
The following samples are provided to help you better understand how to develop components:
- [`JsPanel`: Content Display Panel (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`: Refresh Container (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`: User Registration (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`: Heart Rate Detection (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`: Badge (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [`JsVideo`: JsVideo (API 8)](https://gitee.com/openharmony/app_samples/tree/master/media/JsVideo)
- [Rating (JavaScript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
- [Simple Video Player](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
...@@ -320,10 +320,3 @@ export default { ...@@ -320,10 +320,3 @@ export default {
``` ```
![en-us_image_tab.gif](figures/en-us_image_tab.gif) ![en-us_image_tab.gif](figures/en-us_image_tab.gif)
## Samples
The following sample is provided to help you better understand how to develop the **<tabs>** component:
[`Tabs`: Tabs (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
...@@ -140,9 +140,3 @@ export default { ...@@ -140,9 +140,3 @@ export default {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**. > The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.
## Samples
The following sample is provided to help you better understand how to develop the **\<canvas>** component:
[`JsCanvas`: \<canvas> (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)
...@@ -616,8 +616,3 @@ export default { ...@@ -616,8 +616,3 @@ export default {
``` ```
![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif) ![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;chart&gt;** component:
[`Chart`: chart (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
\ No newline at end of file
...@@ -329,8 +329,3 @@ export default { ...@@ -329,8 +329,3 @@ export default {
![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif) ![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;dialog&gt;** component:
[`JsDialog`: JS Dialog Box (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
\ No newline at end of file
...@@ -319,8 +319,3 @@ export default { ...@@ -319,8 +319,3 @@ export default {
![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif) ![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;list&gt;** component:
[`JsList`: JSList Offerings (API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
...@@ -412,8 +412,3 @@ export default { ...@@ -412,8 +412,3 @@ export default {
``` ```
![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif) ![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;stepper&gt;** component:
[`StepNavigator`: StepNavigator (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
\ No newline at end of file
...@@ -369,8 +369,3 @@ export default { ...@@ -369,8 +369,3 @@ export default {
``` ```
![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif) ![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;swiper&gt;** component:
- [`Swiper`: Swiper (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
...@@ -287,8 +287,3 @@ export default { ...@@ -287,8 +287,3 @@ export default {
``` ```
![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif) ![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;text&gt;** component:
- [`JsTextComponents`: JavaScript Basic Components (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
...@@ -9,6 +9,5 @@ ...@@ -9,6 +9,5 @@
- 开发基础知识 - 开发基础知识
- [应用包结构说明(FA模型)](package-structure.md) - [应用包结构说明(FA模型)](package-structure.md)
- [应用包结构说明(Stage模型)](stage-structure.md) - [应用包结构说明(Stage模型)](stage-structure.md)
- [资源文件的分类](basic-resource-file-categories.md)
- [SysCap说明](syscap.md) - [SysCap说明](syscap.md)
# 基于JS扩展的类Web开发范式 # 基于JS扩展的类Web开发范式
- 组件 - 组件通用信息
- 通用
- [通用属性](js-components-common-attributes.md) - [通用属性](js-components-common-attributes.md)
- [通用样式](js-components-common-styles.md) - [通用样式](js-components-common-styles.md)
- [通用事件](js-components-common-events.md) - [通用事件](js-components-common-events.md)
...@@ -12,7 +11,7 @@ ...@@ -12,7 +11,7 @@
- [媒体查询](js-components-common-mediaquery.md) - [媒体查询](js-components-common-mediaquery.md)
- [自定义字体样式](js-components-common-customizing-font.md) - [自定义字体样式](js-components-common-customizing-font.md)
- [原子布局](js-components-common-atomic-layout.md) - [原子布局](js-components-common-atomic-layout.md)
- 容器组件 - 容器组件
- [badge](js-components-container-badge.md) - [badge](js-components-container-badge.md)
- [dialog](js-components-container-dialog.md) - [dialog](js-components-container-dialog.md)
- [div](js-components-container-div.md) - [div](js-components-container-div.md)
...@@ -30,7 +29,7 @@ ...@@ -30,7 +29,7 @@
- [tabs](js-components-container-tabs.md) - [tabs](js-components-container-tabs.md)
- [tab-bar](js-components-container-tab-bar.md) - [tab-bar](js-components-container-tab-bar.md)
- [tab-content](js-components-container-tab-content.md) - [tab-content](js-components-container-tab-content.md)
- 基础组件 - 基础组件
- [button](js-components-basic-button.md) - [button](js-components-basic-button.md)
- [chart](js-components-basic-chart.md) - [chart](js-components-basic-chart.md)
- [divider](js-components-basic-divider.md) - [divider](js-components-basic-divider.md)
...@@ -59,9 +58,9 @@ ...@@ -59,9 +58,9 @@
- [toolbar-item](js-components-basic-toolbar-item.md) - [toolbar-item](js-components-basic-toolbar-item.md)
- [toggle](js-components-basic-toggle.md) - [toggle](js-components-basic-toggle.md)
- [web](js-components-basic-web.md) - [web](js-components-basic-web.md)
- 媒体组件 - 媒体组件
- [video](js-components-media-video.md) - [video](js-components-media-video.md)
- 画布组件 - 画布组件
- [canvas组件](js-components-canvas-canvas.md) - [canvas组件](js-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
- [Image对象](js-components-canvas-image.md) - [Image对象](js-components-canvas-image.md)
...@@ -71,12 +70,12 @@ ...@@ -71,12 +70,12 @@
- [ImageBitmap对象](js-components-canvas-imagebitmap.md) - [ImageBitmap对象](js-components-canvas-imagebitmap.md)
- [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
- [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md) - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
- 栅格组件 - 栅格组件
- [基本概念](js-components-grid-basic-concepts.md) - [基本概念](js-components-grid-basic-concepts.md)
- [grid-container](js-components-grid-container.md) - [grid-container](js-components-grid-container.md)
- [grid-row](js-components-grid-row.md) - [grid-row](js-components-grid-row.md)
- [grid-col](js-components-grid-col.md) - [grid-col](js-components-grid-col.md)
- svg组件 - svg组件
- [通用属性](js-components-svg-common-attributes.md) - [通用属性](js-components-svg-common-attributes.md)
- [svg](js-components-svg.md) - [svg](js-components-svg.md)
- [rect](js-components-svg-rect.md) - [rect](js-components-svg-rect.md)
...@@ -92,6 +91,8 @@ ...@@ -92,6 +91,8 @@
- [animate](js-components-svg-animate.md) - [animate](js-components-svg-animate.md)
- [animateMotion](js-components-svg-animatemotion.md) - [animateMotion](js-components-svg-animatemotion.md)
- [animateTransform](js-components-svg-animatetransform.md) - [animateTransform](js-components-svg-animatetransform.md)
- 自定义组件 - 自定义组件
- [基本用法](js-components-custom-basic-usage.md) - [基本用法](js-components-custom-basic-usage.md)
- [自定义事件](js-components-custom-events.md) - [自定义事件](js-components-custom-events.md)
...@@ -99,5 +100,4 @@ ...@@ -99,5 +100,4 @@
- [事件参数](js-components-custom-event-parameter.md) - [事件参数](js-components-custom-event-parameter.md)
- [slot插槽](js-components-custom-slot.md) - [slot插槽](js-components-custom-slot.md)
- [生命周期定义](js-components-custom-lifecycle.md) - [生命周期定义](js-components-custom-lifecycle.md)
- 附录 - [数据类型说明](js-appendix-types.md)
- [类型说明](js-appendix-types.md)
# 类型说明 # 数据类型说明
## 长度类型 ## 长度类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ---------- | -------------------------- | ---------------------------------------- |
| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位,输入为number类型时,使用px单位;输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:<br/>-&nbsp;px:逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>:字体尺寸单位,会随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。 | | length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位,输入为number类型时,使用px单位;输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:<br/>-&nbsp;px:逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>:字体尺寸单位,会随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。 |
| percentage | string | 百分比尺寸单位,如“50%”。 | | percentage | string | 百分比尺寸单位,如“50%”。 |
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
## 颜色类型 ## 颜色类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ----- | --------------------- | ---------------------------------------- |
| color | string&nbsp;\|颜色枚举字符串 | 用于描述颜色信息。<br/>字符串格式如下:<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式:'\#rrggbb','\#aarrggbb'<br/>-&nbsp;枚举格式:'black','white'。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>&nbsp;&nbsp;>&nbsp;JS脚本中不支持颜色枚举格式。 | | color | string&nbsp;\|颜色枚举字符串 | 用于描述颜色信息。<br/>字符串格式如下:<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式:'\#rrggbb','\#aarrggbb'<br/>-&nbsp;枚举格式:'black','white'。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>&nbsp;&nbsp;>&nbsp;JS脚本中不支持颜色枚举格式。 |
**表1** 当前支持的颜色枚举 **表1** 当前支持的颜色枚举
| 枚举名称 | 对应颜色 | 颜色 | | 枚举名称 | 对应颜色 | 颜色 |
| -------- | -------- | -------- | | -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.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) | | antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) |
| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | | aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) |
......
...@@ -1776,7 +1776,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1776,7 +1776,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
...@@ -1812,7 +1812,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -1812,7 +1812,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
......
...@@ -49,6 +49,8 @@ PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage ...@@ -49,6 +49,8 @@ PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage
<list> <list>
<list-item type="description"> <list-item type="description">
<image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image> <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
</list-item>
<list-item>
<text onclick="jump">Click on picture to Jump to ths details</text> <text onclick="jump">Click on picture to Jump to ths details</text>
</list-item> </list-item>
</list> </list>
...@@ -61,7 +63,8 @@ import router from '@system.router'; ...@@ -61,7 +63,8 @@ import router from '@system.router';
export default { export default {
jump() { jump() {
router.push({ router.push({
uri: 'detailpage', // 路径要与config.json配置里面的相同
uri: 'pages/detailpage',
}); });
}, },
} }
......
# 基于TS扩展的声明式开发范式 # 基于TS扩展的声明式开发范式
- 组件 - 组件通用信息
- 通用
- 通用事件 - 通用事件
- [点击事件](ts-universal-events-click.md) - [点击事件](ts-universal-events-click.md)
- [触摸事件](ts-universal-events-touch.md) - [触摸事件](ts-universal-events-touch.md)
...@@ -47,7 +46,7 @@ ...@@ -47,7 +46,7 @@
- [RotationGesture](ts-basic-gestures-rotationgesture.md) - [RotationGesture](ts-basic-gestures-rotationgesture.md)
- [SwipeGesture](ts-basic-gestures-swipegesture.md) - [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [组合手势](ts-combined-gestures.md) - [组合手势](ts-combined-gestures.md)
- 基础组件 - 基础组件
- [Blank](ts-basic-components-blank.md) - [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md) - [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md) - [Checkbox](ts-basic-components-checkbox.md)
...@@ -83,7 +82,7 @@ ...@@ -83,7 +82,7 @@
- [Toggle](ts-basic-components-toggle.md) - [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md) - [Web](ts-basic-components-web.md)
- [Xcomponent](ts-basic-components-xcomponent.md) - [Xcomponent](ts-basic-components-xcomponent.md)
- 容器组件 - 容器组件
- [AlphabetIndexer](ts-container-alphabet-indexer.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md) - [Badge](ts-container-badge.md)
- [Column](ts-container-column.md) - [Column](ts-container-column.md)
...@@ -106,9 +105,9 @@ ...@@ -106,9 +105,9 @@
- [Swiper](ts-container-swiper.md) - [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md) - [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md) - [TabContent](ts-container-tabcontent.md)
- 媒体组件 - 媒体组件
- [Video](ts-media-components-video.md) - [Video](ts-media-components-video.md)
- 绘制组件 - 绘制组件
- [Circle](ts-drawing-components-circle.md) - [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md) - [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md) - [Line](ts-drawing-components-line.md)
...@@ -117,7 +116,7 @@ ...@@ -117,7 +116,7 @@
- [Path](ts-drawing-components-path.md) - [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md) - [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md) - [Shape](ts-drawing-components-shape.md)
- 画布组件 - 画布组件
- [Canvas](ts-components-canvas-canvas.md) - [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
- [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
...@@ -126,6 +125,8 @@ ...@@ -126,6 +125,8 @@
- [CanvasGradient对象](ts-components-canvas-canvasgradient.md) - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
- [ImageBitmap对象](ts-components-canvas-imagebitmap.md) - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
- [ImageData对象](ts-components-canvas-imagedata.md) - [ImageData对象](ts-components-canvas-imagedata.md)
- 动画 - 动画
- [属性动画](ts-animatorproperty.md) - [属性动画](ts-animatorproperty.md)
- [显式动画](ts-explicit-animation.md) - [显式动画](ts-explicit-animation.md)
......
...@@ -13,7 +13,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ...@@ -13,7 +13,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
...@@ -25,14 +25,14 @@ RenderingContextSettings(antialias?: bool) ...@@ -25,14 +25,14 @@ RenderingContextSettings(antialias?: bool)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---- | ---- | ----- | ---------------- |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 | | [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | | [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 | | [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
...@@ -428,7 +428,7 @@ struct LineDashOffset { ...@@ -428,7 +428,7 @@ struct LineDashOffset {
### globalCompositeOperation ### globalCompositeOperation
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 | | source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 | | source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 | | source-in | 在现有绘制内容中显示新绘制内容。 |
...@@ -642,7 +642,7 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -642,7 +642,7 @@ fillRect(x: number, y: number, w: number, h: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
...@@ -683,7 +683,7 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -683,7 +683,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
...@@ -723,7 +723,7 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -723,7 +723,7 @@ clearRect(x: number, y: number, w: number, h: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
...@@ -765,7 +765,7 @@ fillText(text: string, x: number, y: number): void ...@@ -765,7 +765,7 @@ fillText(text: string, x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
...@@ -805,7 +805,7 @@ strokeText(text: string, x: number, y: number): void ...@@ -805,7 +805,7 @@ strokeText(text: string, x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
...@@ -845,17 +845,17 @@ measureText(text: string): TextMetrics ...@@ -845,17 +845,17 @@ measureText(text: string): TextMetrics
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述 - TextMetrics类型描述
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
- 示例 - 示例
...@@ -894,7 +894,7 @@ stroke(path?: Path2D): void ...@@ -894,7 +894,7 @@ stroke(path?: Path2D): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例 - 示例
...@@ -973,7 +973,7 @@ moveTo(x: number, y: number): void ...@@ -973,7 +973,7 @@ moveTo(x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
...@@ -1015,7 +1015,7 @@ lineTo(x: number, y: number): void ...@@ -1015,7 +1015,7 @@ lineTo(x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
...@@ -1095,7 +1095,7 @@ createPattern(image: ImageBitmap, repetition: string): void ...@@ -1095,7 +1095,7 @@ createPattern(image: ImageBitmap, repetition: string): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象,具体参考ImageBitmap对象。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象,具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 是 | “” | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
...@@ -1137,7 +1137,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1137,7 +1137,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
...@@ -1183,7 +1183,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1183,7 +1183,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
...@@ -1226,7 +1226,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1226,7 +1226,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
...@@ -1271,7 +1271,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1271,7 +1271,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
...@@ -1315,7 +1315,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1315,7 +1315,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
...@@ -1363,7 +1363,7 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1363,7 +1363,7 @@ rect(x: number, y: number, width: number, height: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
...@@ -1476,7 +1476,7 @@ rotate(rotate: number): void ...@@ -1476,7 +1476,7 @@ rotate(rotate: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 - 示例
...@@ -1515,7 +1515,7 @@ scale(x: number, y: number): void ...@@ -1515,7 +1515,7 @@ scale(x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
...@@ -1563,7 +1563,7 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时 ...@@ -1563,7 +1563,7 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
...@@ -1613,7 +1613,7 @@ setTransfrom方法使用的参数和transform()方法相同,但setTransform() ...@@ -1613,7 +1613,7 @@ setTransfrom方法使用的参数和transform()方法相同,但setTransform()
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
...@@ -1660,7 +1660,7 @@ translate(x: number, y: number): void ...@@ -1660,7 +1660,7 @@ translate(x: number, y: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
...@@ -1705,7 +1705,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1705,7 +1705,7 @@ 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。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源,请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
...@@ -1713,8 +1713,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1713,8 +1713,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 | | dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时,将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 | | dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时,将图像高度拉伸或压缩为绘制区域的高度。 |
- 示例 - 示例
...@@ -1752,7 +1752,7 @@ createImageData(width: number, height: number): Object ...@@ -1752,7 +1752,7 @@ createImageData(width: number, height: number): Object
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 | | width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 | | height | number | 是 | 0 | ImageData的高度。 |
...@@ -1765,7 +1765,7 @@ createImageData(imageData: Object): Object ...@@ -1765,7 +1765,7 @@ createImageData(imageData: Object): Object
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------ | ---- | ---- | ----------------- |
| imagedata | Object | 是 | null | 复制现有的ImageData对象。 | | imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
### getPixelMap ### getPixelMap
...@@ -1775,7 +1775,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -1775,7 +1775,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
...@@ -1788,7 +1788,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1788,7 +1788,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
...@@ -1803,7 +1803,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1803,7 +1803,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
...@@ -1916,7 +1916,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -1916,7 +1916,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 | | x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 | | y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 | | x1 | number | 是 | 0 | 终点的x轴坐标。 |
...@@ -1962,7 +1962,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1962,7 +1962,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
......
...@@ -22,26 +22,26 @@ Swiper(value:{controller?: SwiperController}) ...@@ -22,26 +22,26 @@ Swiper(value:{controller?: SwiperController})
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件翻页。 | | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件翻页。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | | index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放,自动播放状态下,导航点不可操作。 | | autoPlay | boolean | false | 子组件是否自动播放,自动播放状态下,导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔,单位为毫秒。 | | interval | number | 3000 | 使用自动播放时播放的时间间隔,单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 | | indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。 | | loop | boolean | true | 是否开启循环。<br> 设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。 |
| duration | number | 400 | 子组件切换的动画时长,单位为毫秒。 | | duration | number | 400 | 子组件切换的动画时长,单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 | | vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | | itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 | | cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 | | disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | | curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 | | indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - | 设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
## SwiperController ## SwiperController
...@@ -49,7 +49,7 @@ Swiper(value:{controller?: SwiperController}) ...@@ -49,7 +49,7 @@ Swiper(value:{controller?: SwiperController})
Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然后通过它控制翻页。 Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然后通过它控制翻页。
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| -------- | -------- | | ------------------- | ------ |
| showNext():void | 翻至下一页。 | | showNext():void | 翻至下一页。 |
| showPrevious():void | 翻至上一页。 | | showPrevious():void | 翻至上一页。 |
...@@ -57,7 +57,7 @@ Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然 ...@@ -57,7 +57,7 @@ Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------ |
| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 | | onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
| 名称 | 参数类型 | 默认值 | 参数描述 | | 名称 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| show | options:&nbsp;{&nbsp;paramObject1\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 | | show | options:&nbsp;{&nbsp;paramObject1&nbsp;\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
- paramObject1参数 - paramObject1参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
......
...@@ -112,7 +112,7 @@ ATM(AccessTokenManager)是OpenHarmony上基于AccessToken构建的统一的应 ...@@ -112,7 +112,7 @@ ATM(AccessTokenManager)是OpenHarmony上基于AccessToken构建的统一的应
在权限B的ACL使能为TRUE的情况下,此时,开发者可以使用ACL方式来申请权限B。 在权限B的ACL使能为TRUE的情况下,此时,开发者可以使用ACL方式来申请权限B。
ACL方式的工作流程可以参考[ACL方式使用说明](#ACL方式使用说明) ACL方式的工作流程可以参考[ACL方式使用说明](#acl方式使用说明)
权限的ACL使能情况可查阅[权限定义列表](permission-list.md) 权限的ACL使能情况可查阅[权限定义列表](permission-list.md)
### ACL方式使用说明 ### ACL方式使用说明
......
...@@ -80,10 +80,9 @@ ...@@ -80,10 +80,9 @@
- [目录结构](ts-framework-directory.md) - [目录结构](ts-framework-directory.md)
- [应用代码文件访问规则](ts-framework-file-access-rules.md) - [应用代码文件访问规则](ts-framework-file-access-rules.md)
- [js标签配置](ts-framework-js-tag.md) - [js标签配置](ts-framework-js-tag.md)
- 资源访问 - 资源管理
- [访问应用资源](ts-application-resource-access.md) - [资源文件的分类](ui-ts-basic-resource-file-categories.md)
- [访问系统资源](ts-system-resource-access.md) - [资源访问](ts-resource-access.md)
- [媒体资源类型说明](ts-media-resource-type.md)
- [像素单位](ts-pixel-units.md) - [像素单位](ts-pixel-units.md)
- [类型定义](ts-types.md) - [类型定义](ts-types.md)
- 声明式语法 - 声明式语法
......
# CSS语法参考 # CSS语法参考
CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。 CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考[通用样式](../reference/arkui-js/js-components-common-styles.md)了解基于JS扩展的类Web开发范式支持的组件样式。
## 尺寸单位 ## 尺寸单位
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
- 数据驱动更新:由状态变量的数据驱动,实现UI自动更新。 - 数据驱动更新:由状态变量的数据驱动,实现UI自动更新。
对组件化的深入描述,请参考深入理解组件化 对组件化的深入描述,请参考[深入理解组件化](ts-custom-component-initialization.md)
> **说明:** > **说明:**
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@Styles装饰器将新的属性函数添加到基本组件上,如Text、Column、Button等。当前@Styles仅支持通用属性。通过@Styles装饰器可以快速定义并复用组件的自定义样式。 @Styles装饰器将新的属性函数添加到基本组件上,如Text、Column、Button等。当前@Styles仅支持通用属性。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
@Styles可以定义在组件内或组件外,在组件外定义时需带上function关键字,组件内定义时不需要 @Styles可以定义在组件内或组件外,在组件外定义时需在方法前添加function关键字,组件内定义时不需要添加function关键字
``` ```
......
# 媒体资源类型说明
- 图片资源类型说明
| 格式 | 文件后缀名 |
| -------- | -------- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
- 音视频资源类型说明
| 格式 | 支持的文件类型 |
| -------- | -------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .mkv |
# 访问应用资源 # 资源访问
## 资源定义 ## 访问应用资源
应用资源由开发者在工程的resources目录中定义,resources目录按照两级目录的形式来组织: 在工程中,通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源;type代表资源类型(或资源的存放位置),可以取“color”、“float”、“string”、“plural”、“media”,name代表资源命名,由开发者定义资源时确定。
- 一级目录为base目录、限定词目录以及rawfile目录 引用rawfile下资源时使用```"$rawfile('filename')"```的形式,当前$rawfile仅支持Image控件引用图片资源,filename需要表示为rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。
- base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时,会自动引用该目录中的资源文件。
- 限定词目录需要开发者自行创建,其可以由一个或多个表征应用场景或设备特征的限定词组合而成,包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度,限定词之间通过下划线(_)或者中划线(-)连接。
- 在引用rawfile中的资源时,不会根据系统的状态去匹配,rawfile目录中可以直接存放资源文件。
- 二级目录为资源目录 > **说明:**
- 用于存放字符串、颜色、浮点数等基础元素,以及媒体等资源文件。 > 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。
- 当前支持的文件和资源类型如下:
| 文件名 | 资源类型 |
| ----------- | ------------ |
| color.json | 颜色资源。 |
| float.json | 间距、圆角、字体等资源。 |
| string.json | 字符串资源。 |
| plural.json | 字符串资源。 |
| media目录 | 图片资源。 |
在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) **说明:** Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用,第一个指定plural资源,第二个参数指定单复数的数量,此处第三个数字为对%d的替换
> 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。 .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目录下图片
base目录中部分自定义资源如下所示: Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片
```
## 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源,不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$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文件的内容如下: color.json文件的内容如下:
...@@ -133,35 +141,7 @@ plural.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目录下图片
```
## 相关实例 ## 相关实例
......
# 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源,不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$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)
```
...@@ -72,10 +72,61 @@ base目录与限定词目录下面可以创建资源组目录(包括element、 ...@@ -72,10 +72,61 @@ base目录与限定词目录下面可以创建资源组目录(包括element、
**表3** 资源组目录说明 **表3** 资源组目录说明
| 资源组目录 | 目录说明 | 资源文件 | | 资源组目录 | 目录说明 | 资源文件 |
| --------- | ---------------------------------------- | ---------------------------------------- | | ------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean,布尔型<br/>-&nbsp;color,颜色<br/>-&nbsp;float,浮点型<br/>-&nbsp;intarray,整型数组<br/>-&nbsp;integer,整型<br/>-&nbsp;pattern,样式<br/>-&nbsp;plural,复数形式<br/>-&nbsp;strarray,字符串数组<br/>-&nbsp;string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json | | element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean,布尔型<br/>-&nbsp;color,颜色<br/>-&nbsp;float,浮点型<br/>-&nbsp;intarray,整型数组<br/>-&nbsp;integer,整型<br/>-&nbsp;pattern,样式<br/>-&nbsp;plural,复数形式<br/>-&nbsp;strarray,字符串数组<br/>-&nbsp;string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 | | media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 |
| animation | 表示动画资源,采用XML文件格式。 | 文件名可自定义,例如:zoom_in.xml。 |
| layout | 表示布局资源,采用XML文件格式。 | 文件名可自定义,例如:home_layout.xml。 |
| graphic | 表示可绘制资源,采用XML文件格式。 | 文件名可自定义,例如:notifications_dark.xml。 |
| profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 | | profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 |
### 媒体资源类型说明
表1 图片资源类型说明
| 格式 | 文件后缀名 |
| ---- | ----- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
表2 音视频资源类型说明
| 格式 | 支持的文件类型 |
| ------------------------------------ | --------------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .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
...@@ -440,9 +440,6 @@ ...@@ -440,9 +440,6 @@
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
.layoutWeight(1) .layoutWeight(1)
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Circle({width: 6, height: 6})
.margin({right: 12})
.fill(colorValue)
Text(name) Text(name)
.fontSize(17.4) .fontSize(17.4)
.flexGrow(1) .flexGrow(1)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册