Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

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

!10807 翻译完成 9431/10624/9371 

Merge pull request !10807 from ester.zhou/TR-9431
上级 185ec7f4 a621e5d1
展开全部 隐藏空白更改
内联 并排
Showing with 881 addition and 466 deletion
en/application-dev/reference/Readme-EN.md
浏览文件 @ ca212f98
# Development References
- [SysCap List](syscap-list.md)
- [Component Reference (TypeScript-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](arkui-js/Readme-EN.md)
- [API Reference (JS and TS APIs)](apis/Readme-EN.md)
- API Reference (Native APIs)
- [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
- [Component Reference (ArkTS-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-compatible Web-like Development Paradigm)](arkui-js/Readme-EN.md)
- [API Reference (JS and TS APIs)](apis/Readme-EN.md)
- API Reference (Native APIs)
- [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
en/application-dev/reference/arkui-js/Readme-EN.md
浏览文件 @ ca212f98
# JavaScript-based Web-like Development Paradigm
# JavaScript-compatible Web-like Development Paradigm
- Universal Component Information
- [Universal Attributes](js-components-common-attributes.md)
......
en/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ ca212f98
......@@ -172,7 +172,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext" "></picker>
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
......
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ ca212f98
# TypeScript-based Declarative Development Paradigm
# ArkTS-based Declarative Development Paradigm
- Universal Component Information
- Universal Events
......@@ -140,7 +140,6 @@
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md)
......@@ -149,6 +148,7 @@
- [Component Transition](ts-transition-animation-component.md)
- [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
- [Motion Path Animation](ts-motion-path-animation.md)
- Global UI Methods
- Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ ca212f98
......@@ -6,6 +6,8 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
>
> 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
CanvasRenderingContext2D(setting: RenderingContextSetting)
......@@ -721,6 +723,7 @@ Draws an outlined rectangle on the canvas.
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -764,16 +767,17 @@ Clears the content in a rectangle on the canvas.
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.backgroundColor('#ffffff')
.onReady(() =>{
this.context.fillStyle = 'rgb(0,0,255)'
this.context.fillRect(0,0,500,500)
this.context.clearRect(20,20,150,100)
this.context.fillRect(20,20,200,200)
this.context.clearRect(30,30,150,100)
})
}
.width('100%')
......@@ -809,6 +813,7 @@ Draws filled text on the canvas.
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -853,6 +858,7 @@ Draws a text stroke on the canvas.
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -921,6 +927,7 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -973,6 +980,8 @@ Strokes a path.
.onReady(() =>{
this.context.moveTo(25, 25)
this.context.lineTo(25, 105)
this.context.lineTo(75, 105)
this.context.lineTo(75, 25)
this.context.strokeStyle = 'rgb(0,0,255)'
this.context.stroke()
})
......@@ -1435,7 +1444,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath()
this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
this.context.stroke()
})
}
......@@ -1503,7 +1512,7 @@ Fills the area inside a closed path on the canvas.
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | No | "nonzero" | Specifies the rule to populate the object.<br>The options are **"nonzero"** and **"evenodd"**.|
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example**
......@@ -1616,11 +1625,11 @@ Sets the current path to a clipping area.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.rect(0, 0, 200, 200)
this.context.rect(0, 0, 100, 200)
this.context.stroke()
this.context.clip()
this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, 150, 150)
this.context.fillRect(0, 0, 200, 200)
})
}
.width('100%')
......@@ -1634,7 +1643,7 @@ Sets the current path to a clipping area.
clip(path: Path2D, fillRule?: CanvasFillRule): void
Sets a **Path2D** path to a clipping area. This API is a null API.
Sets the current path to a clipping path.
**Parameters**
......@@ -1644,12 +1653,44 @@ Sets a **Path2D** path to a clipping area. This API is a null API.
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let region = new Path2D();
region.rect(80,10,20,130);
region.rect(40,50,100,50);
this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height)
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_000000127777779](figures/en-us_image_000000127777779.png)
### filter
filter(filter: string): void
Provides filter effects. This API is a null API.
Provides filter effects. This API is a void API.
**Parameters**
......@@ -1662,21 +1703,21 @@ Provides filter effects. This API is a null API.
getTransform(): Matrix2D
Obtains the current transformation matrix being applied to the context. This API is a null API.
Obtains the current transformation matrix being applied to the context. This API is a void API.
### resetTransform
resetTransform(): void
Resets the current transform to the identity matrix. This API is a null API.
Resets the current transform to the identity matrix. This API is a void API.
### direction
direction(direction: CanvasDirection): void
Sets the current text direction used to draw text. This API is a null API.
Sets the current text direction used to draw text. This API is a void API.
### rotate
......@@ -1751,9 +1792,10 @@ Scales the canvas based on the given scale factors.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.strokeRect(10, 10, 25, 25)
this.context.lineWidth = 3
this.context.strokeRect(30, 30, 50, 50)
this.context.scale(2, 2) // Scale to 200%
this.context.strokeRect(10, 10, 25, 25)
this.context.strokeRect(30, 30, 50, 50)
})
}
.width('100%')
......@@ -1772,6 +1814,7 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> **NOTE**
>
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
......@@ -1877,7 +1920,7 @@ Resets the existing transformation matrix and creates a new transformation matri
setTransform(transform?: Matrix2D): void
Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a null API.
Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API.
### translate
......@@ -1983,7 +2026,7 @@ Draws an image on the canvas.
createImageData(sw: number, sh: number): ImageData
Creates an **ImageData** object with the specified dimensions. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
**Parameters**
......@@ -1993,23 +2036,21 @@ Creates an **ImageData** object with the specified dimensions. For details, see
| sh | number | Yes | 0 | Height of the **ImageData** object.|
### createImageData
createImageData(imageData: ImageData): ImageData
Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| --------- | ---------------------------------------- | ---- | ---- | ----------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object.|
| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object.|
**Return value**
| Type | Description |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object.|
| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
### getPixelMap
......@@ -2037,7 +2078,7 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas.
Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
**Parameters**
......@@ -2052,7 +2093,39 @@ Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created
| Type | Description |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | **ImageData** object.|
| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130);
var imagedata = this.context.getImageData(50,50,130,130);
this.context.putImageData(imagedata,150,150);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
### putImageData
......@@ -2061,13 +2134,13 @@ putImageData(imageData: ImageData, dx: number, dy: number): void
putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
Puts data from the given **[ImageData](ts-components-canvas-imagebitmap.md)** object into the specified rectangular area on the canvas.
Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object with pixels to put onto the canvas. |
| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object with pixels to put onto the canvas. |
| dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
| dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
| dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
......@@ -2142,6 +2215,7 @@ Sets the dash line style.
.onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.stroke()
})
}
.width('100%')
......@@ -2165,24 +2239,34 @@ Obtains the dash line style.
| -------- | ------------------------ |
| number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct GetLineDash {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@Entry
@Component
struct CanvasGetLineDash {
@State message: string = 'Hello World'
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
console.error('before getlinedash clicked')
let res = this.context.getLineDash()
console.error(JSON.stringify(res))
})
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
.onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.stroke();
......@@ -2190,17 +2274,20 @@ Obtains the dash line style.
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
```
![en-us_image_000000127777778](figures/en-us_image_000000127777778.png)
### imageSmoothingQuality
imageSmoothingQuality(quality: imageSmoothingQuality)
Sets the quality of image smoothing. This API is a null API.
Sets the quality of image smoothing. This API is a void API.
**Parameters**
......@@ -2220,7 +2307,7 @@ Displays the specified **ImageBitmap** object.
| Name | Type | Description |
| ------ | ---------------------------------------- | ------------------ |
| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
**Example**
......@@ -2228,7 +2315,7 @@ Displays the specified **ImageBitmap** object.
// xxx.ets
@Entry
@Component
struct PutImageData {
struct TransferFromImageBitmap {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
......@@ -2259,6 +2346,7 @@ Displays the specified **ImageBitmap** object.
```
![en-us_image_000000127777773](figures/en-us_image_000000127777773.png)
### toDataURL
toDataURL(type?: string, quality?: number): string
......@@ -2328,7 +2416,11 @@ Restores the saved drawing context.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.restore()
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
})
}
.width('100%')
......@@ -2336,6 +2428,7 @@ Restores the saved drawing context.
}
}
```
![en-us_image_000000127777781](figures/en-us_image_000000127777781.png)
### save
......@@ -2361,14 +2454,19 @@ Saves all states of the canvas in the stack. This API is usually called when the
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save()
})
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_000000127777781](figures/en-us_image_000000127777781.png)
### createLinearGradient
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ ca212f98
......@@ -3,8 +3,9 @@
The **\<Canvas>** component can be used to customize drawings.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -37,7 +38,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.|
## Example
**Example**
```ts
// xxx.ets
......@@ -53,8 +55,8 @@ struct CanvasExample {
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.fillRect(0,30,100,100)
.onReady(() => {
this.context.fillRect(0, 30, 100, 100)
})
}
.width('100%')
......@@ -62,3 +64,4 @@ struct CanvasExample {
}
}
```
![en-us_image_0000001194032666](figures/en-us_image_0000001194032666.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ ca212f98
......@@ -3,23 +3,27 @@
**CanvasGradient** provides a canvas gradient object.
> **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.
## addColorStop
addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
- Example
**Example**
```ts
// xxx.ets
......@@ -48,10 +52,6 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
.height('100%')
}}
```
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ ca212f98
# ImageBitmap
> **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.
An **ImageBitmap** object stores pixel data rendered on a canvas.
> **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.
An **ImageBitmap** object stores pixel data rendered on a canvas.
## Attributes
| Name| Type| Description|
| Name| Type| Description|
| -------- | -------- | -------- |
| width | number | Pixel width of the **ImageBitmap** object.|
| height | number | Pixel height of the **ImageBitmap** object.|
| width | number | Pixel width of the **ImageBitmap** object.|
| height | number | Pixel height of the **ImageBitmap** object.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001194352442](figures/en-us_image_0000001194352442.png)
## Methods
......
en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ ca212f98
# ImageData
An **ImageData** object stores pixel data rendered on a canvas.
> **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.
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Attributes
| Name| Type| Description|
| Name| Type| Description|
| -------- | -------- | -------- |
| width | number | Actual width of the rectangle on the canvas, in pixels.|
| height | number | Actual height of the rectangle on the canvas, in pixels.|
| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
| width | number | Actual width of the rectangle on the canvas, in pixels.|
| height | number | Actual height of the rectangle on the canvas, in pixels.|
| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130);
var imagedata = this.context.getImageData(50,50,130,130);
this.context.putImageData(imagedata,150,150);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ ca212f98
......@@ -3,13 +3,10 @@
**Lottie** allows you to implement animation-specific operations.
> **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.
## Required Permissions
None
## Modules to Import
......@@ -32,7 +29,8 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea
Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
......@@ -50,12 +48,13 @@ destroy(name: string): void
Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
- Example
**Example**
```ts
// xxx.ets
import lottie from '@ohos/lottieETS'
......@@ -130,12 +129,14 @@ play(name: string): void
Plays a specified animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
- Example
**Example**
```ts
lottie.play(this.animateName)
```
......@@ -147,12 +148,14 @@ pause(name: string): void
Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example
**Example**
```ts
lottie.pause(this.animateName)
```
......@@ -164,12 +167,14 @@ togglePause(name: string): void
Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example
**Example**
```ts
lottie.togglePause(this.animateName)
```
......@@ -181,12 +186,14 @@ stop(name: string): void
Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example
**Example**
```ts
lottie.stop(this.animateName)
```
......@@ -198,13 +205,15 @@ setSpeed(speed: number, name: string): void
Sets the playback speed of the specified animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
- Example
**Example**
```ts
lottie.setSpeed(5, this.animateName)
```
......@@ -216,13 +225,15 @@ setDirection(direction: AnimationDirection, name: string): void
Sets the direction in which the specified animation plays.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
- Example
**Example**
```ts
lottie.setDirection(-1, this.animateName)
```
......@@ -262,12 +273,14 @@ play(name?: string): void
Plays an animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
- Example
**Example**
```ts
this.animateItem.play()
```
......@@ -279,12 +292,14 @@ destroy(name?: string): void
Destroys an animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
- Example
**Example**
```ts
this.animateItem.destroy()
```
......@@ -296,12 +311,14 @@ pause(name?: string): void
Pauses an animation. When the **play** interface is called next time, the animation is played from the current frame.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
- Example
**Example**
```ts
this.animateItem.pause()
```
......@@ -313,12 +330,14 @@ togglePause(name?: string): void
Pauses or plays an animation. This method is equivalent to the switching between **play** and **pause**.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
- Example
**Example**
```ts
this.animateItem.togglePause()
```
......@@ -330,12 +349,14 @@ stop(name?: string): void
Stops an animation. When the **play** interface is called next time, the animation is played from the first frame.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
- Example
**Example**
```ts
this.animateItem.stop()
```
......@@ -347,12 +368,14 @@ setSpeed(speed: number): void
Sets the playback speed of an animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
- Example
**Example**
```ts
this.animateItem.setSpeed(5);
```
......@@ -364,12 +387,14 @@ setDirection(direction: AnimationDirection): void
Sets the playback direction of an animation.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
- Example
**Example**
```ts
this.animateItem.setDirection(-1)
```
......@@ -381,14 +406,16 @@ goToAndStop(value: number, isFrame?: boolean): void
Sets the animation to stop at the specified frame or time.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndStop(25, true)
......@@ -403,14 +430,16 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
Sets the animation to start from the specified frame or time progress.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndPlay(25, true)
......@@ -425,13 +454,15 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
Sets the animation to play only the specified segment.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example
**Example**
```ts
// Set the animation to play the specified segment.
this.animateItem.playSegments([10, 20], false)
......@@ -446,12 +477,14 @@ resetSegments(forceFlag: boolean): void
Resets the settings configured by the **playSegments** method to play all the frames.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
- Example
**Example**
```ts
this.animateItem.resetSegments(true)
```
......@@ -463,7 +496,8 @@ resize(): void
Resizes the animation layout.
- Example
**Example**
```ts
this.animateItem.resize()
```
......@@ -475,12 +509,14 @@ setSubframe(useSubFrame: boolean): void
Sets the precision of the **currentFrame** attribute to display floating-point numbers.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
- Example
**Example**
```ts
this.animateItem.setSubframe(false)
```
......@@ -492,12 +528,14 @@ getDuration(inFrames?: boolean): void
Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** interface.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms. The default value is **false**.|
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**|
**Example**
- Example
```ts
this.animateItem.getDuration(true)
```
......@@ -509,13 +547,15 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
- Example
**Example**
```ts
private callbackItem: any = function() {
console.log("grunt loopComplete")
......@@ -533,13 +573,15 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
Removes an event listener.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
- Example
**Example**
```ts
this.animateItem.removeEventListener('loopComplete', this.animateName)
```
......@@ -551,13 +593,15 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
Directly triggers all configured callbacks of a specified event.
- Parameters
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.|
- Example
**Example**
```ts
private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name)
......
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ ca212f98
# Path2D
> **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.
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
> **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.
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
## addPath
......@@ -16,11 +16,11 @@ Adds a path to this path.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| path | path2D | Yes| - | Path to be added to this path.|
| transform | Matrix2D | No| null | Transformation matrix of the new path.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| path | path2D | Yes| - | Path to be added to this path.|
| transform | Matrix2D | No| null | Transformation matrix of the new path.|
**Example**
......@@ -103,10 +103,10 @@ Moves the current coordinate point of the path to the target point, without draw
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.|
**Example**
......@@ -150,10 +150,10 @@ Draws a straight line from the current point to the target point.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.|
**Example**
......@@ -198,14 +198,14 @@ Draws a cubic bezier curve on the canvas.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.|
| cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.|
| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.|
| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.|
| cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.|
| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.|
| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
**Example**
......@@ -226,7 +226,8 @@ Draws a cubic bezier curve on the canvas.
.backgroundColor('#ffff00')
.onReady(() =>{
this.path2Db.moveTo(10, 10)
this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20)
this.context.stroke(this.path2Db)
})
}
.width('100%')
......@@ -246,12 +247,12 @@ Draws a quadratic curve on the canvas.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.|
| cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.|
| cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
**Example**
......@@ -293,14 +294,14 @@ Draws an arc on the canvas.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the center point of the arc.|
| y | number | Yes| 0 | Y-coordinate of the center point of the arc.|
| radius | number | Yes| 0 | Radius of the arc.|
| startAngle | number | Yes| 0 | Start radian of the arc.|
| endAngle | number | Yes| 0 | End radian of the arc.|
| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the center point of the arc.|
| y | number | Yes| 0 | Y-coordinate of the center point of the arc.|
| radius | number | Yes| 0 | Radius of the arc.|
| startAngle | number | Yes| 0 | Start radian of the arc.|
| endAngle | number | Yes| 0 | End radian of the arc.|
| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
**Example**
......@@ -320,7 +321,8 @@ Draws an arc on the canvas.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
this.path2Db.arc(100, 75, 50, 0, 6.28)
this.context.stroke(this.path2Db)
})
}
.width('100%')
......@@ -340,13 +342,13 @@ Draws an arc based on the radius and points on the arc.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x1 | number | Yes| 0 | X-coordinate of the first point on the arc.|
| y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.|
| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.|
| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.|
| radius | number | Yes| 0 | Radius of the arc.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x1 | number | Yes| 0 | X-coordinate of the first point on the arc.|
| y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.|
| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.|
| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.|
| radius | number | Yes| 0 | Radius of the arc.|
**Example**
......@@ -387,16 +389,16 @@ Draws an ellipse in the specified rectangular region on the canvas.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the ellipse center.|
| y | number | Yes| 0 | Y-coordinate of the ellipse center.|
| radiusX | number | Yes| 0 | Ellipse radius on the x-axis.|
| radiusY | number | Yes| 0 | Ellipse radius on the y-axis.|
| rotation | number | Yes| 0 | Rotation angle of the ellipse. The unit is radian.|
| startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | number | No| 0 | Whether to draw the ellipse counterclockwise. The value **0** means to draw the ellipse clockwise, and **1** means to draw the ellipse counterclockwise. This parameter is optional. The default value is **0**. |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the ellipse center.|
| y | number | Yes| 0 | Y-coordinate of the ellipse center.|
| radiusX | number | Yes| 0 | Ellipse radius on the x-axis.|
| radiusY | number | Yes| 0 | Ellipse radius on the y-axis.|
| rotation | number | Yes| 0 | Rotation angle of the ellipse. The unit is radian.|
| startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | number | No| 0 | Whether to draw the ellipse counterclockwise. The value **0** means to draw the ellipse clockwise, and **1** means to draw the ellipse counterclockwise. This parameter is optional. The default value is **0**.|
**Example**
......@@ -408,7 +410,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -416,7 +418,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2)
this.context.stroke(this.path2Db)
})
}
......@@ -437,12 +439,12 @@ Creates a rectangle on the canvas.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
| w | number | Yes| 0 | Width of the rectangle.|
| h | number | Yes| 0 | Height of the rectangle.|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
| w | number | Yes| 0 | Width of the rectangle.|
| h | number | Yes| 0 | Height of the rectangle.|
**Example**
......@@ -462,7 +464,8 @@ Creates a rectangle on the canvas.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
this.path2Db.rect(20, 20, 100, 100);
this.context.stroke(this.path2Db)
})
}
.width('100%')
......
en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ ca212f98
......@@ -11,7 +11,7 @@ The area change event is triggered when the component's size, position, or any o
| Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event: (oldValue: Area, newValue: Area) =&gt; void) | No | Triggered when the component area changes. For details about the **Area** type, see [Area](ts-types.md#area8).|
| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes.|
## Example
......@@ -22,7 +22,7 @@ The area change event is triggered when the component's size, position, or any o
@Component
struct AreaExample {
@State value: string = 'Text'
@State size1: string = ''
@State sizeValue: string = ''
build() {
Column() {
......@@ -33,9 +33,9 @@ struct AreaExample {
})
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size1 = JSON.stringify(newValue)
this.sizeValue = JSON.stringify(newValue)
})
Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
}
.width('100%').height('100%').margin({ top: 30 })
}
......
en/application-dev/ui/arkui-overview.md
浏览文件 @ ca212f98
......@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
- Two development paradigms: ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| Development Paradigm | Description | Applicable To | Intended Audience |
| -------- | -------- | -------- | -------- |
......
en/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ ca212f98
......@@ -4,9 +4,9 @@
The application code files can be accessed in the following ways:
- Use a relative path to reference the code file. For example, if the upper-level directory is **../common/utils/utils.ets**, use **./common/utils/utils.ets** for the current directory.
- Use a relative path to reference the code file. For example, if the upper-level directory is **../common/utils/utils**, use **./common/utils/utils** for the current directory.
- Use the root path of the current module to reference the code file, for example, **common/utils/utils.ets**.
- Use the root path of the current module to reference the code file, for example, **common/utils/utils**.
- Store common code files in the **common** directory.
......@@ -15,7 +15,7 @@ The application code files can be accessed in the following ways:
```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets";
import { FoodData, FoodList } from "../common/utils/utils";
@Entry
@Component
......
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ ca212f98
......@@ -10,20 +10,21 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
```html
<!-- xxx.hml -->
<div class="container" >
<tabs> <tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
<div class="container">
<tabs>
<tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
</div>
```
......
en/application-dev/ui/ui-js-overview.md
浏览文件 @ ca212f98
# Overview
The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
The JavaScript-compatible web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
For details about the components, see [Component Reference (JavaScript-based Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md).
For details about the components, see [Component Reference (JavaScript-compatible Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md).
## Overall Architecture
ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
ArkUI with the JavaScript-compatible web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或