diff --git a/en/application-dev/reference/arkui-ts/figures/datePickerLightUp1.png b/en/application-dev/reference/arkui-ts/figures/datePickerLightUp1.png new file mode 100644 index 0000000000000000000000000000000000000000..276b78ef546e753e1f54c82e60b262ca09f770cc Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/datePickerLightUp1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/datePickerLightUp2.png b/en/application-dev/reference/arkui-ts/figures/datePickerLightUp2.png new file mode 100644 index 0000000000000000000000000000000000000000..25addf8fdd52accf2808ea906239e434b6ff293a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/datePickerLightUp2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textInputSpherical1.png b/en/application-dev/reference/arkui-ts/figures/textInputSpherical1.png new file mode 100644 index 0000000000000000000000000000000000000000..8cfd7ea966f6d2d916fbb30c32c5ab4eaf522990 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textInputSpherical1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textInputSpherical2.png b/en/application-dev/reference/arkui-ts/figures/textInputSpherical2.png new file mode 100644 index 0000000000000000000000000000000000000000..bde69b8597dd79b199a6612be960a238c1de0dc9 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textInputSpherical2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textLightUp1.png b/en/application-dev/reference/arkui-ts/figures/textLightUp1.png new file mode 100644 index 0000000000000000000000000000000000000000..d696e61fa669c6592e260e3ad0f3206e2cf45074 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textLightUp1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textLightUp2.png b/en/application-dev/reference/arkui-ts/figures/textLightUp2.png new file mode 100644 index 0000000000000000000000000000000000000000..8674b8af58468eec28e065311b610c290265d882 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textLightUp2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textLightUp3.png b/en/application-dev/reference/arkui-ts/figures/textLightUp3.png new file mode 100644 index 0000000000000000000000000000000000000000..d22967a38886f445e189451aae173edb2455c478 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textLightUp3.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textPixelStretch1.png b/en/application-dev/reference/arkui-ts/figures/textPixelStretch1.png new file mode 100644 index 0000000000000000000000000000000000000000..bcf4db606d9e10ef6c418474bbaedae96c232436 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textPixelStretch1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textPixelStretch2.png b/en/application-dev/reference/arkui-ts/figures/textPixelStretch2.png new file mode 100644 index 0000000000000000000000000000000000000000..aca08823440ca1fb14ca9a681c625ed4e392154f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textPixelStretch2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/textPixelStretch3.png b/en/application-dev/reference/arkui-ts/figures/textPixelStretch3.png new file mode 100644 index 0000000000000000000000000000000000000000..418870d8dce2b5a7c492bdc26193894a57b9b66d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/textPixelStretch3.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md new file mode 100644 index 0000000000000000000000000000000000000000..83cf55784249ebe7af2a2ad7e5f1deab8bc5176c --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md @@ -0,0 +1,80 @@ +# Light Up Effect + +You can apply a light up effect to a component. + +> **NOTE** +> +> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API. + +## Attributes + +| Name| Type| Description| +| -------- | -------- | -------- | +| lightUpEffect | [number] | Light up degree of the component.
The value ranges from 0 to 1.
If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| + +## Example + +### Example 1 +```ts +// xxx.ets +@Entry +@Component +struct LightUpExample { + build() { + Stack() { + Text('This is the text content with letterSpacing 0.') + .letterSpacing(0) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('50%') + .lightUpEffect(0.6) + }.alignContent(Alignment.Center).width("100%").height("100%") + } +} + +``` +Below is how the component looks with **lightUpEffect** set to **0.6**: + +![textLightUp3](figures/textLightUp3.png) + +Below is how the component looks with **lightUpEffect** set to **0.2**: + +![textLightUp2](figures/textLightUp2.png) + +Below is how the component looks without the light up effect applied: + +![textLightUp1](figures/textLightUp1.png) +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct LightUpExample { + @State isLunar: boolean = false + private selectedDate: Date = new Date('2028-08-08') + build() { + Stack() { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: this.selectedDate + }) + .lunar(this.isLunar) + .onChange((value: DatePickerResult) => { + this.selectedDate.setFullYear(value.year, value.month, value.day) + console.info('select current date is: ' + JSON.stringify(value)) + }) + .lightUpEffect(0.6) + + }.alignContent(Alignment.Center).width("100%").height("100%") + } +} +``` + +![datePickerLightUp2](figures/datePickerLightUp2.png) + +Below is how the component looks without the light up effect applied: + +![datePickerLightUp1](figures/datePickerLightUp1.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md new file mode 100644 index 0000000000000000000000000000000000000000..470e6a5349598da54b68e3e798ed160b6f9e5639 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md @@ -0,0 +1,78 @@ +# Pixel Stretch Effect + +You can apply a pixel stretch effect to a component. + +> **NOTE** +> +> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API. + +## Attributes + +| Name| Type| Description| +| -------- | -------- | -------- | +| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | Pixel stretch effect options.
The **options** parameter includes the length by which a pixel is stretched toward the four edges.
**NOTE**
1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.
2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:
(1) The image shrinks from the four edges by the absolute value of length set through **options**. (2) The image is stretched back to the original size with edge pixels.
3. Constraints on **options**:
(1) The length values for the four edges must be all postive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. 2. The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. 3. If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.| + +## Example + +### Example 1 + +```ts +// xxx.ets +@Entry +@Component +struct PixelStretchExample { + build() { + Stack() { + Text('This is the text content with letterSpacing 0.') + .letterSpacing(0) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('50%') + .pixelStretchEffect({top:10,left:10,right:10,bottom:10 }) + }.alignContent(Alignment.Center).width("100%").height("100%") + } +} + +``` +Below is how the component looks with the pixel stretch effect applied: + +![textPixelStretch1](figures/textPixelStretch1.png) + +Below is how the component looks without the pixel stretch effect applied: + +![textPixelStretch2](figures/textPixelStretch2.png) + +A comparison of the preceding two figures shows that, if the length values are positive, the original image is stretched. + +### Example 2 + +Based on Example 1, change the length values of the pixel stretch effect to negative: + +```ts +// xxx.ets +@Entry +@Component +struct PixelStretchExample { + build() { + Stack() { + Text('This is the text content with letterSpacing 0.') + .letterSpacing(0) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('50%') + .pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 }) + }.alignContent(Alignment.Center).width("100%").height("100%") + } +} +``` +Below is how the component looks: + +![textPixelStretch3](figures/textPixelStretch3.png) + +Compared with the original image, the effect drawing is implemented in two steps: + +1. The image size is reduced. The resultant size is the originial image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080. + +2. Edge pixels are stretched to restore the image to its original size. \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md new file mode 100644 index 0000000000000000000000000000000000000000..8568bee6aa45bd74382c3ba3c0bff61808b63c6f --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md @@ -0,0 +1,49 @@ +# Spherical Effect + +You can apply a spherical effect to a component to make it appear spherized. + +> **NOTE** +> +> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API. + +## Attributes + +| Name| Type| Description| +| -------- | -------- | -------- | +| sphericalEffect | [number] | Spherical degree of the component.
The value ranges from 0 to 1.
**NOTE**
1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.
2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.
3. If the shadow effect is set for a component, the spherical effect is not supported.| + +## Example + +### Example 1 +```ts +// xxx.ets +@Entry +@Component +struct SphericalEffectExample { + build() { + Stack() { + TextInput({placeholder: "Enter a percentage."}) + .width('50%') + .height(35) + .type(InputType.Number) + .enterKeyType(EnterKeyType.Done) + .caretColor(Color.Red) + .placeholderColor(Color.Blue) + .placeholderFont({ + size: 20, + style: FontStyle.Italic, + weight: FontWeight.Bold + }) + .sphericalEffect(0.5) + }.alignContent(Alignment.Center).width("100%").height("100%") + } +} + +``` +Below is how the component looks with the spherical effect applied: + +![textInputSpherical1](figures/textInputSpherical1.png) + +Below is how the component looks without the spherical effect applied: + +![textInputSpherical2](figures/textInputSpherical2.png)