diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png new file mode 100644 index 0000000000000000000000000000000000000000..e13e20f195beab0c37dbcd33583dc5af1d8098ea Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174264374.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174264374.png new file mode 100644 index 0000000000000000000000000000000000000000..111a72e40d95524d0dfea95d6a0d926f46c2255a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174264374.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642010.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642010.gif new file mode 100644 index 0000000000000000000000000000000000000000..48d1b845d4aff51763ff862bbe44f0958567f914 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642010.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642020.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642020.gif new file mode 100644 index 0000000000000000000000000000000000000000..32f26ff4f31feeeb53db68a43413ec737256184e Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001118642020.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png new file mode 100644 index 0000000000000000000000000000000000000000..cbd85c4f6340743af87cb7210e2181def3d7c7b1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264374.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264374.png new file mode 100644 index 0000000000000000000000000000000000000000..4e244b1e2a26df6279a5f3558477069954c7bc12 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264374.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872516.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872516.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872518.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872518.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872520.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872520.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872522.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872522.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872524.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872524.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032476.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032476.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032478.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032478.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032482.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032482.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192454.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192454.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192456.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192456.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192460.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192460.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192462.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192462.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192464.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192464.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352450.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352450.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352452.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352452.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352456.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352456.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352460.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352460.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png deleted file mode 100644 index 801bf97495213f41c2b196b2f170af85b156dd5b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058490.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058490.gif deleted file mode 100644 index 0213b777e0352ac7830bde7d9bff40edf69a1a51..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058490.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png deleted file mode 100644 index 5da42e3e14d601745274cb62d914c6600620bb25..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png deleted file mode 100644 index b2728fd1b4e050edddf499398b44a7e3aa634109..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png deleted file mode 100644 index 4fb651372a67eca9de3848baa6b66cac0ee9f173..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744197.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744197.png new file mode 100644 index 0000000000000000000000000000000000000000..884eb29ed12c00641fec55f358a41f15f581c335 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744197.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712437.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712437.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712443.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712443.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712445.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712445.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712447.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712447.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832403.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832403.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832405.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832405.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832409.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832409.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952397.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952397.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952399.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952399.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952401.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952401.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952403.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952403.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952405.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952405.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952407.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952407.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032423.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032423.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032425.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032425.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032429.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032429.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032431.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032431.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif new file mode 100644 index 0000000000000000000000000000000000000000..198227c0282462bfb34f5363a7996a6817e1bb83 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858385.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858385.gif deleted file mode 100644 index b0e5e55e1af19bb46a74300bf2ae60f95225a874..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858385.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png deleted file mode 100644 index 138e011909c2d4738f3cd9671a79ea0c37cb5b87..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png deleted file mode 100644 index 5d649492978121a484c2a7a55d4548384c919149..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png deleted file mode 100644 index 50726d3e461d7a5dbfec674899fee603aaf41bee..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png deleted file mode 100644 index d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png deleted file mode 100644 index 2eed5759714b99dc039faab67acdfe6d67bfc6ac..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png deleted file mode 100644 index e3b4b42aecaef72ed4a08b3566a895b3f9b12343..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/opacity.png b/en/application-dev/reference/arkui-ts/figures/opacity.png new file mode 100644 index 0000000000000000000000000000000000000000..d95114ede941db77cf865d3fab288f602ddcc1d0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/opacity.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index eeccffc2c70a13cfd51e29dc68c86a7269074e85..cc9b3a8f0c756f06bdb1e7726aca260729cdc947 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -2,17 +2,20 @@ The **\** component parses and displays HTML text. -> **NOTE** +> **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +## Required Permissions + +None ## Child Components Not supported ## APIs -RichText(content:string) +RichText(content: string) **Parameters** @@ -42,7 +45,7 @@ RichText(content:string) | \\ | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \ tag where it could be confused with a hyperlink.| \

\This is an underlined paragraph\\

| | \ | Used to embed CSS within an HTML document.| \ | | style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \

This is a heading\

\

This is a paragraph\

| -| \ | Used to embed or reference a client-side script, such as JavaScript.| \ | +| \ | Embeds or references a client-side script, such as JavaScript. | \ | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md index 8d269076e93c5e00e11d45a6022f3be1eb00dc7f..e8eff678ee76a418817fec09e97944e7a585820d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md @@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number | Name| Description| | -------- | -------- | -| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a long press gesture is recognized.| -| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a long press gesture is lift.| -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.| +| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when a long press gesture is recognized.| +| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the finger used for a long press gesture is lift.| +| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a long press gesture is recognized.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 709ea8739ba7628a3a6e0df6157a115f561de298..57519a7bba6b0c5d878fb59726e879b26c1e8247 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb **Parameters** -| Name | Type | Mandatory | Description | -| --------- | ------------ | --------- | ---------------------------------------- | -| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1** | -| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All** | -| distance | number | No | Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. | +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**| +| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All**| +| distance | number | No| Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| ## PanDirection enums -| Name | Description | -| ---------- | --------------------- | -| All | All directions. | -| Horizontal | Horizontal panning. | -| Vertical | Vertical panning. | -| Left | Panning to the left. | -| Right | Panning to the right. | -| Up | Panning up. | -| Down | Panning down. | -| None | Panning disabled. | +| Name| Description| +| -------- | -------- | +| All | All directions.| +| Horizontal | Horizontal panning.| +| Vertical | Vertical panning.| +| Left | Panning to the left.| +| Right | Panning to the right.| +| Up | Panning up.| +| Down | Panning down.| +| None | Panning disabled.| ## PanGestureOptions @@ -47,21 +47,21 @@ See the **PanGesture** parameters. **APIs** -| Name | Description | -| --------------------------------- | --------------------------- | -| setDirection(value: PanDirection) | Sets the direction. | -| setDistance(value: number) | Sets the distance. | -| setFingers(value: number) | Sets the number of fingers. | +| Name| Description| +| -------- | -------- | +| setDirection(value: PanDirection) | Sets the direction.| +| setDistance(value: number) | Sets the distance.| +| setFingers(value: number) | Sets the number of fingers.| ## Events -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a pan gesture is recognized. | -| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the pan gesture status is updated. | -| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a pan gesture is lift. | -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | +| Name| Description| +| -------- | -------- | +| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Invoked when a pan gesture is recognized.| +| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Invoked when the pan gesture status is updated.| +| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Invoked when the finger used for a pan gesture is lift.| +| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.| ## Example @@ -115,3 +115,13 @@ struct PanGestureExample { } } ``` + +**Diagrams** + +Pannig to the left: + +![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png) + +Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner. + + ![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png) 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 d480a82efc9c652dd8f1cd100cb1cbc31fe690c5..6ebc9a6295720671228fe1651d000fae7c609356 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 @@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number }) **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ------ | --------- | ---------------------------------------- | -| fingers | number | No | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.
Default value: **2** | -| distance | number | No | Minimum recognition distance, in vp.
Default value: **3** | +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.
Default value: **2**| +| distance | number | No| Minimum recognition distance, in vp.
Default value: **3**| ## Events -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a pinch gesture is recognized. | -| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a pinch gesture on the screen. | -| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for a pinch gesture is lift. | -| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized. | +| Name| Description| +| -------- | -------- | +| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a pinch gesture is recognized.| +| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a pinch gesture on the screen.| +| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for a pinch gesture is lift.| +| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index 51daac536bb5560777ff575b6b31cded0e034179..2280e018e57136fdaaaccd02e02cec1a2c17496a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number }) | Parameter| Description| | -------- | -------- | -| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.| -| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.| -| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.| -| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.| +| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.| +| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.| +| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.| +| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.| ## Example @@ -49,7 +49,7 @@ struct RotationGestureExample { .padding(20) .border({ width: 3 }) .margin(80) - .rotate({ angle: this.angle }) + .rotate({ z: 1, angle: this.angle }) // The gesture event is triggered by rotating with two fingers. .gesture( RotationGesture() diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index e5568e192ae77712dc26e670dc8fc65af4845129..d8a6a8cd50c28fe4faecac1e91500f02a132ea89 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num **Parameters** -| Name | Type | Mandatory | Description | -| --------- | -------------- | --------- | ---------------------------------------- | -| fingers | number | No | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.
Default value: **1** | -| direction | SwipeDirection | No | Swipe direction.
Default value: **SwipeDirection.All** | -| speed | number | No | Minimum speed of the swipe gesture, in vp/s.
Default value: **100** | +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.
Default value: **1**| +| direction | [swipeDirection](#swipedirection)| No| Swipe direction.
Default value: **SwipeDirection.All**| +| speed | number | No| Minimum speed of the swipe gesture, in vp/s.
Default value: **100**| ## SwipeDirection -| Name | Description | -| ---------- | --------------------- | -| All | All directions. | -| Horizontal | Horizontal direction. | -| Vertical | Vertical direction. | -| None | Swiping disabled. | +| Name| Description| +| -------- | -------- | +| All | All directions.| +| Horizontal | Horizontal direction.| +| Vertical | Vertical direction.| +| None | Swiping disabled.| ## Events -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a swipe gesture is recognized. | +| Name| Description| +| -------- | -------- | +| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Triggered when a swipe gesture is recognized.| ## Example @@ -55,7 +55,7 @@ struct SwipeGestureExample { .width(300) .height(200) .margin(100) - .rotate({ angle: this.rotateAngle }) + .rotate({ z: 1, angle: this.rotateAngle }) // The gesture event is triggered by swiping vertically with one finger. .gesture( SwipeGesture({ direction: SwipeDirection.Vertical }) diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 2923fa7621ed3c8799cbb65a6fbf55fc6295b7f5..044f86f8c37cb2576b8840eadc64e29da58dc431 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -29,30 +29,30 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet | Name | Type | Mandatory | Description | | --------- | ------- | ---- | ----------------------------- | -| antialias | boolean | No | Whether antialiasing is enabled.
Default value: **false**| +| antialias | boolean | No | Whether to enable antialiasing.
Default value: **false** | ## Attributes -| Name | Type | Description | -| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| -| [lineWidth](#linewidth) | number | Line width. | -| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| -| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.
Default value: **'butt'**| -| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.
- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
Default value: **'miter'**| -| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
Default value: **10**| -| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**| -| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
Default value: **'left'**| -| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
Default value: **'alphabetic'**| -| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | -| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
Default value: **0.0** | -| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
Default value: **'source-over'**| -| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
Default value: **0.0**| -| [shadowColor](#shadowcolor) | string | Shadow color. | -| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | -| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
Default value: **true**| +| Name | Type | Description | +| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| +| [lineWidth](#linewidth) | number | Line width. | +| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| +| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.
Default value: **'butt'**| +| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.
- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
Default value: **'miter'**| +| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
Default value: **10**| +| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**| +| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
Default value: **'left'**| +| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
Default value: **'alphabetic'**| +| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | +| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
Default value: **0.0** | +| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
Default value: **'source-over'**| +| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
Default value: **0.0**| +| [shadowColor](#shadowcolor) | string | Shadow color. | +| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | +| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
Default value: **true**| > **NOTE** > @@ -66,8 +66,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet @Entry @Component struct FillStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -96,8 +96,8 @@ struct FillStyleExample { @Entry @Component struct LineWidthExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -126,8 +126,8 @@ struct LineWidthExample { @Entry @Component struct StrokeStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -158,8 +158,8 @@ struct StrokeStyleExample { @Entry @Component struct LineCapExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -192,8 +192,8 @@ struct LineCapExample { @Entry @Component struct LineJoinExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -227,8 +227,8 @@ struct LineJoinExample { @Entry @Component struct MiterLimit { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -262,8 +262,8 @@ struct MiterLimit { @Entry @Component struct Fonts { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -292,8 +292,8 @@ struct Fonts { @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -337,8 +337,8 @@ struct CanvasExample { @Entry @Component struct TextBaseline { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -382,8 +382,8 @@ struct TextBaseline { @Entry @Component struct GlobalAlpha { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -415,8 +415,8 @@ struct GlobalAlpha { @Entry @Component struct LineDashOffset { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -427,7 +427,7 @@ struct LineDashOffset { .onReady(() =>{ this.context.arc(100, 75, 50, 0, 6.28) this.context.setLineDash([10,20]) - this.context.lineDashOffset = 10.0; + this.context.lineDashOffset = 10.0 this.context.stroke(); }) } @@ -461,8 +461,8 @@ struct LineDashOffset { @Entry @Component struct GlobalCompositeOperation { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -499,8 +499,8 @@ struct GlobalCompositeOperation { @Entry @Component struct ShadowBlur { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -531,8 +531,8 @@ struct ShadowBlur { @Entry @Component struct ShadowColor { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -563,8 +563,8 @@ struct ShadowColor { @Entry @Component struct ShadowOffsetX { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -596,8 +596,8 @@ struct ShadowOffsetX { @Entry @Component struct ShadowOffsetY { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + 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) @@ -628,9 +628,9 @@ struct ShadowOffsetY { @Entry @Component struct ImageSmoothingEnabled { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -677,8 +677,8 @@ Fills a rectangle on the canvas. @Entry @Component struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -765,8 +765,8 @@ Clears the content in a rectangle on the canvas. @Entry @Component struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -797,12 +797,11 @@ Draws filled text on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| -------- | ------ | ---- | ---- | --------------- | -| text | string | Yes | "" | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| -| maxWidth | number | No | - | Maximum width allowed for the text. | +| Name | Type | Mandatory| Default Value| Description | +| -------- | ------ | ---- | ------ | ----------------------------- | +| text | string | Yes | '' | Text to draw. | +| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| **Example** @@ -811,8 +810,8 @@ Draws filled text on the canvas. @Entry @Component struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -842,12 +841,12 @@ Draws a text stroke on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| -------- | ------ | ---- | ---- | --------------- | -| text | string | Yes | "" | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| -| maxWidth | number | No | - | Maximum width of the text to be drawn. | +| Name | Type | Mandatory| Default Value| Description | +| -------- | ------ | ---- | ------ | ----------------------------- | +| text | string | Yes | '' | Text to draw. | +| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| +| maxWidth | number | No | - | Maximum width of the text to be drawn. | **Example** @@ -856,8 +855,8 @@ Draws a text stroke on the canvas. @Entry @Component struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -887,14 +886,14 @@ Measures the specified text to obtain its width. This API returns a **TextMetric **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ---- | ------ | ---- | ---- | ---------- | -| text | string | Yes | "" | Text to be measured.| +| Name| Type | Mandatory| Default Value| Description | +| ---- | ------ | ---- | ------ | -------------------- | +| text | string | Yes | '' | Text to be measured.| **Return value** -| Type | Description | -| ----------- | ------- | +| Type | Description | +| ----------- | ---------------- | | TextMetrics | **TextMetrics** object.| **TextMetrics** @@ -925,8 +924,8 @@ Measures the specified text to obtain its width. This API returns a **TextMetric @Entry @Component struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -968,8 +967,8 @@ Strokes a path. @Entry @Component struct Stroke { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1008,8 +1007,8 @@ Creates a drawing path. @Entry @Component struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1055,8 +1054,8 @@ Moves a drawing path to a target position on the canvas. @Entry @Component struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1100,8 +1099,8 @@ Connects the current point to a target position using a straight line. @Entry @Component struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1138,8 +1137,8 @@ Draws a closed path. @Entry @Component struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1173,10 +1172,10 @@ Creates a pattern for image filling based on a specified source image and repeti **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | -| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | -| repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| +| Name | Type | Mandatory| Description | +| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ | +| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | Source image. For details, see **ImageBitmap**. | +| repetition | string | Yes | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**.
Default value: **''**| **Return value** @@ -1191,9 +1190,9 @@ Creates a pattern for image filling based on a specified source image and repeti @Entry @Component struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1240,8 +1239,8 @@ Draws a cubic bezier curve on the canvas. @Entry @Component struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1287,8 +1286,8 @@ Draws a quadratic curve on the canvas. @Entry @Component struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1297,10 +1296,10 @@ Draws a quadratic curve on the canvas. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.beginPath(); - this.context.moveTo(20, 20); - this.context.quadraticCurveTo(100, 100, 200, 20); - this.context.stroke(); + this.context.beginPath() + this.context.moveTo(20, 20) + this.context.quadraticCurveTo(100, 100, 200, 20) + this.context.stroke() }) } .width('100%') @@ -1336,8 +1335,8 @@ Draws an arc on the canvas. @Entry @Component struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1383,8 +1382,8 @@ Draws an arc based on the radius and points on the arc. @Entry @Component struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1393,9 +1392,9 @@ Draws an arc based on the radius and points on the arc. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.moveTo(100, 20); - this.context.arcTo(150, 20, 150, 70, 50); - this.context.stroke(); + this.context.moveTo(100, 20) + this.context.arcTo(150, 20, 150, 70, 50) + this.context.stroke() }) } .width('100%') @@ -1424,7 +1423,7 @@ Draws an ellipse in the specified rectangular region on the canvas. | 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 | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. | +| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction.
**true**: Draw the arc counterclockwise.
**false**: Draw the arc clockwise. | **Example** @@ -1433,8 +1432,8 @@ Draws an ellipse in the specified rectangular region on the canvas. @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1479,8 +1478,8 @@ Creates a rectangle on the canvas. @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1522,8 +1521,8 @@ Fills the area inside a closed path on the canvas. @Entry @Component struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1574,17 +1573,17 @@ struct Fill { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - let region = new Path2D(); - region.moveTo(30, 90); - region.lineTo(110, 20); - region.lineTo(240, 130); - region.lineTo(60, 130); - region.lineTo(190, 20); - region.lineTo(270, 90); - region.closePath(); + let region = new Path2D() + region.moveTo(30, 90) + region.lineTo(110, 20) + region.lineTo(240, 130) + region.lineTo(60, 130) + region.lineTo(190, 20) + region.lineTo(270, 90) + region.closePath() // Fill path - this.context.fillStyle = 'green'; - this.context.fill(region, "evenodd"); + this.context.fillStyle = 'green' + this.context.fill(region, "evenodd") }) } .width('100%') @@ -1615,8 +1614,8 @@ Sets the current path to a clipping area. @Entry @Component struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1669,9 +1668,9 @@ struct Clip { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - let region = new Path2D(); - region.rect(80,10,20,130); - region.rect(40,50,100,50); + 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) @@ -1739,8 +1738,8 @@ Rotates a canvas clockwise around its coordinate axes. @Entry @Component struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1782,8 +1781,8 @@ Scales the canvas based on the given scale factors. @Entry @Component struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1814,7 +1813,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 @@ -1839,8 +1838,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para @Entry @Component struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1892,8 +1891,8 @@ Resets the existing transformation matrix and creates a new transformation matri @Entry @Component struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1943,8 +1942,8 @@ Moves the origin of the coordinate system. @Entry @Component struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1999,9 +1998,9 @@ Draws an image on the canvas. @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"); + 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 }) { @@ -2010,7 +2009,7 @@ Draws an image on the canvas. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.drawImage( this.img,0,0,500,500,0,0,400,200); + this.context.drawImage( this.img,0,0,500,500,0,0,400,200) }) } .width('100%') @@ -2103,8 +2102,8 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi @Entry @Component struct GetImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") build() { @@ -2114,9 +2113,9 @@ struct GetImageData { .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); + 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%') @@ -2155,8 +2154,8 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang @Entry @Component struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2383,7 +2382,7 @@ struct ToDataURL { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var dataURL = this.context.toDataURL(); + var dataURL = this.context.toDataURL() }) } .width('100%') @@ -2406,10 +2405,10 @@ Restores the saved drawing context. @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -2417,11 +2416,11 @@ Restores the saved drawing context. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - 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); + 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%') @@ -2445,8 +2444,8 @@ Saves all states of the canvas in the stack. This API is usually called when the @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2455,11 +2454,11 @@ Saves all states of the canvas in the stack. This API is usually called when the .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - 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); + 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%') @@ -2492,8 +2491,8 @@ Creates a linear gradient. @Entry @Component struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2543,8 +2542,8 @@ Creates a linear gradient. @Entry @Component struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md index 7ad31d67d2deaf3b3daab39c0f7e64c78650b890..010d27afe83fdfc41bcb152a2195d2363573ab15 100644 --- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -1,87 +1,105 @@ # Combined Gestures +Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures. > **NOTE** > -> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -## Required Permissions - -None +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## APIs GestureGroup(mode: GestureMode, ...gesture: GestureType[]) -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| -------- | -------- | -------- | -------- | -------- | -| mode | GestureMode | Yes | - | Recognition mode of combined gestures. | -| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. | +- Parameters + | Name| Type| Mandatory| Default Value| Description| + | -------- | -------- | -------- | -------- | -------- | + | mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.| + | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| ## GestureMode -| Name | Description | +| Name| Description| | -------- | -------- | -| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. | -| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | -| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | +| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| +| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.| +| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.| ## Events -| Name | Description | +| Name| Description| | -------- | -------- | -| onCancel(event: () => void) | Callback for the **GestureMode.Sequence** cancellation event. | +| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event.| ## Example - ```ts // xxx.ets @Entry @Component struct GestureGroupExample { - @State count: number = 0 - @State offsetX: number = 0 - @State offsetY: number = 0 - @State borderStyles: BorderStyle = BorderStyle.Solid + @State count: number = 0; + @State offsetX: number = 0; + @State offsetY: number = 0; + @State positionX: number = 0; + @State positionY: number = 0; + @State borderStyles: BorderStyle = BorderStyle.Solid; build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Column() { Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) - }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) - .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles }) + } + .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) + .height(150) + .width(200) + .padding(20) + .margin(20) + .border({ width: 3, style: this.borderStyles }) .gesture( - GestureGroup(GestureMode.Sequence, - LongPressGesture({ repeat: true }) - .onAction((event: GestureEvent) => { - if (event.repeat) {this.count++} - console.log('LongPress onAction') - }) - .onActionEnd(() => { - console.log('LongPress end') - }), - PanGesture({}) - .onActionStart(() => { - this.borderStyles = BorderStyle.Dashed - console.log('pan start') - }) - .onActionUpdate((event: GestureEvent) => { - this.offsetX = event.offsetX - this.offsetY = event.offsetY - console.log('pan update') - }) - ) + // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered. + GestureGroup(GestureMode.Sequence, + LongPressGesture({ repeat: true }) + .onAction((event: GestureEvent) => { + if (event.repeat) { + this.count++; + } + console.info('LongPress onAction'); + }) + .onActionEnd(() => { + console.info('LongPress end'); + }), + PanGesture() + .onActionStart(() => { + this.borderStyles = BorderStyle.Dashed; + console.info('pan start'); + }) + .onActionUpdate((event: GestureEvent) => { + this.offsetX = this.positionX + event.offsetX; + this.offsetY = this.positionY + event.offsetY; + console.info('pan update'); + }) + .onActionEnd(() => { + this.positionX = this.offsetX; + this.positionY = this.offsetY; + this.borderStyles = BorderStyle.Solid; + console.info('pan end'); + }) + ) .onCancel(() => { - console.log('sequence gesture canceled') + console.info('sequence gesture canceled'); }) ) } } ``` -![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif) +Diagram: + +In sequence recognition mode the long press gesture event is triggered first. + +![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png) + +After the long press gesture is recognized, the drag gesture event is triggered. + + ![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index a2d81899010fec08b73246cdbaad1f94dfac7f3b..7b4ef7753ac26ce6de54154061b9b9ba5686b94c 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -4,13 +4,7 @@ The **\** 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. - - - -## Required Permissions - -None +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Parameter | Description | | ----------------------------- | ---- | -------------------- | -| onReady(event: () => void) | - | Triggered when a canvas is ready. | +| onReady(event: () => void) | - | Triggered when the canvas is ready. | **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index b2ebc714ee127ede15141dffaac3b47914be80c8..d0c3c2e1860d77390c679134eefc540ddcae238d 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse **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. | +| 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** ```ts - // xxx.ets - @Entry - @Component - struct Page45 { - 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(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') - }} +// xxx.ets +@Entry +@Component +struct Page45 { + 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(() => { + var grad = this.context.createLinearGradient(50, 0, 300, 100) + grad.addColorStop(0.0, 'red') + grad.addColorStop(0.5, 'white') + grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } +} ``` ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 3dd7664d96505f7e18b90071dd25e4cd9eaaf99d..ad6656fd1705ffb27e9d7d58fbc506ec5fd70d26 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -10,10 +10,10 @@ 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** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index 366da1b45bd89edb10affc51e34697d5497b21a5..1c1c103f01f29aa9704df7d1553195dcb1b5688f 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -10,11 +10,11 @@ An **ImageData** object stores pixel data rendered on a canvas. ## 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** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index 111a745875d70e6f9a703bc5692df4ed3096144b..fdf50f7258002752d789acaf53db213f20a93b0f 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -27,19 +27,19 @@ loadAnimation( path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem -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()**. +Loads an animation. Before calling this API, 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** - | 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"**| - | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.| - | render | string | Yes | Rendering type. The value can only be **"canvas"**. | - | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.| - | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | - | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | - | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | +| 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"**| +| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.| +| render | string | Yes | Rendering type. The value can only be **"canvas"**. | +| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.| +| autoplay | boolean | No | Whether to automatically play the animation.
Default value: **true** | +| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation.
Default value: null | +| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | ## lottie.destroy @@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho **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.| +| 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** ```ts @@ -131,9 +131,9 @@ Plays a specified animation. **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.| +| 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** @@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani **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.| +| 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** @@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin **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.| +| 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** @@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an **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.| +| 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** @@ -207,10 +207,10 @@ Sets the playback speed of the specified animation. **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.| +| 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** @@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays. **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.
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.| +| 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.
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** @@ -275,9 +275,9 @@ Plays an animation. **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------ | ---- | --------------- | - | name | string | No | Name of the target animation. By default, the value is null.| +| Name | Type | Mandatory | Description | +| ---- | ------ | ---- | --------------- | +| name | string | No | Name of the target animation. By default, the value is null.| **Example** @@ -294,9 +294,9 @@ Destroys an animation. **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------ | ---- | --------------- | - | name | string | No | Name of the target animation. By default, the value is null.| +| Name | Type | Mandatory | Description | +| ---- | ------ | ---- | --------------- | +| name | string | No | Name of the target animation. By default, the value is null.| **Example** @@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------ | ---- | --------------- | - | name | string | No | Name of the target animation. By default, the value is null.| +| Name | Type | Mandatory | Description | +| ---- | ------ | ---- | --------------- | +| name | string | No | Name of the target animation. By default, the value is null.| **Example** @@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------ | ---- | --------------- | - | name | string | No | Name of the target animation. By default, the value is null.| +| Name | Type | Mandatory | Description | +| ---- | ------ | ---- | --------------- | +| name | string | No | Name of the target animation. By default, the value is null.| **Example** @@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------ | ---- | --------------- | - | name | string | No | Name of the target animation. By default, the value is null.| +| Name | Type | Mandatory | Description | +| ---- | ------ | ---- | --------------- | +| name | string | No | Name of the target animation. By default, the value is null.| **Example** @@ -370,9 +370,9 @@ Sets the playback speed of an animation. **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.| +| 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** @@ -389,9 +389,9 @@ Sets the playback direction of an animation. **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.
AnimationDirection: 1 \| -1.| +| 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.
AnimationDirection: 1 \| -1.| **Example** @@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time. **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. | +| 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.
Default value: **false** | +| name | string | No | Name of the target animation. By default, the value is null. | **Example** @@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress. **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. | +| 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.
Default value: **false** | +| name | string | No | Name of the target animation. By default, the value is null. | **Example** @@ -456,10 +456,10 @@ Sets the animation to play only the specified segment. **Parameters** - | Name | Type | Mandatory | Description | - | --------- | ---------------------------------------- | ---- | ---------------------------------------- | - | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
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. | +| Name | Type | Mandatory | Description | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
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** @@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr **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.| +| 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** @@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n **Parameters** - | Name | Type | Mandatory | Description | - | ------------ | ------- | ---- | ---------------------------------------- | - | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.| +| Name | Type | Mandatory | Description | +| ------------ | ------- | ---- | ---------------------------------------- | +| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.| **Example** @@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for **Parameters** - | Name | Type | Mandatory | Description | - | -------- | ------- | ---- | ---------------------------------------- | - | inFrames | boolean | No | Whether to obtain the duration or number of frames.
**true**: number of frames.
**false**: duration, in ms.
Default value: **false**| +| Name | Type | Mandatory | Description | +| -------- | ------- | ---- | ---------------------------------------- | +| inFrames | boolean | No | Whether to obtain the duration or number of frames.
**true**: number of frames.
**false**: duration, in ms.
Default value: **false** | **Example** @@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func **Parameters** - | Name | Type | Mandatory | Description | - | -------- | ------------------------------- | ---- | ---------------------------------------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| - | callback | AnimationEventCallback<T> | Yes | Custom callback. | +| Name | Type | Mandatory | Description | +| -------- | ------------------------------- | ---- | ---------------------------------------- | +| name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| +| callback | AnimationEventCallback<T> | Yes | Custom callback. | **Example** @@ -575,10 +575,10 @@ Removes an event listener. **Parameters** - | Name | Type | Mandatory | Description | - | -------- | ------------------------------- | ---- | ---------------------------------------- | - | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| - | callback | AnimationEventCallback<T> | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | +| Name | Type | Mandatory | Description | +| -------- | ------------------------------- | ---- | ---------------------------------------- | +| name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| +| callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | **Example** @@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event. **Parameters** - | Name | Type | Mandatory | Description | - | ---- | ------------------ | ---- | --------- | - | name | AnimationEventName | Yes | Animation event type. | - | args | any | Yes | Custom callback parameters.| +| Name | Type | Mandatory | Description | +| ---- | ------------------ | ---- | --------- | +| name | AnimationEventName | Yes | Animation event type. | +| args | any | Yes | Custom callback parameters.| **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md index cf01858f70382307d4aaea98819d1a93f861e9b9..b5f6cc973e53e4924885d8292d4ee0ccfc741e83 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md @@ -1,59 +1,55 @@ # GridContainer +The **\** component lays out components vertically. It is used only in the grid layout. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<GridContainer>** component lays out components vertically. It is used only in the grid layout. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -This component can contain child components. +Supported ## APIs -GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length}) +GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string}) -- Parameter - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. | - | sizeType | SizeType | No | SizeType.Auto | Device size type. | - | gutter | Length | No | - | Gutter of the grid layout. | - | margin | Length | No | - | Margin of the grid layout. | +**Parameters** -- SizeType enums - | Name | Description | - | -------- | -------- | - | XS | Device of the minimum size. | - | SM | Small-sized device. | - | MD | Medium-sized device. | - | LG | Large-sized device. | - | Auto | Auto. The size type is selected based on the device type. | +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| columns | number \| 'auto' | No| Total number of columns in the current layout.
Default value: **'auto'**| +| sizeType | SizeType | No| Device size type.
Default value: **SizeType.Auto**| +| gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. | +| margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. | + +## SizeType + +| Name| Description| +| -------- | -------- | +| XS | Device of the minimum size.| +| SM | Small-sized device.| +| MD | Medium-sized device.| +| LG | Large-sized device.| +| Auto | Auto. The size type is selected based on the device type.| ## Attributes -Universal attributes and [attributes](ts-container-column.md#attributes) of the **<Column>** component are supported. +The universal attributes and attributes of the **[](ts-container-column.md#attributes)** component are supported. ## Events -Universal events are supported. +The universal events are supported. ## Example - -``` +```ts +// xxx.ets @Entry @Component struct GridContainerExample { diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index 37f8008f6446543a1faea9e33662f417811b4718..273e235bafa0ea89f082b608a6ad33d240960a49 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -4,7 +4,9 @@ The **\** component scrolls the content when the layout size of a compon > **NOTE** > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -> - The prerequisite for the component to rebound is that the component is scrolled. +> - When nesting a **\** within this component, specify the width and height for the **\** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\**. +> - This component can scroll only when the size on the main axis is less than the content size. +> - This component can produce a bounce effect only when there is more than one screen of content. ## Child Components @@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | -------------- | ---------------------------------------- | --------- | -| scrollable | ScrollDirection | Scroll direction.
Default value: **ScrollDirection.Vertical**| -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**| -| scrollBarColor | string \| number \| Color | Color of the scrollbar.| +| scrollable | [ScrollDirection](#scrolldirection) | Scroll direction.
Default value: **ScrollDirection.Vertical**| +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Auto**| +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.| | scrollBarWidth | string \| number | Width of the scrollbar.| -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**| +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.None**| ## ScrollDirection | Name | Description | @@ -34,15 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Horizontal | Only horizontal scrolling is supported. | | Vertical | Only vertical scrolling is supported. | | None | Scrolling is disabled. | -| Free(deprecated) | Vertical or horizontal scrolling is supported.
This API is deprecated since API version 9.| +| Free(deprecated) | Vertical or horizontal scrolling is supported.
This API is deprecated since API version 9.| ## Events -| Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------------------ | -| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | -| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. | -| onScrollEnd(event: () => void) | Invoked when scrolling stops. | +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.
Parameters:
- **dx**: amount to scroll by in the horizontal direction.
- **dy**: amount to scroll by in the vertical direction.
Return value:
- **dxRemain**: remaining amount to scroll by in the horizontal direction.
- **dyRemain**: remaining amount to scroll by in the vertical direction.| +| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | +| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. | +| onScrollEnd(event: () => void) | Invoked when scrolling stops. | + +> **NOTE** +> +> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\** is nested in the **\** component, the **edgeEffect** attribute of the **\** must be set to **EdgeEffect.None**. ## Scroller @@ -67,18 +74,24 @@ Scrolls to the specified position. | Name | Type | Mandatory| Description | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| xOffset | number \| string | Yes | Horizontal scrolling offset. | -| yOffset | number \| string | Yes | Vertical scrolling offset. | -| animation | {
duration: number,
curve: [Curve](ts-appendix-enums.md#curve)
} | No | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve.| +| xOffset | Length | Yes | Horizontal scrolling offset. | +| yOffset | Length | Yes | Vertical scrolling offset. | +| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md)
} | No | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve.| ### scrollEdge -scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void +scrollEdge(value: Edge): void Scrolls to the edge of the container. +**Parameters** + +| Name | Type| Mandatory | Description | +| ----- | ---- | ---- | --------- | +| value | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.| + ### scrollPage @@ -91,7 +104,7 @@ Scrolls to the next or previous page. | Name | Type | Mandatory | Description | | --------- | ------- | ---- | ------------------------------ | | next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.| -| direction | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical. | +| direction(deprecated) | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.
This API is deprecated since API version 9. | ### currentOffset @@ -101,6 +114,13 @@ currentOffset() Obtains the scrolling offset. +**Return value** + +| Type | Description | +| ---------------------------------------- | ---------------------------------------- | +| {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset.| + + ### scrollToIndex scrollToIndex(value: number): void @@ -120,15 +140,36 @@ Scrolls to the item with the specified index. | value | number | Yes | Index of the item to be scrolled to in the list.| +### scrollBy9+ + +scrollBy(dx: Length, dy: Length): void + + +Scrolls by the specified amount. + + +> **NOTE** +> +> Only the **\** component is supported. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ----- | ------ | ---- | ----------------- | +| dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.| +| dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.| + + ## Example +### Example 1 ```ts // xxx.ets @Entry @Component struct ScrollExample { - scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + scroller: Scroller = new Scroller(); + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Stack({ alignContent: Alignment.TopStart }) { @@ -146,38 +187,99 @@ struct ScrollExample { }, item => item) }.width('100%') } - .scrollable(ScrollDirection.Vertical) - .scrollBar(BarState.On) - .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. + .scrollBar(BarState.On) // The scrollbar is always displayed. + .scrollBarColor(Color.Gray) // Color of the scrollbar. + .scrollBarWidth(30) // Width of the scrollbar. + .edgeEffect(EdgeEffect.None) .onScroll((xOffset: number, yOffset: number) => { - console.info(xOffset + ' ' + yOffset) + console.info(xOffset + ' ' + yOffset); }) .onScrollEdge((side: Edge) => { - console.info('To the edge') + console.info('To the edge'); }) .onScrollEnd(() => { - console.info('Scroll Stop') + console.info('Scroll Stop'); }) + Button('scroll 150') + .onClick(() => { // Click to scroll down to 150.0 vp. + this.scroller.scrollBy(0,150); + }) + .margin({ top: 10, left: 20 }) Button('scroll 100') .onClick(() => { // Click to scroll down by 100.0 vp. - this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }); }) - .margin({ top: 10, left: 20 }) + .margin({ top: 60, left: 20 }) Button('back top') .onClick(() => { // Click to go back to the top. - this.scroller.scrollEdge(Edge.Top) + this.scroller.scrollEdge(Edge.Top); }) - .margin({ top: 60, left: 20 }) + .margin({ top: 110, left: 20 }) Button('next page') .onClick(() => { // Click to go to the next page. - this.scroller.scrollPage({ next: true }) + this.scroller.scrollPage({ next: true }); }) - .margin({ top: 110, left: 20 }) + .margin({ top: 170, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) } } ``` ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif) + +### Example 2 +```ts +@Entry +@Component +struct NestedScroll { + @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list. + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + private scroller: Scroller = new Scroller(); + + build() { + Flex() { + Scroll(this.scroller) { + Column() { + Text("Scroll Area") + .width("100%").height("40%").backgroundColor(0X330000FF) + .fontSize(16).textAlign(TextAlign.Center) + + List({ space: 20 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text("ListItem" + item) + .width("100%").height("100%").borderRadius(15) + .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White) + }.width("100%").height(100) + }, item => item) + } + .width("100%").height("50%").edgeEffect(EdgeEffect.None) + .onReachStart(() => { + this.listPosition = 0; + }) + .onReachEnd(() => { + this.listPosition = 2; + }) + .onScrollBegin((dx: number, dy: number) => { + if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { + this.scroller.scrollBy(0, -dy); + return { dxRemain: dx, dyRemain: 0 }; + } + this.listPosition = 1; + return { dxRemain: dx, dyRemain: dy }; + }) + + Text("Scroll Area") + .width("100%").height("40%").backgroundColor(0X330000FF) + .fontSize(16).textAlign(TextAlign.Center) + } + } + .width("100%").height("100%") + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } +} +``` + +![NestedScroll](figures/NestedScroll.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md index 0dda852d95adc76dfab2f49c8ee475c8e21b1d26..393059d731ae438030bea3e07a679b458878e681 100644 --- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -137,4 +137,4 @@ struct GestureSettingsExample { } ``` -![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif) +![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index 2dba7f369d72c031022544ce941e71501428259b..29233e9b812e6d0c4fa6d13259ae7fbe953a23ac 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -1,13 +1,10 @@ # Time Picker Dialog Box -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default. -## Required Permissions - -None +> **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. ## TimePickerDialog.show @@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions) Defines and displays a time picker dialog box. - options parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | selected | Date | No| Current system time| Time of the selected item.| - | useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.| - | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.| - | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.| - | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.| + | Name| Type| Mandatory| Description| + | -------- | -------- | -------- | -------- | + | selected | Date | No| Selected time.
Default value: current system time| + | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.
Default value: **false**| + | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| + | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| + | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.| ## Example ### Time Picker Sample Code (24-Hour Clock) -``` +```ts +// xxx.ets @Entry @Component struct TimePickerDialogExample01 { - @State isUseMilitaryTime: boolean = true + @State isUseMilitaryTime: boolean = true; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -40,13 +38,13 @@ struct TimePickerDialogExample01 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -54,12 +52,16 @@ struct TimePickerDialogExample01 { } } ``` + ![en-us_image_0000001118642010](figures/en-us_image_0000001118642010.gif) + ### Time Picker Sample Code (12-Hour Clock) -``` + +```ts +// xxx.ets @Entry @Component struct TimePickerDialogExample02 { - @State isUseMilitaryTime: boolean = false + @State isUseMilitaryTime: boolean = false; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -68,13 +70,13 @@ struct TimePickerDialogExample02 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -82,3 +84,5 @@ struct TimePickerDialogExample02 { } } ``` + + ![en-us_image_0000001118642020](figures/en-us_image_0000001118642020.gif) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 5b082bc803d6d82e93c273fc1ea9ba4ddfd25ce1..abfbce542354cce435a5e611f13f8bc73b28e64f 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -32,7 +32,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render | [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
- Default value: **'miter'**| | [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
- Default value: **10**| | [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
(Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **'normal normal 14px sans-serif'**| -| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
> **NOTE**
> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'**| +| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
**NOTE**
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'**| | [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
- Default value: **'alphabetic'**| | [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | | [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
- Default value: **0.0**| @@ -78,7 +78,7 @@ struct FillStyleExample { } ``` -![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png) +![en-us_image_0000001193872516](figures/en-us_image_0000001193872516.png) ### lineWidth @@ -111,7 +111,7 @@ struct LineWidthExample { } ``` -![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png) +![en-us_image_0000001238832403](figures/en-us_image_0000001238832403.png) ### strokeStyle @@ -145,7 +145,7 @@ struct StrokeStyleExample { } ``` -![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png) +![en-us_image_0000001238712437](figures/en-us_image_0000001238712437.png) ### lineCap @@ -182,7 +182,7 @@ struct LineCapExample { } ``` -![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png) +![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG) ### lineJoin @@ -220,7 +220,7 @@ struct LineJoinExample { } ``` -![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png) +![en-us_image_0000001194352450](figures/en-us_image_0000001194352450.png) ### miterLimit @@ -258,7 +258,7 @@ struct MiterLimit { } ``` -![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png) +![en-us_image_0000001238952397](figures/en-us_image_0000001238952397.png) ### font @@ -291,7 +291,7 @@ struct Fonts { } ``` -![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png) +![en-us_image_0000001194032476](figures/en-us_image_0000001194032476.png) ### textAlign @@ -339,7 +339,7 @@ struct CanvasExample { } ``` -![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png) +![en-us_image_0000001239032423](figures/en-us_image_0000001239032423.png) ### textBaseline @@ -387,7 +387,7 @@ struct TextBaseline { } ``` -![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png) +![en-us_image_0000001193872518](figures/en-us_image_0000001193872518.png) ### globalAlpha @@ -423,7 +423,7 @@ struct GlobalAlpha { } ``` -![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png) +![en-us_image_0000001238832405](figures/en-us_image_0000001238832405.png) ### lineDashOffset @@ -458,7 +458,7 @@ struct LineDashOffset { } ``` -![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png) +![en-us_image_0000001238712439](figures/en-us_image_0000001238712439.png) ### globalCompositeOperation @@ -513,7 +513,7 @@ struct GlobalCompositeOperation { } ``` -![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png) +![en-us_image_0000001194192456](figures/en-us_image_0000001194192456.png) ### shadowBlur @@ -548,7 +548,7 @@ struct ShadowBlur { } ``` -![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png) +![en-us_image_0000001194352452](figures/en-us_image_0000001194352452.png) ### shadowColor @@ -583,7 +583,7 @@ struct ShadowColor { } ``` -![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png) +![en-us_image_0000001238952399](figures/en-us_image_0000001238952399.png) ### shadowOffsetX @@ -619,7 +619,7 @@ struct ShadowOffsetX { } ``` -![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png) +![en-us_image_0000001194032478](figures/en-us_image_0000001194032478.png) ### shadowOffsetY @@ -655,7 +655,7 @@ struct ShadowOffsetY { } ``` -![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png) +![en-us_image_0000001239032425](figures/en-us_image_0000001239032425.png) ### imageSmoothingEnabled @@ -689,7 +689,7 @@ struct ImageSmoothingEnabled { } ``` -![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png) +![en-us_image_0000001193872520](figures/en-us_image_0000001193872520.png) ## Methods @@ -703,7 +703,7 @@ Fills a rectangle on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| @@ -739,7 +739,7 @@ Fills a rectangle on the canvas. } ``` - ![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png) + ![en-us_image_0000001194192436](figures/en-us_image_0000001194192436.png) ### strokeRect @@ -748,16 +748,16 @@ strokeRect(x: number, y: number, w: number, h: number): void Draws an outlined rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | - **Example** +**Example** ```ts // xxx.ets @@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas. } ``` - ![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png) + ![en-us_image_0000001194352436](figures/en-us_image_0000001194352436.png) ### clearRect @@ -795,16 +795,16 @@ clearRect(x: number, y: number, w: number, h: number): void Clears the content in a rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | - **Example** +**Example** ```ts // xxx.ets @@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas. } ``` - ![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png) + ![en-us_image_0000001238952377](figures/en-us_image_0000001238952377.png) ### fillText @@ -846,14 +846,14 @@ Draws filled text on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width allowed for the text. | - **Example** +**Example** ```ts // xxx.ets @@ -883,7 +883,7 @@ Draws filled text on the canvas. } ``` - ![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png) + ![en-us_image_0000001194032458](figures/en-us_image_0000001194032458.png) ### strokeText @@ -894,14 +894,14 @@ Draws a text stroke on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width of the text to be drawn. | - **Example** +**Example** ```ts // xxx.ets @@ -931,7 +931,7 @@ Draws a text stroke on the canvas. } ``` - ![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png) + ![en-us_image_0000001238952401](figures/en-us_image_0000001238952401.png) ### measureText @@ -940,13 +940,13 @@ measureText(text: string): TextMetrics Returns a **TextMetrics** object used to obtain the width of specified text. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ---------- | | text | string | Yes | "" | Text to be measured.| - **Return value** +**Return value** | Type | Description | | ----------- | ------- | @@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. | hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.| | ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.| - **Example** +**Example** ```ts // xxx.ets @@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. } ``` - ![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png) + ![en-us_image_0000001194032480](figures/en-us_image_0000001194032480.png) ### stroke @@ -1010,14 +1010,14 @@ stroke(path?: Path2D): void Strokes a path. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ---------------------------------------- | ---- | ---- | ------------ | | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| - **Example** - +**Example** + ```ts // xxx.ets @Entry @@ -1050,7 +1050,7 @@ Strokes a path. } ``` - ![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png) + ![en-us_image_0000001238832389](figures/en-us_image_0000001238832389.png) ### beginPath @@ -1059,7 +1059,7 @@ beginPath(): void Creates a drawing path. - **Example** +**Example** ```ts // xxx.ets @@ -1093,7 +1093,7 @@ Creates a drawing path. } ``` - ![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png) + ![en-us_image_0000001193872522](figures/en-us_image_0000001193872522.png) ### moveTo @@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void Moves a drawing path to a target position on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| - **Example** +**Example** ```ts // xxx.ets @@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas. } ``` - ![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png) + ![en-us_image_0000001238832409](figures/en-us_image_0000001238832409.png) ### lineTo @@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void Connects the current point to a target position using a straight line. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| - **Example** +**Example** ```ts // xxx.ets @@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line. } ``` - ![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png) + ![en-us_image_0000001238712443](figures/en-us_image_0000001238712443.png) ### closePath @@ -1198,7 +1198,7 @@ closePath(): void Draws a closed path. - **Example** +**Example** ```ts // xxx.ets @@ -1232,7 +1232,7 @@ Draws a closed path. } ``` - ![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png) + ![en-us_image_0000001194192460](figures/en-us_image_0000001194192460.png) ### createPattern @@ -1243,7 +1243,7 @@ Creates a pattern for image filling based on a specified source image and repeti **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| @@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti | ------------------------------- | ----------------------- | | [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| - **Example** +**Example** ```ts // xxx.ets @@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti } ``` - ![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png) + ![en-us_image_0000001194352456](figures/en-us_image_0000001194352456.png) ### bezierCurveTo @@ -1295,9 +1295,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| @@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas. | 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** +**Example** ```ts // xxx.ets @@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas. } ``` - ![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png) + ![en-us_image_0000001238952403](figures/en-us_image_0000001238952403.png) ### quadraticCurveTo @@ -1347,16 +1347,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void Draws a quadratic curve on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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** +**Example** ```ts // xxx.ets @@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas. } ``` - ![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png) + ![en-us_image_0000001194032482](figures/en-us_image_0000001194032482.png) ### arc @@ -1397,9 +1397,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, Draws an arc on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| @@ -1408,7 +1408,7 @@ Draws an arc on the canvas. | endAngle | number | Yes | 0 | End radian of the arc. | | counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.| - **Example** +**Example** ```ts // xxx.ets @@ -1439,7 +1439,7 @@ Draws an arc on the canvas. } ``` - ![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png) + ![en-us_image_0000001239032429](figures/en-us_image_0000001239032429.png) ### arcTo @@ -1448,9 +1448,9 @@ 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** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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.| @@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points 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** +**Example** ```ts // xxx.ets @@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc. } ``` - ![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png) + ![en-us_image_0000001193872524](figures/en-us_image_0000001193872524.png) ### ellipse @@ -1498,9 +1498,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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. | @@ -1509,9 +1509,9 @@ Draws an ellipse in the specified rectangular region on the canvas. | 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 | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. | +| counterclockwise | boolean | No | false | Whether to draw the ellipse counterclockwise.
**true**: Draw the ellipse counterclockwise.
**false**: Draw the ellipse clockwise. | - **Example** +**Example** ```ts // xxx.ets @@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas. } ``` - ![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png) + ![en-us_image_0000001194192440](figures/en-us_image_0000001194192440.png) ### rect @@ -1550,16 +1550,16 @@ rect(x: number, y: number, w: number, h: number): void Creates a rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| 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** +**Example** ```ts // xxx.ets @@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas. } ``` - ![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png) + ![en-us_image_0000001238712445](figures/en-us_image_0000001238712445.png) ### fill @@ -1600,7 +1600,7 @@ Fills the area inside a closed path on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas. } ``` - ![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png) + ![en-us_image_0000001194192462](figures/en-us_image_0000001194192462.png) fill(path: Path2D, fillRule?: CanvasFillRule): void @@ -1641,7 +1641,7 @@ Fills the area inside a closed path on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | path | Path2D | Yes | | A **Path2D** path to fill. | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1698,11 +1698,11 @@ Sets the current path to a clipping path. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| - **Example** +**Example** ```ts // xxx.ets @@ -1735,7 +1735,7 @@ Sets the current path to a clipping path. } ``` - ![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png) + ![en-us_image_0000001194032462](figures/en-us_image_0000001194032462.png) clip(path:Path2D, fillRule?: CanvasFillRule): void @@ -1744,12 +1744,12 @@ Sets a closed path to a clipping path. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | path | Path2D | Yes | | A **Path2D** path to clip.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| - **Example** +**Example** ```ts // xxx.ets @@ -1795,7 +1795,7 @@ Sets a filter for the image on the canvas. This API is a void API. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------ | | filter | string | Yes | - | Functions that accept various filter effects.| @@ -1827,13 +1827,13 @@ rotate(angle: number): void Rotates a canvas clockwise around its coordinate axes. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ------ | ---- | ---- | ---------------------------------------- | | angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| - **Example** +**Example** ```ts // xxx.ets @@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes. } ``` - ![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png) + ![en-us_image_0000001238952405](figures/en-us_image_0000001238952405.png) ### scale @@ -1872,14 +1872,14 @@ scale(x: number, y: number): void Scales the canvas based on scale factors. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | | x | number | Yes | 0 | Horizontal scale factor.| | y | number | Yes | 0 | Vertical scale factor.| - **Example** +**Example** ```ts // xxx.ets @@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors. } ``` - ![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png) + ![en-us_image_0000001193872498](figures/en-us_image_0000001193872498.png) ### transform @@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para | e | number | Yes | 0 | X-axis translation.| | f | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para } ``` - ![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png) + ![en-us_image_0000001239032431](figures/en-us_image_0000001239032431.png) ### setTransform @@ -1986,7 +1986,7 @@ Resets the existing transformation matrix and creates a new transformation matri **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------------- | | a | number | Yes | 0 | X-axis scale. | | b | number | Yes | 0 | X-axis skew. | @@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri | e | number | Yes | 0 | X-axis translation.| | f | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -2031,22 +2031,20 @@ Resets the existing transformation matrix and creates a new transformation matri ![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png) -### translate - ### translate translate(x: number, y: number): void Moves the origin of the coordinate system. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x | number | Yes | 0 | X-axis translation.| | y | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -2090,9 +2088,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: Draws an image on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ---------------------------------------- | ---- | ---- | ----------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.| | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | @@ -2104,8 +2102,7 @@ Draws an image on the canvas. | dw | number | No | 0 | Width of the drawing area. | | dh | number | No | 0 | Height of the drawing area. | - - **Example** +**Example** ```ts // xxx.ets @@ -2134,7 +2131,7 @@ Draws an image on the canvas. } ``` - ![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png) + ![en-us_image_0000001238712447](figures/en-us_image_0000001238712447.png) ### createImageData @@ -2143,9 +2140,9 @@ createImageData(sw: number, sh: number): ImageData Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | | sw | number | Yes | 0 | Width of the **ImageData** object.| | sh | number | Yes | 0 | Height of the **ImageData** object.| @@ -2155,9 +2152,9 @@ createImageData(imageData: ImageData): ImageData Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | --------- | ---------------------------------------- | ---- | ---- | ---------------- | | imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object to copy.| @@ -2173,9 +2170,9 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2195,9 +2192,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2210,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi | ---------------------------------------- | ------------- | | [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| - **Example** ```ts @@ -2254,9 +2250,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----------- | ------ | ---- | ------------ | ----------------------------- | | imagedata | Object | 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. | @@ -2266,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang | dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | | dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | - **Example** +**Example** ```ts // xxx.ets @@ -2301,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang } ``` - ![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png) + ![en-us_image_0000001194192464](figures/en-us_image_0000001194192464.png) ### setLineDash @@ -2311,7 +2307,7 @@ Sets the dash line style. **Parameters** -| Name | Type | Description | +| Name | Type | Description | | -------- | -------- | ------------------- | | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.| @@ -2457,9 +2453,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality) Sets the quality of image smoothing. This API is a void API. - **Parameters** +**Parameters** -| Name | Type | Description | +| Name | Type | Description | | ------- | --------------------- | ---------------------------------------- | | quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.| @@ -2476,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O | ---------------------------------------- | --------------- | | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.| - - **Example** +**Example** ```ts // xxx.ets @@ -2520,7 +2515,7 @@ restore(): void Restores the saved drawing context. - **Example** +**Example** ```ts // xxx.ets @@ -2561,7 +2556,7 @@ save(): void Saves the current drawing context. - **Example** +**Example** ```ts // xxx.ets @@ -2602,16 +2597,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void Creates a linear gradient. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x0 | number | Yes | 0 | X-coordinate of the start point.| | y0 | number | Yes | 0 | Y-coordinate of the start point.| | x1 | number | Yes | 0 | X-coordinate of the end point.| | y1 | number | Yes | 0 | Y-coordinate of the end point.| - **Example** +**Example** ```ts // xxx.ets @@ -2645,7 +2640,7 @@ Creates a linear gradient. } ``` - ![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png) + ![en-us_image_0000001194352460](figures/en-us_image_0000001194352460.png) ### createRadialGradient @@ -2654,9 +2649,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, Creates a linear gradient. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------------- | | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | @@ -2665,7 +2660,7 @@ Creates a linear gradient. | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| - **Example** +**Example** ```ts // xxx.ets @@ -2699,7 +2694,7 @@ Creates a linear gradient. } ``` - ![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png) + ![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png) ## CanvasPattern diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index e39d1458fbab496546f189571ab6f9f3cb3d624c..4fbb204f4d8172cb93ead38c43500f3f08c19914 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -4,19 +4,14 @@ > **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 +> 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 | Default Value | Description | -| ---- | ------ | ---- | ------------------ | -| id | string | '' | Unique ID you assigned to the component.| +| Name | Type | Description | +| -----| -------- | ----------------------------- | +| id | string | Unique ID you assigned to the component.
Default value: **''**| ## APIs @@ -26,101 +21,109 @@ None getInspectorByKey(id: string): string -Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API. +Obtains all attributes of the component with the specified ID, excluding the information about child components. +This is a system API. + +**Parameters** -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | ----------- | - | id | string | Yes | - | ID of the component whose attributes are to be obtained.| +| Name | Type | Mandatory | Description | +| ---- | -------- | ---- | -------------| +| id | string | Yes | ID of the component whose attributes are to be obtained.| -- Return value - | Type | Description | - | ------ | --------------- | - | string | JSON string of the component attribute list.| +**Return value** + +| Type | Description | +| -------| -------------- | +| string | JSON string of the component attribute list.| ### getInspectorTree getInspectorTree(): string -Obtains the component tree and component attributes. This is a system API. +Obtains the component tree and component attributes. +This is a system API. -- Return value +**Return value** - | Type | Description | - | ------ | ------------------- | - | string | JSON string of the component tree and component attribute list.| +| Type | Description | +| ------ | --------------------------- | +| string | JSON string of the component tree and component attribute list.| ### sendEventByKey sendEventByKey(id: string, action: number, params: string): boolean -Sends an event to the component with the specified ID. This is a system API. +Sends an event to the component with the specified ID. +This is a system API. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | -------| ---- | -------------------------- | +| id | string | Yes | ID of the component to which the event is to be sent. | +| action | number | Yes | Type of the event to be sent. The options are as follows:
- **10**: click event.
- **11**: long-click event.| +| params | string | Yes | Event parameters. If there is no parameter, pass an empty string **""**. | -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | ------ | ------ | ---- | ---- | ---------------------------------------- | - | id | string | Yes | - | ID of the component to which the event is to be sent. | - | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- **10**: click event.
- **11**: long click event.| - | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. | +**Return value** -- Return value - | Type | Description | - | ------- | ------------------------------ | - | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.| +| Type | Description | +| -------- | --------------------------| +| boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.| ### sendTouchEvent sendTouchEvent(event: TouchObject): boolean -Sends a touch event. This is a system API. +Sends a touch event. +This is a system API. -- Parameters +**Parameters** - | Name | Type | Mandatory | Default Value | Description | - | ----- | ----------- | ---- | ---- | ---------------------------------------- | - | event | TouchObject | Yes | - | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).| +| Name | Type | Mandatory | Description | +| ----- | ----------- | ---- | ------------------------------------------------------------ | +| event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).| -- Return value +**Return value** - | Type | Description | - | ------- | -------------------------- | - | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------| +| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| ### sendKeyEvent sendKeyEvent(event: KeyEvent): boolean -Sends a key event. This is a system API. +Sends a key event. -- Parameters +**Parameters** - | Name | Type | Mandatory | Default Value | Description | - | ----- | -------- | ---- | ---- | ---------------------------------------- | - | event | KeyEvent | Yes | - | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).| +| Name | Type | Mandatory | Description | +| ----- | -------- | ---- | ------------------------------------------------------------ | +| event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).| -- Return value +**Return value** - | Type | Description | - | ------- | --------------------------- | - | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| +| Type | Description | +| ------- | ------------------------------| +| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| ### sendMouseEvent sendMouseEvent(event: MouseEvent): boolean -Sends a mouse event. This is a system API. +Sends a mouse event. -- Parameters +**Parameters** - | Name | Type | Mandatory | Default Value | Description | - | ----- | ---------- | ---- | ---- | ---------------------------------------- | - | event | MouseEvent | Yes | - | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).| +| Name | Type | Mandatory | Description | +| ----- | ---------- | ---- | --------------------------------------- | +| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).| -- Return value +**Return value** - | Type | Description | - | ------- | --------------------------- | - | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------- | +| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| ## Example @@ -133,6 +136,7 @@ class Utils { static rect_bottom; static rect_value; + // Obtain the coordinates of the rectangular area occupied by the component. static getComponentRect(key) { let strJson = getInspectorByKey(key); let obj = JSON.parse(strJson); @@ -172,32 +176,32 @@ struct IdExample { console.info(getInspectorTree()) this.text = "Button 'click to start' is clicked" setTimeout(() => { - sendEventByKey("longclick", 11, "") + sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick". }, 2000) }).id('click') Button() { - Text('longclick').fontSize(25).fontWeight(FontWeight.Bold) + Text('longClick').fontSize(25).fontWeight(FontWeight.Bold) }.margin({ top: 20 }).backgroundColor('#0D9FFB') .gesture( LongPressGesture().onActionEnd(() => { console.info('long clicked') - this.text = "Button 'longclick' is longclicked" + this.text = "Button 'longClick' is longclicked" setTimeout(() => { - let rect = Utils.getComponentRect('onTouch') + let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch". let touchPoint: TouchObject = { id: 1, - x: rect.left + (rect.right - rect.left) / 2, - y: rect.top + (rect.bottom - rect.top) / 2, + x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center. + y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center. type: TouchType.Down, - screenX: rect.left + (rect.right - rect.left) / 2, - screenY: rect.left + (rect.right - rect.left) / 2, + screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center. + screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center. } - sendTouchEvent(touchPoint) + sendTouchEvent(touchPoint) // Send a touch event. touchPoint.type = TouchType.Up - sendTouchEvent(touchPoint) + sendTouchEvent(touchPoint) // Send a touch event. }, 2000) - })).id('longclick') + })).id('longClick') Button() { Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold) @@ -206,14 +210,14 @@ struct IdExample { console.info('onTouch is clicked') this.text = "Button 'onTouch' is clicked" setTimeout(() => { - let rect = Utils.getComponentRect('onMouse') + let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse". let mouseEvent: MouseEvent = { button: MouseButton.Left, action: MouseAction.Press, - x: rect.left + (rect.right - rect.left) / 2, - y: rect.top + (rect.bottom - rect.top) / 2, - screenX: rect.left + (rect.right - rect.left) / 2, - screenY: rect.top + (rect.bottom - rect.top) / 2, + x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center. + y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center. + screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center. + screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center. timestamp: 1, target: { area: { @@ -231,7 +235,7 @@ struct IdExample { }, source: SourceType.Mouse } - sendMouseEvent(mouseEvent) + sendMouseEvent(mouseEvent) // Send a mouse event. }, 2000) }).id('onTouch') @@ -251,7 +255,7 @@ struct IdExample { metaKey: 0, timestamp: 0 } - sendKeyEvent(keyEvent) + sendKeyEvent(keyEvent) // Send a key event. }, 2000) }).id('onMouse') diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index f1a206b2524ecbca738e62c01ed8c3e69090e769..302309dd80ec019b180a90fe271bc3ab7b2d8af2 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -10,10 +10,10 @@ | Name | Type | Description | | ---------- | ---------------------------------------- | ---------------------------------------- | -| flexBasis | string \| number | Base size of a component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)| +| flexBasis | string \| number | Base size of a component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)| | flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.
Default value: **0** | -| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
Default value: **1** | -| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | he default **alignItems** configuration in the parent container.
Default value: **ItemAlign.Auto** | +| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
When the parent container is **\** or **\**, the default value is **0**.
When the parent container is **\**, the default value is **1**. | +| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.
Default value: **ItemAlign.Auto**| ## Example @@ -23,7 +23,6 @@ @Entry @Component struct FlexExample { - build() { Column({ space: 5 }) { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -109,4 +108,4 @@ struct FlexExample { } ``` -![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png) +![en-us_image_0000001219744197](figures/en-us_image_0000001219744197.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index fa130f70e8a62759ea0382a1b782361dc8d5de26..db1e33a8ed8e723c626e81fc4bbb6cd9915948fe 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -12,7 +12,7 @@ You can set the opacity of a component. | Name | Type | Description | | ------- | ---------------------------------------- | ---------------------------------------- | -| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.
**NOTE**
A child component can inherit this attribute of its parent component.
Default value: **1** | +| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.
**NOTE**
A child component can inherit this attribute of its parent component. Default value: **1**| ## Example @@ -30,6 +30,10 @@ struct OpacityExample { Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) + Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE) + Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE) } .width('100%') .padding({ top: 5 }) @@ -37,4 +41,4 @@ struct OpacityExample { } ``` -![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif) +![opacity.png](figures/opacity.png) diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642600.PNG b/en/application-dev/ui/figures/en-us_image_0000001118642600.PNG new file mode 100644 index 0000000000000000000000000000000000000000..60236b7109ffd1345eba17443d154824a79159b8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642600.PNG differ diff --git a/en/application-dev/ui/ui-js-building-ui-layout-text.md b/en/application-dev/ui/ui-js-building-ui-layout-text.md index f01820f6f73fc45cc660813f108aa352209d0bdb..752f9b36d252451ac81b642fc9bdc3a3b6ceb3e6 100644 --- a/en/application-dev/ui/ui-js-building-ui-layout-text.md +++ b/en/application-dev/ui/ui-js-building-ui-layout-text.md @@ -1,8 +1,6 @@ # Adding Title and Paragraph Text - -The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page: - +The **\** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **\** component and add the text to be displayed between the **\** and **\** tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page: ``` @@ -15,15 +13,16 @@ The <text> component is most commonly used to display text in title and pa ``` - ``` /* xxx.css */ .container { flex-direction: column; margin-top: 20px; margin-left: 30px; + font-weight: 700; } .title-text { + width: 95%; color: #1a1a1a; font-size: 50px; margin-top: 40px; @@ -37,14 +36,15 @@ The <text> component is most commonly used to display text in title and pa ``` - ``` // xxx.js export default { data: { - headTitle: 'Capture the Beauty in This Moment', + headTitle: 'Capture the Beauty in Moment', paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.', paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.', }, } ``` + + ![en-us_image_0000001118642600](figures/en-us_image_0000001118642600.PNG) diff --git a/en/application-dev/ui/ui-js-components-grid.md b/en/application-dev/ui/ui-js-components-grid.md index bf56e0e092ef75fa387073c0eec48d38729438f2..5ef7f8350e567d9b1657cce10ad8975adb429487 100644 --- a/en/application-dev/ui/ui-js-components-grid.md +++ b/en/application-dev/ui/ui-js-components-grid.md @@ -1,15 +1,15 @@ -# <grid-container> Development +# Grid Layout -The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md). +The **\** component is the root container of the grid layout. Within the root container, you can use **\** and **\** for the grid layout. For details, see [Grid-container](../reference/arkui-js/js-components-grid-container.md). -## Creating a <grid-container> Component +## Creating a \ Component -Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component. +Create a **\** component in the .hml file under **pages/index** and add a [\](../reference/arkui-js/js-components-grid-row.md) child component. -``` +```html
@@ -22,7 +22,7 @@ Create a **<grid-container>** component in the .hml file under **pages/ind ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -35,16 +35,17 @@ Create a **<grid-container>** component in the .hml file under **pages/ind ![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** -> **<grid-container>** supports only **<grid-row>** as a child component. +> **NOTE** +> +> **\** supports only **\** as a child component. ## Methods -Click the **<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). +Touch the **\** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). -``` +```html
-After adding a **<grid-row>** child component to **<grid-container>**, add a **<grid-col>** child component to **<grid-row>** to form a layout. +After adding a **\** child component to **\**, add a **\** child component to **\** to form a layout. -``` +```html
@@ -148,7 +149,7 @@ After adding a **<grid-row>** child component to **<grid-container>* ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -165,8 +166,9 @@ text{ ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** -> **<grid-row>** supports only **<grid-col>** as a child component. You can add content only to **<grid-col>**. +> **NOTE** +> +> **\** supports only **\** as a child component. You can add content only to **\**. ## Example Scenario @@ -174,7 +176,7 @@ text{ In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data. -``` +```html
@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -211,7 +213,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { @@ -241,10 +243,4 @@ export default { ``` -![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) - -## Samples - -The following sample is provided to help you better understand how to develop the **\** component: - -[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid) \ No newline at end of file +![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) \ No newline at end of file diff --git a/en/application-dev/ui/ui-js-components-offscreencanvas.md b/en/application-dev/ui/ui-js-components-offscreencanvas.md index 5e2eb79fc5f92c004210b8e01db6ee1c1a51fa2a..737be8cad4df5f061217b5a74b941911ea854077 100644 --- a/en/application-dev/ui/ui-js-components-offscreencanvas.md +++ b/en/application-dev/ui/ui-js-components-offscreencanvas.md @@ -1,11 +1,10 @@ -# OffscreenCanvas +# OffscreenCanvasRenderingContext2D +**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md). -Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style. +In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image. - - -``` +```html
@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
``` - - -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -48,9 +47,7 @@ select{ } ``` - - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -75,12 +72,10 @@ export default { this.img.onerror = function() { prompt.showToast({message:"error",duration:2000}) }; - var bitmap = this.offscreen.transferToImageBitmap(); - this.ctx.transferFromImageBitmap(bitmap); + var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap); }, change(e){ - this.offCanvas.filter = e.newValue; - this.offCanvas.drawImage(this.img, 100, 100, 400, 300); + this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300); var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap); }, @@ -93,10 +88,10 @@ export default { ## Determining the Position -Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path. +Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path. -``` +```html
@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -143,7 +140,7 @@ button{ ``` -``` +```js // xxx.js export default { data: { @@ -188,4 +185,4 @@ export default { } ``` -![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif) +![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)