diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md index 18e1b0e45a358f9da14418fc611b2b220063f4a9..7a94f110d4680dbd6115fbab80684f2287086722 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md @@ -1,63 +1,44 @@ -# CanvasGradient +# CanvasGradient -**CanvasGradient** provides a gradient object. +> **NOTE** +> +> This component is supported since API version 4. 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 - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

offset

-

number

-

Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.

-

color

-

string

-

Gradient color to set.

-
- -- Example Code - - ``` - -
- - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el =this.$refs.canvas; - const ctx =el.getContext('2d'); - const gradient = ctx.createLinearGradient(0,0,100,0); - gradient.addColorStop(0,'#00ffff'); - gradient.addColorStop(1,'#ffff00'); - } - } - ``` - - ![](figures/en-us_image_0000001152610806.png) +**CanvasGradient** provides a gradient object. +## addColorStop + +addColorStop(offset: number, color: string): void + +Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color. + +**Parameters** + +| Name | Type | Description | +| ------ | ------ | ------------------------------------------------------------ | +| offset | number | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. | +| color | string | Gradient color to set. | + +**Example** + ```html + +
+ + +
+ ``` + + ```js +// xxx.js +export default { + handleClick() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + const gradient = ctx.createLinearGradient(0,0,100,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + } +} + ``` + + ![en-us_image_0000001152610806](figures/en-us_image_0000001152610806.png) diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md index fe67c0ed601ba28ea698ed343546002bdbd50827..f0d8345a3bac2c96c323c94731e3244b1ff8df77 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md @@ -1,805 +1,443 @@ -# Path2D +# Path2D -**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. -## addPath +**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. -addPath\(path: Object\): void +## addPath + +addPath(path: Object): void Adds a path to this path. -- Parameters - - - - - - - - - - - - -

Name

-

Type

-

Description

-

path

-

Object

-

Path to be added to this path.

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - var path2 = ctx.createPath2D(); - path2.addPath(path1); - ctx.stroke(path2); - } - } - ``` - - ![](figures/en-us_image_0000001173164873.png) - - -## setTransform - -setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void +**Parameters** + +| Name | Type | Description | +| ---- | ------ | ------------------------------ | +| path | Object | Path to be added to this path. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + } +} + ``` + + ![en-us_image_0000001173164873](figures/en-us_image_0000001173164873.png) + +## setTransform + +setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void Sets the path transformation matrix. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

scaleX

-

number

-

Scale ratio of the x-axis

-

skewX

-

number

-

Skew angle of the x-axis

-

skewY

-

number

-

Skew angle of the y-axis

-

scaleY

-

number

-

Scale ratio of the y-axis

-

translateX

-

number

-

Translation distance of the x-axis

-

translateY

-

number

-

Translation distance of the y-axis

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - path.setTransform(0.8, 0, 0, 0.4, 0, 0); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001127125208.png) - - -## closePath - -closePath\(\): void +**Parameters** + +| Name | Type | Description | +| ---------- | ------ | ----------------------------------- | +| scaleX | number | Scale ratio of the x-axis. | +| skewX | number | Skew angle of the x-axis. | +| skewY | number | Skew angle of the y-axis. | +| scaleY | number | Scale ratio of the y-axis. | +| translateX | number | Translation distance of the x-axis. | +| translateY | number | Translation distance of the y-axis. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001127125208](figures/en-us_image_0000001127125208.png) + + +## closePath + +closePath(): void Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action. -- Example +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(200, 100); + path.lineTo(300, 100); + path.lineTo(200, 200); + path.closePath(); + ctx.stroke(path); + } +} + ``` + +![](figures/en-us_image_0000001127125202.png) + + +## moveTo + +moveTo(x: number, y: number): void - ``` - -
- -
- ``` +Moves the current coordinate point of the path to the target point, without drawing a line during the movement. - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(200, 100); - path.lineTo(300, 100); - path.lineTo(200, 200); - path.closePath(); - ctx.stroke(path); - } - } - ``` +**Parameters** - ![](figures/en-us_image_0000001127125202.png) +| Parameter | Type | Description | +| --------- | ------ | --------------------------------- | +| x | number | X-coordinate of the target point. | +| y | number | Y-coordinate of the target point. | +**Example** + ```html + +
+ +
+ ``` -## moveTo + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(50, 100); + path.lineTo(250, 100); + path.lineTo(150, 200); + path.closePath(); + ctx.stroke(path); + } +} + ``` -moveTo\(x: number, y: number\): void + ![en-us_image_0000001173164869](figures/en-us_image_0000001173164869.png) -Moves the current coordinate point of the path to the target point, without drawing a line during the movement. -- Parameters - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x

-

number

-

X-coordinate of the target point

-

y

-

number

-

Y-coordinate of the target point

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(50, 100); - path.lineTo(250, 100); - path.lineTo(150, 200); - path.closePath(); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001173164869.png) - - -## lineTo - -lineTo\(x: number, y: number\): void +## lineTo + +lineTo(x: number, y: number): void Draws a straight line from the current point to the target point. -- Parameters - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x

-

number

-

X-coordinate of the target point

-

y

-

number

-

Y-coordinate of the target point

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(100, 100); - path.lineTo(100, 200); - path.lineTo(200, 200); - path.lineTo(200, 100); - path.closePath(); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001127285024.png) - - -## bezierCurveTo - -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +**Parameters** + +| Parameter | Type | Description | +| --------- | ------ | --------------------------------- | +| x | number | X-coordinate of the target point. | +| y | number | Y-coordinate of the target point. | + +**Example** + + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(100, 100); + path.lineTo(100, 200); + path.lineTo(200, 200); + path.lineTo(200, 100); + path.closePath(); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001127285024](figures/en-us_image_0000001127285024.png) + + +## bezierCurveTo + +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void Draws a cubic bezier curve on the canvas. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

cp1x

-

number

-

X-coordinate of the first parameter of the bezier curve

-

cp1y

-

number

-

Y-coordinate of the first parameter of the bezier curve

-

cp2x

-

number

-

X-coordinate of the second parameter of the bezier curve

-

cp2y

-

number

-

Y-coordinate of the second parameter of the bezier curve

-

x

-

number

-

X-coordinate of the end point on the bezier curve

-

y

-

number

-

Y-coordinate of the end point on the bezier curve

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001173324783.png) - - -## quadraticCurveTo - -quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void +**Parameters** + +| Parameter | Type | Description | +| --------- | ------ | --------------------------------------------------------- | +| cp1x | number | X-coordinate of the first parameter of the bezier curve. | +| cp1y | number | Y-coordinate of the first parameter of the bezier curve. | +| cp2x | number | X-coordinate of the second parameter of the bezier curve. | +| cp2y | number | Y-coordinate of the second parameter of the bezier curve | +| x | number | X-coordinate of the end point on the bezier curve. | +| y | number | Y-coordinate of the end point on the bezier curve. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001173324783](figures/en-us_image_0000001173324783.png) + + +## quadraticCurveTo + +quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void Draws a quadratic curve on the canvas. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

cpx

-

number

-

X-coordinate of the bezier curve parameter

-

cpy

-

number

-

Y-coordinate of the bezier curve parameter

-

x

-

number

-

X-coordinate of the end point on the bezier curve

-

y

-

number

-

Y-coordinate of the end point on the bezier curve

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001173164871.png) - - -## arc - -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number\): void +**Parameters** + +| Parameter | Type | Description | +| --------- | ------ | -------------------------------------------------- | +| cpx | number | X-coordinate of the bezier curve parameter. | +| cpy | number | Y-coordinate of the bezier curve parameter. | +| x | number | X-coordinate of the end point on the bezier curve. | +| y | number | Y-coordinate of the end point on the bezier curve. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001173164871](figures/en-us_image_0000001173164871.png) + + +## arc + +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void Draws an arc on the canvas. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x

-

number

-

X-coordinate of the center point of the arc

-

y

-

number

-

Y-coordinate of the center point of the arc

-

radius

-

number

-

Radius of the arc

-

startAngle

-

number

-

Start radian of the arc

-

endAngle

-

number

-

End radian of the arc

-

anticlockwise

-

boolean

-

Whether to draw the arc counterclockwise

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.arc(100, 75, 50, 0, 6.28); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001173164867.png) - - -## arcTo - -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +**Parameters** + +| Parameter | Type | Description | +| ------------- | ------- | -------------------------------------------- | +| x | number | X-coordinate of the center point of the arc. | +| y | number | Y-coordinate of the center point of the arc. | +| radius | number | Radius of the arc. | +| startAngle | number | Start radian of the arc. | +| endAngle | number | End radian of the arc. | +| anticlockwise | boolean | Whether to draw the arc counterclockwise. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(100, 75, 50, 0, 6.28); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001173164867](figures/en-us_image_0000001173164867.png) + + +## arcTo + +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void Draws an arc based on the radius and points on the arc. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x1

-

number

-

X-coordinate of the first point on the arc

-

y1

-

number

-

Y-coordinate of the first point on the arc

-

x2

-

number

-

X-coordinate of the second point on the arc

-

y2

-

number

-

Y-coordinate of the second point on the arc

-

radius

-

number

-

Radius of the arc

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.arcTo(150, 20, 150, 70, 50); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001127125204.png) - - -## ellipse - -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void +**Parameters** + +| Parameter | Type | Description | +| --------- | ------ | -------------------------------------------- | +| x1 | number | X-coordinate of the first point on the arc. | +| y1 | number | Y-coordinate of the first point on the arc. | +| x2 | number | X-coordinate of the second point on the arc. | +| y2 | number | Y-coordinate of the second point on the arc. | +| radius | number | Radius of the arc. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(150, 20, 150, 70, 50); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001127125204](figures/en-us_image_0000001127125204.png) + + +## ellipse + +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void Draws an ellipse in the specified rectangular region. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x

-

number

-

X-coordinate of the ellipse center

-

y

-

number

-

Y-coordinate of the ellipse center

-

radiusX

-

number

-

Ellipse radius on the x-axis.

-

radiusY

-

number

-

Ellipse radius on the y-axis.

-

rotation

-

number

-

Rotation angle of the ellipse. The unit is radian.

-

startAngle

-

number

-

Angle of the start point for drawing the ellipse. The unit is radian.

-

endAngle

-

number

-

Angle of the end point for drawing the ellipse. The angle is represented by radians.

-

anticlockwise

-

number

-

Whether to draw the ellipse in the anticlockwise direction. The value 0 indicates clockwise and the value 1 indicates anticlockwise. This parameter is optional. The default value is 0.

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx =el.getContext('2d'); - var path = ctx.createPath2D(); - path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001173324787.png) - - -## rect - -rect\(x: number, y: number, width: number, height: number\): void +**Parameters** + +| Parameter | Type | Description | +| ------------- | ------ | ------------------------------------------------------------ | +| x | number | X-coordinate of the ellipse center. | +| y | number | Y-coordinate of the ellipse center. | +| radiusX | number | Ellipse radius on the x-axis. | +| radiusY | number | Ellipse radius on the y-axis. | +| rotation | number | Rotation angle of the ellipse. The unit is radian. | +| startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. | +| endAngle | number | Angle of the end point for drawing the ellipse. The angle is represented by radians. | +| anticlockwise | number | Whether to draw the ellipse in the anticlockwise direction. The value **0** indicates clockwise and the value **1** indicates anticlockwise. This parameter is optional. The default value is **0**. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001173324787](figures/en-us_image_0000001173324787.png) + + +## rect + +rect(x: number, y: number, width: number, height: number): void Creates a rectangle. -- Parameters - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

x

-

number

-

X-coordinate of the upper left corner of the rectangle.

-

y

-

number

-

Y-coordinate of the upper left corner of the rectangle.

-

width

-

number

-

Width of the rectangle.

-

height

-

number

-

Height of the rectangle.

-
- -- Example - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.rect(20, 20, 100, 100); - ctx.stroke(path); - } - } - ``` - - ![](figures/en-us_image_0000001127125212.png) - +**Parameters** + +| Parameter | Type | Description | +| --------- | ------ | ------------------------------------------------------- | +| x | number | X-coordinate of the upper left corner of the rectangle. | +| y | number | Y-coordinate of the upper left corner of the rectangle. | +| width | number | Width of the rectangle. | +| height | number | Height of the rectangle. | + +**Example** + ```html + +
+ +
+ ``` + + ```js +// xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + } +} + ``` + + ![en-us_image_0000001127125212](figures/en-us_image_0000001127125212.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index d506add310a3c52839d8f688d9493cace324c7c5..fab92d96d3d221c425066bcd624302b13b37df55 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -35,33 +35,35 @@ Obtains an image from the specified source for subsequent rendering and display. **Parameters** -| Name| Type | Mandatory| Default Value| Description | -| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | -| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md) | Yes | - | Image source. Both local and online images are supported.
When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. | +| Name | Type | Mandatory | Default Value | Description | +| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.
When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name | Type | Default Value | Description | -| --------------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- | -| alt | string \| [Resource](../../ui/ts-types.md) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | -| objectFit | [ImageFit](#imagefit-enums) | ImageFit.Cover | Image scale type. | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | -| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.
**NOTE**
This attribute is not applicable to SVG images or **PixelMap** objects. | -| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | +| Name | Type | Default Value | Description | +| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | +| alt | string \| [Resource](../../ui/ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | +| objectFit | ImageFit | ImageFit.Cover | Image scale type. | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | +| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
**NOTE**
> This attribute is not applicable to SVG images.
> This attribute is not applicable to **PixelMap** objects. | +| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | | sourceSize | {
width: number,
height: number
} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects. | | syncLoad8+ | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. | +| copyOption9+ | [CopyOptions](#copyoptions) | CopyOptions.None | Whether the image can be copied. (SVG images cannot be copied.)| +| colorFilter9+ | [ColorFilter](../../ui/ts-types.md) | - | Color filter of the image. | ### ImageFit -| Name | Description | -| --------- | -------------------------------- | -| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. | -| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | -| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | -| None | The image is displayed in its original size. Generally, this enum is used together with the **objectRepeat** attribute.| -| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. | +| Name | Description | +| --------- | ------------------------------------------------------------ | +| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.| +| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | +| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | +| None | The image is displayed in its original size. | +| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. | ### ImageInterpolation @@ -79,15 +81,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Original | The image is rendered based on the original image, including the color. | | Template | The image is rendered as a template image, and its color is ignored.| +### CopyOptions9+ + +| Name| Description| +| -------- | -------- | +| None | Copy and paste is not allowed.| +| InApp | Intra-application copy and paste is allowed.| +| LocalDevice | Intra-device copy and paste is allowed.| +| CrossDevice | Cross-device copy and paste is allowed.| + ## Events In addition to the universal events (ts-universal-events-click.md), the following events are supported. -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| -| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
| -| onFinish(callback: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| +| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels. | +| onFinish(callback: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. | ## Example @@ -235,8 +246,8 @@ struct ImageExample2 { @Entry @Component struct ImageExample3 { - @State width: number = 0 - @State height: number = 0 + @State widthValue: number = 0 + @State heightValue: number = 0 private on: Resource = $r('app.media.image_on') private off: Resource = $r('app.media.image_off') private on2off: Resource = $r('app.media.image_on2off') @@ -257,8 +268,8 @@ struct ImageExample3 { .height(180).width(180) // Obtain the size of an image after the image loading is complete. .onComplete((msg: { width: number,height: number }) => { - this.width = msg.width - this.height = msg.height + this.widthValue = msg.width + this.heightValue = msg.height }) .onError(() => { console.log('load image fail') diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md index ed83909a33d4735264f6d832cf20066d7869d671..6389070b10a4425b7569bec62e5413d109c31b11 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md @@ -31,6 +31,7 @@ Implements a target window, which is used to remotely control the animation. | bundleName | string | Process corresponding to the animation window.| | abilityName | string | Ability corresponding to the animation window.| | windowBounds | [RRect](#rrect) | Actual size of the animation window.| +| missionId | number | Mission ID. | ## RRect Implements a rounded rectangle. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index d83bdd8d4b6079e2a759d19320dd8cee716f0948..118c383eaff889250cc46270c23bb2bd3e8b3eb2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -1,7 +1,9 @@ # PinchGesture +PinchGesture is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers. -> **NOTE**
+> **NOTE** +> > This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -41,25 +43,26 @@ PinchGesture(options?: { fingers?: number, distance?: number }) ## Example -``` +```ts +// xxx.ets @Entry @Component struct PinchGestureExample { - @State scale: number = 1 + @State scaleValue: number = 1 build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text('PinchGesture scale:' + this.scale) } .height(100).width(200).padding(20).border({ width: 1 }).margin(80) - .scale({ x: this.scale, y: this.scale, z: this.scale }) + .scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue }) .gesture( PinchGesture() .onActionStart((event: GestureEvent) => { console.info('Pinch start') }) .onActionUpdate((event: GestureEvent) => { - this.scale = event.scale + this.scaleValue = event.scale }) .onActionEnd(() => { console.info('Pinch end')