未验证 提交 42d1ee71 编写于 作者: O openharmony_ci 提交者: Gitee

!8216 翻译完成 7222

Merge pull request !8216 from ester.zhou/TR-722
# CanvasGradient<a name="EN-US_TOPIC_0000001173164733"></a>
# 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<a name="section12691015917"></a>
addColorStop\(offset: number, color: string\): void
Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color.
- Parameters
<a name="table1032173253712"></a>
<table><thead align="left"><tr id="row166643263712"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p1966932123714"><a name="p1966932123714"></a><a name="p1966932123714"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p10661232173710"><a name="p10661232173710"></a><a name="p10661232173710"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p66673283719"><a name="p66673283719"></a><a name="p66673283719"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1166193243714"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p96673263717"><a name="p96673263717"></a><a name="p96673263717"></a>offset</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1674323372"><a name="p1674323372"></a><a name="p1674323372"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p12672326374"><a name="p12672326374"></a><a name="p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p>
</td>
</tr>
<tr id="row146783253715"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p46773203715"><a name="p46773203715"></a><a name="p46773203715"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1967173213712"><a name="p1967173213712"></a><a name="p1967173213712"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p1467123233710"><a name="p1467123233710"></a><a name="p1467123233710"></a>Gradient color to set.</p>
</td>
</tr>
</tbody>
</table>
- Example Code
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
```
```
// 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
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div>
```
```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)
......@@ -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.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** 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.<br>\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- 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.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** 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.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- 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.<br>**NOTE**<br>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.<br>**NOTE**<br>This attribute is not applicable to SVG images or **PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>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.<br>**NOTE**<br>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.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
| syncLoad<sup>8+</sup> | 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. |
| copyOption<sup>9+</sup> | [CopyOptions](#copyoptions) | CopyOptions.None | Whether the image can be copied. (SVG images cannot be copied.)|
| colorFilter<sup>9+</sup> | [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.|
### CopyOptions<sup>9+</sup>
| 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,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>|
| onFinish(callback: () =&gt; 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,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br> |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. |
| onFinish(callback: () =&gt; 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')
......
......@@ -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.
......
# 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**<br>
> **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')
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册