diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898470.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898470.gif deleted file mode 100644 index b0422fb68634122e8ec69e1eb90a7c6bd780b17d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898470.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png deleted file mode 100644 index 05e44b9914ea290f512ed0c2cbc3502b584cd0af..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251292933.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251292933.gif deleted file mode 100644 index 587325d41b6320ff8e25afd9d2b19e3d1b5a11d5..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251292933.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058401.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058401.png deleted file mode 100644 index 3fbc152bb27dc98b9db8ace65a5b820c72f77879..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058401.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/imageAnimator.gif b/en/application-dev/reference/arkui-ts/figures/imageAnimator.gif new file mode 100644 index 0000000000000000000000000000000000000000..9686185c04ef6c0a764fa7fcb91b8270d503f79d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/imageAnimator.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/transform.PNG b/en/application-dev/reference/arkui-ts/figures/transform.PNG new file mode 100644 index 0000000000000000000000000000000000000000..a840e7050d1ae79179722dd9f23e4f383d1db2ec Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/transform.PNG differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index a8064f3c6d6ff02915a95501e8d846f454970589..21d4f71e0c0c71ccbd5b571380f20552f7abcd48 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -7,8 +7,6 @@ The **\** component allows users to select a date from the given ran > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - - ## Child Components Not supported @@ -32,14 +30,14 @@ Creates a date picker in the given date range. | Name | Type | Description | | ------| -------------- | -------- | -| lunar | boolean | Whether to display the lunar calendar.
- **true**: Display the lunar calendar.
- **false**: Do not display the lunar calendar.
Default value: **false**| +| lunar | boolean | Whether to display the lunar calendar.
- **true**: Display the lunar calendar.
- **false**: Do not display the lunar calendar.
Default value: **false**| ## Events | Name| Description| | -------- | -------- | -| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| +| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| ## DatePickerResult @@ -53,55 +51,35 @@ Creates a date picker in the given date range. ## Example -### Date Picker Sample Code (With Lunar Calendar) - ```ts // xxx.ets @Entry @Component -struct DatePickerExample01 { +struct DatePickerExample { + @State isLunar: boolean = false private selectedDate: Date = new Date('2021-08-08') build() { Column() { + Button('Switch Calendar') + .margin({ top: 30 }) + .onClick(() => { + this.isLunar = !this.isLunar + }) DatePicker({ start: new Date('1970-1-1'), end: new Date('2100-1-1'), - selected: this.selectedDate, + selected: this.selectedDate }) - .lunar(true) - .onChange((date: DatePickerResult) => { - console.info('select current date is: ' + JSON.stringify(date)) - }) - }.width('100%') - } -} -``` - + .lunar(this.isLunar) + .onChange((value: DatePickerResult) => { + this.selectedDate.setFullYear(value.year, value.month, value.day) + console.info('select current date is: ' + JSON.stringify(value)) + }) -### Date Picker Sample Code (No Lunar Calendar) - -```ts -// xxx.ets -@Entry -@Component -struct DatePickerExample02 { - private selectedDate: Date = new Date('2021-08-08') - - build() { - Column() { - DatePicker({ - start: new Date('1970-1-1'), - end: new Date('2100-1-1'), - selected: this.selectedDate, - }) - .lunar(false) - .onChange((date: DatePickerResult) => { - console.info('select current date is: ' + JSON.stringify(date)) - }) }.width('100%') } } ``` -![en-us_image_0000001251092975](figures/en-us_image_0000001251092975.png) +![datePicker](figures/datePicker.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index 828e248ed892647ddd0fe247a68e596ab371ee32..e460123d460f61c4dc90d48122687ce1866b84b6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -6,8 +6,6 @@ The **\** component enables images to be played frame by frame. T > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - ## Child Components Not supported @@ -20,26 +18,26 @@ ImageAnimator() ## Attributes -| Name | Type | Mandatory | Description | -| ---------- | ----------------------- | -------- | -------- | -| images | Array<ImageFrameInfo> | No | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.
Default value: **[]** | -| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | No | Playback status of the animation. The default status is **Initial**.
Default value: **AnimationStatus.Initial**| -| duration | number | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.
Default value: **1000**| -| reverse | boolean | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.
Default value: **false**| -| fixedSize | boolean | No | Whether the image size is the same as the component size.
**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
**false**: The width, height, top, and left attributes of each image must be set separately.
Default value: **true**| -| preDecode | number | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.
Default value: **0**| -| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | No | Status before and after the animation starts. For details about the options, see **FillMode**.
Default value: **FillMode.Forwards**| -| iterations | number | No | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| +| Name | Type |Description | +| ---------- | ----------------------- |-------- | +| images | Array<[ImageFrameInfo](#imageframeinfo)> | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.
Default value: **[]**
**NOTE**
Dynamic update is not supported.| +| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Playback status of the animation. The default status is **Initial**.
Default value: **AnimationStatus.Initial**| +| duration | number | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.
Default value: **1000**| +| reverse | boolean | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.
Default value: **false**| +| fixedSize | boolean | Whether the image size is the same as the component size.
**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
**false**: The width, height, top, and left attributes of each image must be set separately.
Default value: **true**| +| preDecode | number | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.
Default value: **0**| +| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.
Default value: **FillMode.Forwards**| +| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -- ImageFrameInfo +## ImageFrameInfo | Name | Type | Mandatory| Description| | -------- | -------------- | -------- | -------- | | src | string \| [Resource](ts-types.md#resource)9+ | Yes | Image path. The image format can be .svg, .png, or .jpg. Since API version 9, this attribute accepts paths of the [Resource](ts-types.md#resource) type.| -| width | [Length](ts-types.md#length) | No | Image width.
Default value: **0** | -| height | [Length](ts-types.md#length) | No | Image height.
Default value: **0** | -| top | [Length](ts-types.md#length) | No | Vertical coordinate of the image relative to the upper left corner of the widget
Default value: **0** | -| left | [Length](ts-types.md#length) | No | Horizontal coordinate of the image relative to the upper left corner of the widget
Default value: **0** | +| width | number \| string | No | Image width.
Default value: **0** | +| height | number \| string | No | Image height.
Default value: **0** | +| top | number \| string | No | Vertical coordinate of the image relative to the upper left corner of the widget
Default value: **0** | +| left | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget
Default value: **0** | | duration | number | No | Playback duration of each image frame, in milliseconds.
Default value: **0** | @@ -47,11 +45,11 @@ ImageAnimator() | Name| Description| | -------- | -------- | -| onStart(event: () => void) | Triggered when the animation starts to play.| -| onPause(event: () => void) | Triggered when the animation playback is paused.| -| onRepeat(event: () => void) | Triggered when the animation playback is repeated.| -| onCancel(event: () => void) | Triggered when the animation playback is canceled.| -| onFinish(event: () => void) | Triggered when the animation playback is complete.| +| onStart(event: () => void) | Triggered when the animation starts to play.| +| onPause(event: () => void) | Triggered when the animation playback is paused.| +| onRepeat(event: () => void) | Triggered when the animation playback is repeated.| +| onCancel(event: () => void) | Triggered when the animation playback is canceled.| +| onFinish(event: () => void) | Triggered when the animation playback is complete.| ## Example @@ -66,47 +64,46 @@ struct ImageAnimatorExample { @State iterations: number = 1 build() { - Column({ space:5 }) { + Column({ space: 10 }) { ImageAnimator() .images([ - { - // The comment folder is at the same level as the pages folder. - src: '/comment/bg1.jpg', + { + src: $r('app.media.img1'), duration: 500, - width: 325, - height: 200, + width: 170, + height: 120, top: 0, left: 0 }, { - src: '/comment/bg2.jpg', + src: $r('app.media.img2'), duration: 500, - width: 325, - height: 200, + width: 170, + height: 120, top: 0, - left: 0 + left: 170 }, { - src: $r('app.media.bg3'), + src: $r('app.media.img3'), duration: 500, - width: 325, - height: 200, - top: 0, - left: 0 + width: 170, + height: 120, + top: 120, + left: 170 }, { - src: $rawfile('bg4.jpg'), + src: $r('app.media.img4'), duration: 500, - width: 325, - height: 200, - top: 0, + width: 170, + height: 120, + top: 120, left: 0 } ]) .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2) - .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210) - .margin({top:100}) - .onStart(() => { // Triggered when the frame animation playback starts. + .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) + .margin({ top: 100 }) + .onStart(() => { console.info('Start') }) .onPause(() => { @@ -118,35 +115,35 @@ struct ImageAnimatorExample { .onCancel(() => { console.info('Cancel') }) - .onFinish(() => { // Triggered after the frame animation playback is complete. - this.state = AnimationStatus.Stopped + .onFinish(() => { console.info('Finish') }) Row() { Button('start').width(100).padding(5).onClick(() => { this.state = AnimationStatus.Running - }) + }).margin(5) Button('pause').width(100).padding(5).onClick(() => { - this.state = AnimationStatus.Paused - }) + this.state = AnimationStatus.Paused // Display the image of the current frame. + }).margin(5) Button('stop').width(100).padding(5).onClick(() => { - this.state = AnimationStatus.Stopped - }) + this.state = AnimationStatus.Stopped // Display the image of the initial frame. + }).margin(5) } + Row() { Button('reverse').width(100).padding(5).onClick(() => { this.reverse = !this.reverse - }) + }).margin(5) Button('once').width(100).padding(5).onClick(() => { this.iterations = 1 - }) - Button('iteration').width(100).padding(5).onClick(() => { - this.iterations = -1 - }) + }).margin(5) + Button('infinite').width(100).padding(5).onClick(() => { + this.iterations = -1 // The animation is played for an unlimited number of times. + }).margin(5) } - }.width('100%').height('100%').backgroundColor(0xF1F3F5) + }.width('100%').height('100%') } } ``` -![en-us_image_0000001211898470](figures/en-us_image_0000001211898470.gif) +![imageAnimator](figures/imageAnimator.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md index 6153d7f6cb5f361592d5ae611f4fb9284ea59427..33a7c78171bc139b35cdb326c91dc9c325f33799 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -1,6 +1,6 @@ # TextPicker -The **TextPicker** component allows users to scroll to select text. +The **\** component allows users to scroll to select text. > **NOTE** > @@ -23,14 +23,14 @@ Creates a text picker based on the selection range specified by **range**. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.| -| selected | number | No| Index of the selected item in the range.
Default value: **0**| -| value | string | No| Value of the selected item. The priority of this parameter is lower than that of **selected**.
Default value: value of the first item| +| selected | number | No| Index of the default item in the range.
Default value: **0**| +| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.
Default value: value of the first item| ## Attributes | Name| Type| Description| | -------- | -------- | -------- | -| defaultPickerItemHeight | number \| string | Default height of an item in the picker.| +| defaultPickerItemHeight | number \| string | Height of each item in the picker.| ## Events @@ -53,7 +53,7 @@ struct TextPickerExample { build() { Column() { - TextPicker({range: this.fruits, selected: this.select}) + TextPicker({ range: this.fruits, selected: this.select }) .onChange((value: string, index: number) => { console.info('Picker item changed, value: ' + value + ', index: ' + index) }) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index cc432c20a683e8ae1b81b4772eb9961a8e575935..d8ba7caae7fda819684c2b6ac53133c8bbebbacb 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -16,7 +16,7 @@ Not supported TimePicker(options?: {selected?: Date}) -Creates a time picker whose default time range is from 00:00 to 23:59. +Creates a time picker, which is in 24-hour format by default. **Parameters** @@ -38,7 +38,8 @@ Creates a time picker whose default time range is from 00:00 to 23:59. | ---------------------------------------- | ----------- | | onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.| -### TimePickerResult +## TimePickerResult + | Name | Type | Description | | ------ | ------ | ------- | | hour | number | Hour portion of the selected time.| @@ -55,20 +56,27 @@ Creates a time picker whose default time range is from 00:00 to 23:59. @Entry @Component struct TimePickerExample { + @State isMilitaryTime: boolean = false private selectedTime: Date = new Date('2022-07-22T08:00:00') build() { Column() { + Button ('Switch Time Format') + .margin({ top: 30 }) + .onClick(() => { + this.isMilitaryTime = !this.isMilitaryTime + }) TimePicker({ selected: this.selectedTime, }) - .useMilitaryTime(true) - .onChange((date: TimePickerResult) => { - console.info('select current date is: ' + JSON.stringify(date)) - }) + .useMilitaryTime(this.isMilitaryTime) + .onChange((value: TimePickerResult) => { + this.selectedTime.setHours(value.hour, value.minute) + console.info('select current date is: ' + JSON.stringify(value)) + }) }.width('100%') } } ``` -![en-us_image_0000001251292933](figures/en-us_image_0000001251292933.gif) +![timePicker](figures/timePicker.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index 7d6c24e671419edc603a17cdea023878ebc6239d..5b8c2e1044dc7bc5dcf45e95386adb1d7f30651c 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -1,10 +1,10 @@ # Flex -The **\** component allows for elastic layout of child components. +The **\** component allows for flexible layout of child components. > **NOTE** > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -> - The **\** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required. +> - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required. ## Required Permissions @@ -14,7 +14,7 @@ None ## Child Components -This component can contain child components. +Supported ## APIs @@ -30,7 +30,7 @@ Creates a standard **\** component. | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. | - | alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.| + | alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.| ## Example @@ -148,7 +148,7 @@ struct FlexExample2 { // xxx.ets @Component struct JustifyContentFlex { - @Prop justifyContent : number + justifyContent : number build() { Flex({ justifyContent: this.justifyContent }) { @@ -197,7 +197,7 @@ struct FlexExample3 { // xxx.ets @Component struct AlignItemsFlex { - @Prop alignItems : number + alignItems : number build() { Flex({ alignItems: this.alignItems }) { @@ -246,7 +246,7 @@ struct FlexExample4 { // xxx.ets @Component struct AlignContentFlex { - @Prop alignContent: number + alignContent: number build() { Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index 01339b4030489214e689adaf54bcaae98b8dcf3a..344fda5cd13ac94198bbe5e993d671122490028f 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -9,26 +9,26 @@ Transformation attributes allow you to rotate, translate, scale, or transform a ## Attributes -| Name | Type | Description | -| --------- | ------------------------------------------------------------------------ | ---------------------------------------- | -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | -| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
}| -| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | -| transform | Matrix4Transit | Transformation matrix of the component. | +| Name | Type | Description | +| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | +| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
} | +| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | +| transform | Matrix4Transit | Transformation matrix of the component. | ## Example ```ts // xxx.ets -import Matrix4 from '@ohos.matrix4' +import matrix4 from '@ohos.matrix4' @Entry @Component struct TransformExample { build() { Column() { - Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) Row() .rotate({ x: 1, @@ -40,23 +40,28 @@ struct TransformExample { }) // The component rotates around the center point of the rotation axis (1,1,1) clockwise by 300 degrees. .width(100).height(100).backgroundColor(0xAFEEEE) - Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30) + Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14) Row() - .translate({ x: 100, y: 5 }) // The component translates by 100 along the x-axis and by 5 along the y-axis. - .width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10}) + .translate({ x: 100, y: 10 }) // The component translates by 100 along the x-axis and by 10 along the y-axis. + .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 }) - Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) Row() .scale({ x: 2, y: 0.5}) // The height and width are doubled. The z-axis has no effect in 2D mode. .width(100).height(100).backgroundColor(0xAFEEEE) - Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) Row() .width(100).height(100).backgroundColor(0xAFEEEE) - .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 })) + .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({ + x: 0, + y: 0, + z: 1, + angle: 60 + })) }.width('100%').margin({ top: 5 }) } } ``` -![en-us_image_0000001257058401](figures/en-us_image_0000001257058401.png) +![transform](figures/transform.PNG)