Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 b4669822 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19648 翻译完成... 

!19648 翻译完成 18865+19493+18776+18889+18799+18254+19250+18163+18823+18524+18197+18064+17840+19441+18165+18298+19022
Merge pull request !19648 from ester.zhou/TR-18865
上级 95e9138d 1d4257e8
展开全部 隐藏空白更改
内联 并排
Showing with 1914 addition and 1090 deletion
en/application-dev/quick-start/start-with-ets-stage.md
浏览文件 @ b4669822
...@@ -37,14 +37,14 @@ ...@@ -37,14 +37,14 @@
- **AppScope** > **app.json5**: global configuration of your application. - **AppScope** > **app.json5**: global configuration of your application.
- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
- **src > main > ets**: a collection of ArkTS source code. - **src > main > ets**: a collection of ArkTS source code.
- **src > main > ets > entryability**: entry to your application/service. - **src > main > ets > entryability**: entry to your application/service.
- **src > main > ets > pages**: pages included in your application/service. - **src > main > ets > pages**: pages included in your application/service.
- **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories). - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
- **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [module.json5 Configuration File](module-configuration-file.md). - **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [module.json5 Configuration File](module-configuration-file.md).
- **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application. - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application.
- **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation. - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
- **build-profile.json5**: application-level configuration information, including the signature and product configuration. - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
- **hvigorfile.ts**: application-level build script. - **hvigorfile.ts**: application-level build script.
......
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ b4669822
...@@ -33,19 +33,21 @@ ...@@ -33,19 +33,21 @@
- [Gradient Color](ts-universal-attributes-gradient-color.md) - [Gradient Color](ts-universal-attributes-gradient-color.md)
- [Popup Control](ts-universal-attributes-popup.md) - [Popup Control](ts-universal-attributes-popup.md)
- [Menu Control](ts-universal-attributes-menu.md) - [Menu Control](ts-universal-attributes-menu.md)
- [Click Control](ts-universal-attributes-click.md)
- [Focus Control](ts-universal-attributes-focus.md) - [Focus Control](ts-universal-attributes-focus.md)
- [Hover Effect](ts-universal-attributes-hover-effect.md) - [Hover Effect](ts-universal-attributes-hover-effect.md)
- [Component ID](ts-universal-attributes-component-id.md) - [Component ID](ts-universal-attributes-component-id.md)
- [Touch Target](ts-universal-attributes-touch-target.md)
- [Polymorphic Style](ts-universal-attributes-polymorphic-style.md) - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
- [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
- [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
- [restoreId](ts-universal-attributes-restoreId.md) - [restoreId](ts-universal-attributes-restoreId.md)
- [Foreground Color](ts-universal-attributes-foreground-color.md) - [Foreground Color](ts-universal-attributes-foreground-color.md)
- [Spherical Effect](ts-universal-attributes-sphericalEffect.md) - [Click Effect](ts-universal-attributes-click-effect.md)
- [Light Up Effect](ts-universal-attributes-lightUpEffect.md) - Touch Interactions
- [Pixel Stretch Effect](ts-universal-attributes-pixelStretchEffect.md) - [Click Control](ts-universal-attributes-click.md)
- [Touch Target](ts-universal-attributes-touch-target.md)
- [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
- Touch Interactions
- [Modal Transition](ts-universal-attributes-modal-transition.md)
- [Sheet Transition](ts-universal-attributes-sheet-transition.md)
- [Obscuring](ts-universal-attributes-obscured.md)
- [Universal Text Attributes](ts-universal-attributes-text-style.md) - [Universal Text Attributes](ts-universal-attributes-text-style.md)
- Gesture Handling - Gesture Handling
- [Gesture Binding Methods](ts-gesture-settings.md) - [Gesture Binding Methods](ts-gesture-settings.md)
...@@ -146,12 +148,13 @@ ...@@ -146,12 +148,13 @@
- Canvas Components - Canvas Components
- [Canvas](ts-components-canvas-canvas.md) - [Canvas](ts-components-canvas-canvas.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md) - [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [CanvasPattern](ts-components-canvas-canvaspattern.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.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)
- [Matrix2D](ts-components-canvas-matrix2d.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md) - [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation - Animation
- [AnimatorProperty](ts-animatorproperty.md) - [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animatio](ts-explicit-animation.md) - [Explicit Animatio](ts-explicit-animation.md)
......
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ b4669822
...@@ -23,9 +23,9 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -23,9 +23,9 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.| | value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.<br>**NOTE**<br>If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.|
| min | number | No| Minimum value of the current data segment.<br>Default value: **0**| | min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
| max | number | No| Maximum value of the current data segment.<br>Default value: **100**| | max | number | No| Maximum value of the current data segment.<br>Default value: **100**<br>**NOTE**<br>If the value of **max** is less than that of **min**, the default values **0** and **100** are used.<br>The values of **max** and **min** can be negative numbers.|
## Attributes ## Attributes
...@@ -36,8 +36,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -36,8 +36,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| | value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.| | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.|
| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Since API version 9, this API is supported in ArkTS widgets.| | colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | Stroke width of the chart.<br>Since API version 9, this API is supported in ArkTS widgets.| | strokeWidth | Length | Stroke width of the chart.<br>Default value: **4**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot be in percentage.|
## ColorStop ## ColorStop
...@@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ | | --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.| | ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md 0 → 100644
浏览文件 @ b4669822
# CanvasPattern
**CanvasPattern** represents an object, created by the [createPattern](ts-canvasrenderingcontext2d.md#createpattern) API, describing an image filling pattern based on the image and repetition mode.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Methods
### setTransform
setTransform(transform?: Matrix2D): void
Uses a **Matrix2D** object as a parameter to perform matrix transformation on the current **CanvasPattern** object.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name | Type | Mandatory| Default Value| Description |
| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | null | Transformation matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct CanvasPatternPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private matrix: Matrix2D = new Matrix2D()
private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
private pattern : CanvasPattern
build() {
Column() {
Button("Click to set transform")
.onClick(() => {
this.matrix.scaleY = 1
this.matrix.scaleX = 1
this.matrix.translateX = 50
this.matrix.translateY = 200
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
.width("45%")
.margin("5px")
Canvas(this.context)
.width('100%')
.height('80%')
.backgroundColor('#FFFFFF')
.onReady(() => {
this.pattern = this.context.createPattern(this.img, 'no-repeat')
this.context.fillStyle = this.pattern
this.matrix.scaleY = 0.5
this.matrix.scaleX = 0.5
this.matrix.translateX = 50
this.matrix.translateY = 50
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
}
.width('100%')
.height('100%')
}
}
```
![CanvasPattern](./figures/canvas_pattern.gif)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ b4669822
...@@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets.
close() close()
Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API. Releases all graphics resources associated with this **ImageBitmap** object and sets its width and height to **0**.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
en/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md 0 → 100644
浏览文件 @ b4669822
# Matrix2D
**Matrix2D** allows you to perform matrix transformation, such as scaling, rotating, and translating.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
Matrix2D()
Since API version 9, this API is supported in ArkTS widgets.
## Attributes
| Name | Type | Description |
| ------------------------- | ------ | ------------------------------------------------------------ |
| [scaleX](#scalex) | number | Horizontal scale factor. Since API version 9, this API is supported in ArkTS widgets.|
| [scaleY](#scaley) | number | Vertical scale factor. Since API version 9, this API is supported in ArkTS widgets.|
| [rotateX](#rotatex) | number | Horizontal tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
| [rotateY](#rotatey) | number | Vertical tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
| [translateX](#translatex) | number | Horizontal translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
| [translateY](#translatey) | number | Vertical translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
> **NOTE**
>
> You can use the [px2vp](ts-pixel-units.md) API to convert the unit.
### scaleX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleX {
@State message: string = 'Matrix2D ScaleX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scaleY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleY {
@State message: string = 'Matrix2D ScaleY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleY = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateX {
@State message: string = 'Matrix2D RotateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateX = Math.sin(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateY {
@State message: string = 'Matrix2D RotateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateY = Math.cos(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateX {
@State message: string = 'Matrix2D TranslateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateX = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateY {
@State message: string = 'Matrix2D TranslateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateY = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
## Methods
### identity
identity(): Matrix2D
Creates an identity matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| --------------------- | ---------- |
| [Matrix2D](#matrix2d) | Identity matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DIdentity {
@State message: string = 'Matrix2D Identity'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix identity")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix = matrix.identity()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### invert
invert(): Matrix2D
Obtains an inverse of this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| --------------------- | ------------ |
| [Matrix2D](#matrix2d) | Inverse of the current matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DInvert {
@State message: string = 'Matrix2D Invert'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix invert")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 2
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 10
matrix.translateY = 20
matrix.invert()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### multiply<sup>(deprecated) </sup>
multiply(other?: Matrix2D): Matrix2D
Multiplies this matrix by the target matrix.
Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
This API is deprecated since API version 10.
**Parameters**
| Parameter | Type | Mandatory| Default Value| Description |
| ----- | -------- | ---- | ------ | ---------- |
| other | Matrix2D | No | null | Target matrix.|
**Return value**
| Type | Description |
| --------------------- | -------------- |
| [Matrix2D](#matrix2d) | Matrix of the multiplication result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DMultiply {
@State message: string = 'Matrix2D Multiply'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix multiply")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
var other: Matrix2D = new Matrix2D()
other.scaleX = 2
other.scaleY = 2
other.rotateX = 0
other.rotateY = 0
other.translateX = 10
other.translateY = 10
other.multiply(other)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotate<sup>10+</sup>
rotate(degree: number, rx?: number, ry?: number): Matrix2D
Performs a right multiplication rotation operation on this matrix, with the specified rotation point as the transform origin.
Since API version 10, this API is supported in ArkTS widgets.
**Parameters**
| Parameter | Type | Mandatory| Default Value| Description |
| ------ | ------ | ---- | ------ | ------------------------------------------------------------ |
| degree | number | Yes | 0 | Rotation angle, in radians. A positive angle denotes a clockwise rotation. You can use **Math.PI& / 180** to convert the angle to a radian value.|
| rx | number | No | 0 | Horizontal coordinate (in vp) of the rotation point. |
| ry | number | No | 0 | Vertical coordinate (in vp) of the rotation point. |
**Return value**
| Type | Description |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | Matrix of the rotation result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.rotate(90 / Math.PI, 10, 10)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translate
translate(tx?: number, ty?: number): Matrix2D
Performs a left multiplication translation operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Parameter| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ------ | ---------------------------- |
| tx | number | No | 0 | Horizontal translation distance, in vp.|
| ty | number | No | 0 | Vertical translation distance, in vp.|
**Return value**
| Type | Description |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | Matrix of the translation result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslate {
@State message: string = 'Matrix2D Translate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix translate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.translate(100, 100)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scale
scale(sx?: number, sy?: number): Matrix2D
Performs a right multiplication scaling operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Parameter| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ------ | ------------------ |
| sx | number | No | 1 | Horizontal scale factor.|
| sy | number | No | 1 | Vertical scale factor.|
**Return value**
| Type | Description |
| --------------------- | ------------------ |
| [Matrix2D](#matrix2d) | Matrix of the scale result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScale {
@State message: string = 'Matrix2D Scale'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix scale")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.scale(0.5, 0.5)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
en/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md 0 → 100644
浏览文件 @ b4669822
# OffscreenCanvas
**OffscreenCanvas** provides an offscreen canvas for drawing.
When using [Canvas](ts-components-canvas-canvas.md) or [Canvas API](ts-canvasrenderingcontext2d.md), rendering, animations, and user interactions generally occur on the main thread of an application. The computation relating to canvas animations and rendering may affect application performance. **OffscreenCanvas** allows for rendering off the screen. This means that some tasks can be run in a separate thread to reduce the load on the main thread.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Not supported
## APIs
OffscreenCanvas(width: number, height: number)
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name| Type| Mandatory| Default Value| Description |
| ------ | -------- | ---- | ------ | ------------------------------------- |
| width | number | Yes | 0 | Width of the offscreen canvas, in vp.|
| height | number | Yes | 0 | Height of the offscreen canvas, in vp.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value| Description |
| ------ | ------ | ------ | ------------------------------------------------------------ |
| width | number | 0 | Width of the offscreen canvas, in vp. Since API version 9, this API is supported in ArkTS widgets.|
| height | number | 0 | Height of the offscreen canvas, in vp. Since API version 9, this API is supported in ArkTS widgets.|
### width
```ts
// xxx.ets
@Entry
@Component
struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.borderWidth(5)
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, this.offCanvas.width, 150)
var image = this.offCanvas.transferToImageBitmap()
this.context.setTransform(1, 0, 0, 1, 50, 200)
this.context.transferFromImageBitmap(image)
})
}
}.width('100%').height('100%')
}
}
```
![en-us_image_0000001194032666](figures/offscreen_canvas_width.png)
### height
```ts
// xxx.ets
@Entry
@Component
struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.borderWidth(5)
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, 100, this.offCanvas.height)
var image = this.offCanvas.transferToImageBitmap()
this.context.setTransform(1, 0, 0, 1, 50, 200)
this.context.transferFromImageBitmap(image)
})
}
}.width('100%').height('100%')
}
}
```
![en-us_image_0000001194032666](figures/offscreen_canvas_height.png)
## Methods
### transferToImageBitmap
transferToImageBitmap(): ImageBitmap
Creates an **ImageBitmap** object from the most recently rendered image of the offscreen canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| -------------------------------------------------- | ----------------------- |
| [ImageBitmap](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object created.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 500)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.borderWidth(5)
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, 300, 500)
offContext.fillStyle = '#000000'
offContext.font = '70px serif bold'
offContext.fillText("Offscreen : Hello World!", 20, 60)
var image = this.offCanvas.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_0000001194032666](figures/offscreen_canvas_transferToImageBitmap.png)
### getContext<sup>10+</sup>
getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanvasRenderingContext2D
Obtains the drawing context of the offscreen canvas.
**Parameters**
| Name | Type | Mandatory| Default Value| Description |
| ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| contextType | string | Yes | "2d" | Type of the drawing context of the offscreen canvas. |
| option | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | - | For details, see [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings).|
**Return value**
| Type | Description |
| ------------------------------------------------------------ | --------------------------------- |
| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | Drawing context of the offscreen canvas.|
**Example**
```ts
@Entry
@Component
struct OffscreenCanvasExamplePage {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 800)
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offscreenCanvas.getContext("2d", this.settings)
offContext.font = '70px sans-serif'
offContext.fillText("Offscreen : Hello World!", 20, 60)
offContext.fillStyle = "#0000ff"
offContext.fillRect(230, 350, 50, 50)
offContext.fillStyle = "#EE0077"
offContext.translate(70, 70)
offContext.fillRect(230, 350, 50, 50)
offContext.fillStyle = "#77EE0077"
offContext.translate(-70, -70)
offContext.fillStyle = "#00ffff"
offContext.rotate(45 * Math.PI / 180);
offContext.fillRect(180, 120, 50, 50);
offContext.rotate(-45 * Math.PI / 180);
offContext.beginPath()
offContext.moveTo(10, 150)
offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
offContext.stroke()
offContext.fillStyle = '#FF00FF'
offContext.fillRect(100, 100, 60, 60)
var imageData = this.offscreenCanvas.transferToImageBitmap()
this.context.transferFromImageBitmap(imageData)
})
}.width('100%').height('100%')
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001194032666](figures/offscreen_canvas.png)
en/application-dev/reference/arkui-ts/ts-container-gridrow.md
浏览文件 @ b4669822
...@@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | ----------------------------------- | ------------------------------------------- | | ----------------------- | ----------------------------------- | ------------------------------------------- |
| alignItems<sup>10+</sup> | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>In **ItemAlign**, only the enumerated values **Start**, **Center**, **End**, and **Stretch** are supported.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.| | alignItems<sup>10+</sup> | ItemAlign | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>**ItemAlign** supports the following enums: **ItemAlign.Start**, **ItemAlign.Center**, **ItemAlign.End**, and **ItemAlign.Stretch**.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.|
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ b4669822
...@@ -42,18 +42,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -42,18 +42,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Horizontal | Only horizontal scrolling is supported. | | Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
| Free<sup>(deprecated)</sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9.| | Free<sup>(deprecated)</sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9. |
## Events ## Events
| Name | Description | | Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. No out-of-bounds bounce effect is triggered.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**.| | onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**. |
| onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. The out-of-bounds bounce effect is triggered.| | onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
| onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. The out-of-bounds bounce effect is triggered.| | onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
| onScrollEnd<sup>(deprecated) </sup>(event: () => void) | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| | onScrollEnd<sup>(deprecated) </sup>(event: () => void) | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
| onScrollStart<sup>9+</sup>(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| | onScrollStart<sup>9+</sup>(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
| onScrollStop<sup>9+</sup>(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| | onScrollStop<sup>9+</sup>(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
> **NOTE** > **NOTE**
> >
...@@ -131,22 +131,24 @@ Obtains the scrolling offset. ...@@ -131,22 +131,24 @@ Obtains the scrolling offset.
### scrollToIndex ### scrollToIndex
scrollToIndex(value: number): void scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign): void
Scrolls to the item with the specified index. Scrolls to the item with the specified index.
When **smooth** is set to **true**, all passed items are loaded and counted in layout calculation. This may result in performance issues if a large number of items are involved.
> **NOTE** > **NOTE**
> >
> Only the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components are supported. > This API only works for the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description | | Name | Type| Mandatory| Description |
| ------ | -------- | ---- | ---------------------------------- | | --------------------- | -------- | ---- | ------------------------------------------------------------ |
| value | number | Yes | Index of the item to be scrolled to in the list.| | value | number | Yes | Index of the item to be scrolled to in the list. |
| smooth<sup>10+ </sup> | boolean | No | Whether to enable the smooth animation for scrolling to the item with the specified index. The value **true** means to enable that the smooth animation, and **false** means the opposite.<br>Default value: **false**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
| align<sup>10+ </sup> | [ScrollAlign](#scrollalign10) | No | How the list item to scroll to is aligned with the list.<br>Default value: **ScrollAlign.START**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
### scrollBy<sup>9+</sup> ### scrollBy<sup>9+</sup>
...@@ -158,7 +160,7 @@ Scrolls by the specified amount. ...@@ -158,7 +160,7 @@ Scrolls by the specified amount.
> **NOTE** > **NOTE**
> >
> Only the **\<Scroll>**, **\<ScrollBar>**, **\<Grid>**, and **\<List>** components are supported. > This API only works for the **\<Scroll>**, **\<ScrollBar>**, **\<Grid>**, and **\<List>** components.
**Parameters** **Parameters**
...@@ -167,6 +169,14 @@ Scrolls by the specified amount. ...@@ -167,6 +169,14 @@ Scrolls by the specified amount.
| dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.| | dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
| dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.| | dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.|
## ScrollAlign<sup>10+ </sup>
| Name | Description |
| ------ | ------------------------------ |
| START | The start edge of the list item is flush with the start edge of the list. |
| CENTER | The list item is centered along the main axis of the list. |
| END | The end edge of the list item is flush with the end edge of the list.|
| AUTO | The list item is automatically aligned.<br>If the list item is fully contained within the display area, no adjustment is performed. Otherwise, the list item is aligned so that its start or end edge is flush with the start or end edge of the list, whichever requires a shorter scrolling distance.|
## Example ## Example
### Example 1 ### Example 1
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ b4669822
...@@ -45,18 +45,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -45,18 +45,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).|
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | | disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**| | curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.| | indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.|
| displayCount<sup>8+</sup> | number \| string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.| | displayCount<sup>8+</sup> | number \| string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.| | effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
| nextMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the next item is displayed, but child components cannot be loaded. | | displayArrow<sup>10+</sup> | value:[ArrowStyle](#arrowstyle10) \| boolean,<br>isHoverShow?: boolean | Arrow style of the navigation point indicator.<br>Default value: **false**<br>**isHoverShow**: whether to show the arrow when the mouse pointer hovers over the navigation point indicator.|
| prevMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the previous item is displayed, but child components cannot be loaded. |
## SwiperDisplayMode ## SwiperDisplayMode
| Name| Description| | Name| Description|
| ----------- | ------------------------------------------ | | ----------- | ------------------------------------------ |
| Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.| | Stretch<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to the width of the component.<br>This API is deprecated since API version 10. You are advised to use **STRETCH** instead.|
| AutoLinear | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.| | AutoLinear<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.<br>This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.|
| STRETCH<sup>10+</sup> | The slide width of the **\<Swiper>** component is equal to the width of the component.|
| AUTO_LINEAR<sup>10+</sup> | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.|
## SwiperController ## SwiperController
...@@ -92,10 +93,10 @@ Sets the distance between the navigation point indicator and the **\<Swiper>** c ...@@ -92,10 +93,10 @@ Sets the distance between the navigation point indicator and the **\<Swiper>** c
| Name| Type| Mandatory.| Description | | Name| Type| Mandatory.| Description |
| ------ | -------- | ------ | ------------------------------------ | | ------ | -------- | ------ | ------------------------------------ |
| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.| | left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.| | top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.| | right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.| | bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
### DotIndicator ### DotIndicator
...@@ -122,6 +123,20 @@ Defines the navigation point indicator of the digit style, which inherits attrib ...@@ -122,6 +123,20 @@ Defines the navigation point indicator of the digit style, which inherits attrib
| digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.| | digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.| | selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
### ArrowStyle<sup>10+</sup>
Describes the left and right arrow attributes.
| Name | Type| Mandatory.| Description|
| ------------- | -------- | ------ | -------- |
| isShowBackground | boolean | No| Whether to show the background for the arrow.<br>Default value: **false**|
| isSidebarMiddle | boolean | No| Whether the arrow is centered on both sides of the content area.<br>Default value: **false** (the arrow is shown on either side of the navigation point indicator)|
| backgroundSize | [Length](ts-types.md#length) | No| Size of the background.<br>Default value: **24vp**|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the background.<br>Default value: **'\#19182431'**|
| arrowSize | [Length](ts-types.md#length) | No| Size of the arrow.<br>Default value: **18vp**|
| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the arrow.<br>Default value: **\#182431**|
## Events ## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-click-effect.md 0 → 100644
浏览文件 @ b4669822
# Click Effect
You can set the click effect for a component to define how it behaves when clicked.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
### Attributes
| Name | Type | Description |
| ----------- | ------------------- | ------------------------------------------------------------ |
| clickEffect | [ClickEffect](#clickeffect) \| null | Click effect of the component.<br>**NOTE**<br>The click effect is revoked when this attribute is set to **null**.|
### ClickEffect
| Name | Type | Mandatory| Description |
| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | Yes | Click effect of the component.<br>Default value: **ClickEffectLevel.LIGHT**|
| scale | number | No | Zoom ratio. This parameter works based on the setting of **ClickEffectLevel**.<br>**NOTE**<br>The default value of this parameter varies by the value of **level**.<br>- If **level** is set to **ClickEffectLevel.LIGHT**, the default value is **0.90**.<br>- If **level** is set to **ClickEffectLevel.MIDDLE** or **ClickEffectLevel.HEAVY**, the default value is **0.95**. |
### Example
```ts
// xxx.ets
@Entry
@Component
struct ToggleExample {
build() {
Column({ space: 10 }) {
Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Switch, isOn: false })
.clickEffect({level:ClickEffectLevel.LIGHT})
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Switch, isOn: true })
.clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Checkbox, isOn: false })
.clickEffect({level:ClickEffectLevel.MIDDLE})
.size({ width: 20, height: 20 })
.selectedColor('#007DFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Checkbox, isOn: true })
.clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5})
.size({ width: 20, height: 20 })
.selectedColor('#007DFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Button, isOn: false }) {
Text('status button').fontColor('#182431').fontSize(12)
}.width(106)
.clickEffect({level:ClickEffectLevel.HEAVY})
.selectedColor('rgba(0,125,255,0.20)')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button').fontColor('#182431').fontSize(12)
}.width(106)
.clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5})
.selectedColor('rgba(0,125,255,0.20)')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
}.width('100%').padding(24)
}
}
```
![clickeffect](figures/clickeffect.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-obscured.md 0 → 100644
浏览文件 @ b4669822
# Obscuring
When needed, you can obscure content of a component.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
## Attributes
| Name | Type | Description |
| -----| ------------------------------------------ | ------------------------------------ |
| obscured | Array<[ObscuredReasons](ts-appendix-enums.md#obscuredreasons10)> | How the component content is obscured.<br>Default value: **[]**<br>This API is supported in ArkTS widgets.<br>This API only works for the [\<Image>](ts-basic-components-image.md) and [\<Text>](ts-basic-components-text.md) components.<br>**NOTE**<br>To obscure an image when it is being loaded, you must set the width and height of the **\<Image>** component. |
## Example
```ts
// xxx.ets
@Entry
@Component
struct ObscuredExample {
build() {
Row() {
Column() {
Text('Text not set obscured attribute').fontSize(10).fontColor(Color.Black)
Text('This is an example for text obscured attribute.')
.fontSize(30)
.width('600px')
.fontColor(Color.Black)
.border({ width: 1 })
Text('Image not set obscured attribute').fontSize(10).fontColor(Color.Black)
Image($r('app.media.icon'))
.width('200px')
.height('200px')
Text('Text set obscured attribute').fontSize(10).fontColor(Color.Black)
Text('This is an example for text obscured attribute.')
.fontSize(30)
.width('600px')
.fontColor(Color.Black)
.border({ width: 1 })
.obscured([ObscuredReasons.PLACEHOLDER])
Text('Image set obscured attribute').fontSize(10).fontColor(Color.Black)
Image($r('app.media.icon'))
.width('200px')
.height('200px')
.obscured([ObscuredReasons.PLACEHOLDER])
}
.width('100%')
}
.height('100%')
}
}
```
![obscured](figures/obscured.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或