diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif
new file mode 100644
index 0000000000000000000000000000000000000000..13c21f4cbd450e5670bfeaf1041826fe3cc07f06
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif
new file mode 100644
index 0000000000000000000000000000000000000000..055306a94ef57366ca817f56f39034160ef9db7b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif
new file mode 100644
index 0000000000000000000000000000000000000000..91d6134b97b6e9073540ee7b06ecf6e31952c9b5
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d8da86f2f1cf71ca9bc5d6cb65564bb64ae5fd1
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif
new file mode 100644
index 0000000000000000000000000000000000000000..439eea01e278280086248901e4ac51923d5e4979
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6c67ff8bc8394cddb79b5ac4d1b2c130ae6a6bb8
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a5d725eba5254e9a489204bf2a7c06170aa3a2e
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cfe44e409c1ddf0f7a70b59367a7885033a2b42f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8e64d09f33bcbba8117775ea6f5946cc4556d0c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9c766a3189861fae9fbcf07f5912bef0d8562c8
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0554bd02b6ce8c1d835a3cde3bf2427d8dd15bda
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif
new file mode 100644
index 0000000000000000000000000000000000000000..abec4486ad5f444b32aa20b88a3a6d1975254cd0
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif
new file mode 100644
index 0000000000000000000000000000000000000000..657deee8108d1f2c7325079f82d8ce6a1ba8d9fd
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif
new file mode 100644
index 0000000000000000000000000000000000000000..407541949a9a7d9308ca61be4dfc2ecf91709d49
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c80d86b0508ad15cd944314d0a2b3b59dcd9bcd6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd0b2b46d44aced7d075ba36196aa02c43b362c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7293aff8d5971a6b026c751570eefbca029bb06b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif
new file mode 100644
index 0000000000000000000000000000000000000000..531e20ab79714795da80341f363a71f5c426f034
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png
new file mode 100644
index 0000000000000000000000000000000000000000..86187142668379cc81fcc9f163e3218a078cc8cc
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5813dfac315791a87d9bd9c70a9587e6b779614c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5d4ed8967a4f4d4d163c560536ee537feddef49a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png
new file mode 100644
index 0000000000000000000000000000000000000000..8df470cc4c0e146972977c1b7dadecc8cbc67838
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif
new file mode 100644
index 0000000000000000000000000000000000000000..493671394dab89f4cc73fd185cc46554c2a47528
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif
new file mode 100644
index 0000000000000000000000000000000000000000..53a8a2063ae440915a9b1710d9b184c470f26010
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a15bd8be601142e45dc3d3656eb448cdf4130c23
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif
new file mode 100644
index 0000000000000000000000000000000000000000..01bd2adcd322dd5e19811c43e7512eac4ff72ca4
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png
new file mode 100644
index 0000000000000000000000000000000000000000..08f11bc53e9a0e6430b06ae77fde645585ee711b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png
new file mode 100644
index 0000000000000000000000000000000000000000..11dac18df74e1fd4d09adc43bb264253294df23f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif
new file mode 100644
index 0000000000000000000000000000000000000000..92bac3bec6a14037b71c86d76d4d87ac3a40171a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ea5aa768532ea01f6828bd6bf211c4c2fe1e0d22
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a0fa14321998b5fc33b0965dcc0ca0ae315dd09
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b5bce1b8e09e0c47231c11250c6d676806bcd53c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b3260b58addc8949c1ed409fb183ac91f986ebf
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fec6caa122160183c3cc049e803710301fd63d9f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0c3c7fccb059ad03b084728307963082dc6f8365
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5198c5a81cf4427f1014489336d730d846e15f9d
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3b5681fe5f430af62ef6d94b37bf6cc5a2a2ee58
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png
new file mode 100644
index 0000000000000000000000000000000000000000..acdf7a05ea58d00687571fbcb496372b64ab1c87
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif
new file mode 100644
index 0000000000000000000000000000000000000000..24c118c92cbb57a2899ff1831136ce99fcca1989
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png
new file mode 100644
index 0000000000000000000000000000000000000000..1898cb7e3d137e02211afb6425147bc4754600d5
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif
new file mode 100644
index 0000000000000000000000000000000000000000..88c62f08669f2ec3533db708d49d18a069501644
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1b6a6d7cce2951696d624ea3cf645570231bc0d7
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c310e7cfd714246b95eab7f030c33490bef98d86
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png
new file mode 100644
index 0000000000000000000000000000000000000000..03a4a72905b6e852a00cdbbe17918cdeda28e5bf
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d93306857a1ce4a304bc83a664ee270105f39017
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif
new file mode 100644
index 0000000000000000000000000000000000000000..353e2ffb9a84cba7616291730c7c0c670adc2b13
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d8f8221489fd409670bfa9b3d0694a54552d5cbd
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ac5857ad2e4888bfda20044fb84dbd100ed68d5b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8158121587531a6ab754316d6379c016be803128
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8b0e1d5a97c59fb1b0b1b243d5b0a30f1b8824e2
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif
new file mode 100644
index 0000000000000000000000000000000000000000..28b2a163673a71e95a40284d2b045005594623e6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ab6d5e3bde1e3218eaa1156137c7fd6ffc298882
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png
new file mode 100644
index 0000000000000000000000000000000000000000..a018ed2562de8d5f23c7422f451b763086a72390
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4d117430d11520fdcbe3cd1343182a7f169c7fe
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f6469e9e80464270e28bc6c682ff3e9bf8420a5f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f7f05ac39da2bd2f04a7257e1c36eb87ad811783
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4301a19383a2abbfb7038275e59adc901046307
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png
new file mode 100644
index 0000000000000000000000000000000000000000..45a96cb24680a3cf2cdd91d315314822701c4176
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5db8f42d350aa79613ac657db2630d0d60d3d3c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif
new file mode 100644
index 0000000000000000000000000000000000000000..260966e4fe59e4e6f80b501251f478bbb7126dce
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif
new file mode 100644
index 0000000000000000000000000000000000000000..75e951f9c583c0c268584358e90bac0042554d8c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9983db70e3477057acdcbbdaba56dea290f6a303
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c1dc425e1a607a846d3884a9118387accb031a4
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d6a46140a41a112790210c58502fbc3df6e65f20
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9e313e1e87059572aa036b06881381da7b070641
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d2a113aa1c2558c04101389ae5ab45194d970db
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffe4b54ecb499aa26d5b48eea623434985646292
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif
new file mode 100644
index 0000000000000000000000000000000000000000..56ad8e92f8376a00a0e5e201e7946144acb7659a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9d99e465fd01f8a427bd2c0b7758045241b8227
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif
new file mode 100644
index 0000000000000000000000000000000000000000..30dbdba7bf2036b51395507d4a1996b5adaf5436
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif
new file mode 100644
index 0000000000000000000000000000000000000000..aa9bba2a489f516d80f7eed07bc67e549d1a25c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b8e2940f1660157ba412beac4db6614b4714d599
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif
new file mode 100644
index 0000000000000000000000000000000000000000..52af9a2cddfa15e4f08358a0023f456b35d535c6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif
new file mode 100644
index 0000000000000000000000000000000000000000..aba5bd689955bb90c779ba3c231d698d9fb53eac
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif differ
diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md
new file mode 100644
index 0000000000000000000000000000000000000000..f4e20529894244958e7bfee674e8b4ac3eeb6cff
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md
@@ -0,0 +1,108 @@
+# svg动画
+
+
+为svg组件添加动画效果。
+
+
+## 属性样式动画
+
+在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+
+>  **说明：**
+> grid-container仅支持grid-row为子组件。
+
+
+## 调用方法
+
+grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
+
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ gutterWidth:'',
+ columnWidth:'',
+ columns:'',
+ },
+ getColumns(){
+ this.$element('mygrid').getColumnWidth((result)=>{
+ this.columnWidth = result;
+ })
+ this.$element('mygrid').getGutterWidth((result)=>{
+ this.gutterWidth = result;
+ })
+ this.$element('mygrid').getColumns((result)=>{
+ this.columns= result;
+ })
+ setTimeout(()=>{
+ prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
+ this.gutterWidth+',getColumns:'+this.columns})
+ })
+ },
+ getSizeType(){
+ this.$element('mygrid').getSizeType((result)=>{
+ prompt.showToast({duration:2000,message:'get size type:'+result})
+ })
+ },
+}
+```
+
+
+
+
+## 添加grild-col
+
+创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。
+
+
+```
+
+
+
+
+
+
+ top
+
+
+
+
+
+
+ left
+
+
+
+
+ right
+
+
+
+
+
+
+ bottom
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image{{item.id}}
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ background-color: #00ff73;
+}
+```
+
+
+
+>  **说明：**
+> - Canvas组件默认背景色与父组件的背景色一致。
+>
+> - Canvas默认宽高为width: 300px，height: 150px。
+
+
+## 添加样式
+
+Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
+}
+```
+
+
+
+
+## 添加事件
+
+Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
+
+
+```
+
+
+
+ dataURL
+ {{dataURL}}
+
+```
+
+
+```
+/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
+ margin-bottom: 50px;
+}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ dataURL:null,
+ antialia: false,
+ porc:'open',
+ },
+ onShow(){
+ let el = this.$refs.canvas1 let ctx = el.getContext("2d") ctx.strokeRect(100,100,300,300)
+ },
+ getUrl(){
+ let el = this.$refs.canvas1
+ let dataUrl = el.toDataURL()
+ this.dataURL = dataUrl;
+ prompt.showToast({duration:2000,message:"long press,get dataURL"})
+ }
+}
+```
+
+
+
+>  **说明：**
+> 画布不支持在onInit和onReady中进行创建。
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
new file mode 100644
index 0000000000000000000000000000000000000000..02ff012214964e60d5d128a23ce2188adc39a909
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
@@ -0,0 +1,817 @@
+# CanvasRenderingContext2D对象
+
+
+使用CanvasRenderingContext2D在Canvas画布组件上进行绘制，绘制对象可以是图形、文本、线段、图片等。具体请参考[CanvasRenderingContext2D对象](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)。
+
+
+## 画线段
+
+使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 600px;
+ height: 500px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+select{
+ margin-top: 50px;
+ width: 250px;
+ height: 100px;
+ background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ el: null,
+ ctx: null,
+ },
+ onShow(){
+ this.el = this.$refs.canvas1;
+ this.ctx = this.el.getContext("2d",{antialias: true});
+ // 清除画布上的内容
+ this.ctx.clearRect(0, 0, 600, 500);
+ // 创建一个新的绘制路径
+ this.ctx.beginPath();
+ // 线端点以方形结束
+ this.ctx.lineCap = 'butt';
+ // 描边的宽度
+ this.ctx.lineWidth = 15;
+ // 创建一个新的绘制路径
+ this.ctx.beginPath();
+ // 路径从当前点移动到指定点
+ this.ctx.moveTo(200, 100);
+ // 从当前点到指定点进行路径连接
+ this.ctx.lineTo(400, 100);
+ // 边框绘制
+ this.ctx.stroke();
+ this.ctx.beginPath();
+ // 线端点以圆形结束
+ this.ctx.lineCap = 'round';
+ this.ctx.moveTo(200, 200);
+ this.ctx.lineTo(400, 200);
+ this.ctx.stroke();
+ // 线端点以方形结束
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'square';
+ this.ctx.moveTo(200, 300);
+ this.ctx.lineTo(400, 300);
+ this.ctx.stroke();
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ this.el = this.$refs.canvas1;
+ this.ctx = this.el.getContext("2d",{antialias: true});
+ this.ctx.clearRect(0, 0, 600, 500);
+ // 上
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'butt';
+ this.ctx.moveTo(200, 100);
+ this.ctx.lineTo(400, 100);
+ this.ctx.stroke();
+ // 中
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'round';
+ this.ctx.moveTo(200, 200);
+ this.ctx.lineTo(400, 200);
+ this.ctx.stroke();
+ // 下
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'square';
+ this.ctx.moveTo(200, 300);
+ this.ctx.lineTo(400, 300);
+ this.ctx.stroke();
+ }else if(e.newValue == 'value2'){
+ this.ctx.clearRect(0, 0, 600, 500);
+ // 上
+ this.ctx.beginPath();
+ this.ctx.moveTo(100, 150);
+ // 二次贝赛尔曲线的路径
+ this.ctx.quadraticCurveTo(300, 50, 500, 150);
+ this.ctx.stroke();
+ // 左
+ this.ctx.beginPath();
+ this.ctx.moveTo(200, 150);
+ this.ctx.quadraticCurveTo(250, 250, 250, 400);
+ this.ctx.stroke();
+ // 右
+ this.ctx.beginPath();
+ this.ctx.moveTo(400, 150);
+ this.ctx.quadraticCurveTo(350, 250, 350, 400);
+ this.ctx.stroke();
+ }else if(e.newValue == 'value3'){
+ this.ctx.clearRect(0, 0, 600, 500);
+ // 下
+ this.ctx.beginPath();
+ this.ctx.moveTo(100, 200);
+ // 三次贝赛尔曲线的路径
+ this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200);
+ this.ctx.stroke();
+ // 左
+ this.ctx.beginPath();
+ this.ctx.moveTo(350, 200);
+ this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200);
+ this.ctx.stroke();
+ // 右
+ this.ctx.beginPath();
+ this.ctx.moveTo(200, 350);
+ this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350);
+ this.ctx.stroke();
+ }else if(e.newValue == 'value4'){
+ this.ctx.clearRect(0, 0, 600, 500);
+ this.ctx.beginPath();
+ this.ctx.moveTo(100, 200);
+ // 弧线
+ this.ctx.arcTo(150, 300, 350, 300, 150);
+ this.ctx.stroke();
+ this.ctx.beginPath();
+ // 椭圆
+ this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1);
+ this.ctx.stroke();
+ }else if(e.newValue == 'value5'){
+ this.ctx.clearRect(0, 0, 600, 500);
+ // 左上
+ this.ctx.beginPath();
+ // 在线段相连处绘制一个扇形
+ this.ctx.lineJoin = 'round';
+ this.ctx.moveTo(100, 100);
+ this.ctx.lineTo(200, 200);
+ this.ctx.lineTo(100, 250);
+ this.ctx.stroke();
+ // 左下
+ this.ctx.beginPath();
+ // 在线段相连处使用三角形为底填充
+ this.ctx.lineJoin = 'bevel';
+ this.ctx.moveTo(100, 300);
+ this.ctx.lineTo(200, 400);
+ this.ctx.lineTo(100, 450);
+ this.ctx.stroke();
+ // 右上
+ this.ctx.beginPath();
+ //线条相交处内角和外角的距离
+ this.ctx.lineJoin = 'miter';
+ this.ctx.miterLimit = 3;
+ this.ctx.moveTo(400, 100);
+ this.ctx.lineTo(450, 200);
+ this.ctx.lineTo(400, 250);
+ // 结束当前路径形成一个封闭路径
+ this.ctx.closePath();
+ this.ctx.stroke();
+ // 右下
+ this.ctx.beginPath();
+ this.ctx.lineJoin = 'miter';
+ this.ctx.miterLimit = 10;
+ this.ctx.moveTo(400, 300);
+ this.ctx.lineTo(450, 400);
+ this.ctx.lineTo(400, 450);
+ this.ctx.closePath();
+ this.ctx.stroke();
+ }
+ },
+}
+```
+
+
+
+
+## 画边框
+
+全局定义画布（el）及画笔（ctx），初始化创建一个边框宽度为5的长方形。对边框的宽度（lineWidth）、颜色（strokeStyle）、虚化程度（setLineDash）进行改变，选用select组件添加change事件，下拉选择时触发change事件后画出改变后的图形。
+
+
+
+```
+
+
+
+
+
+```
+
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 600px;
+ height: 500px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+select{
+ margin-top: 50px;
+ width: 250px;
+ height: 100px;
+ background-color: white;
+}
+```
+
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ el: null,
+ ctx: null,
+ },
+ onShow(){
+ this.el = this.$refs.canvas1;
+ this.ctx = this.el.getContext("2d",{antialias: true});
+ this.ctx.lineWidth = 5;
+ this.ctx.strokeRect(200, 150, 200, 200);
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ // 边框宽度
+ this.ctx.lineWidth = 5;
+ // 边框颜色
+ this.ctx.strokeStyle = '#110000';
+ // 边框的虚化程度
+ this.ctx.setLineDash([0,0]);
+ // 画具有边框的矩形
+ this.ctx.strokeRect(200, 150, 200, 200);
+ }else if(e.newValue == 'value2'){
+ this.ctx.clearRect(0,0,600,500);
+ this.ctx.lineWidth = 30;
+ this.ctx.strokeStyle = '#0000ff';
+ this.ctx.setLineDash([0,0]);
+ // 画圆
+ this.ctx.arc(300, 250, 150,0,6.28);
+ //进行边框绘制
+ this.ctx.stroke();
+ }else if(e.newValue == 'value3'){
+ this.ctx.clearRect(0,0,600,500);
+ this.ctx.lineWidth = 5;
+ this.ctx.setLineDash([5,5]);
+ this.ctx.strokeRect(200, 150, 200, 200);
+ }else if(e.newValue == 'value4'){
+ this.ctx.clearRect(0,0,600,500);
+ // 画一个有填充颜色的矩形
+ this.ctx.fillStyle = '#0000ff';
+ this.ctx.fillRect(200, 150, 200, 200);
+ }
+ },
+}
+```
+
+
+
+
+
+## 填充渐变色
+
+添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 600px;
+ height: 500px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+select{
+ margin-top: 50px;
+ width: 250px;
+ height: 100px;
+ background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ el: null,
+ ctx: null,
+ },
+ onShow(){
+ this.el = this.$refs.canvas1;
+ this.ctx = this.el.getContext("2d",{antialias: true});
+ // 创建一个线性渐变色
+ let gradient = this.ctx.createLinearGradient(100,100, 400,300);
+ // 添加渐变颜色
+ gradient.addColorStop(0.0, 'red');
+ gradient.addColorStop(0.7, 'white');
+ gradient.addColorStop(1.0, 'green');
+ // 填充颜色为渐变色
+ this.ctx.fillStyle = gradient;
+ this.ctx.fillRect(100, 100, 400, 300);
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ let gradient = this.ctx.createLinearGradient(100,100, 400,300);
+ gradient.addColorStop(0.0, 'red');
+ gradient.addColorStop(0.7, 'white');
+ gradient.addColorStop(1.0, 'green');
+ this.ctx.fillStyle = gradient;
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 0;
+ // 绘制阴影时和原有对象的垂直偏移值
+ this.ctx.shadowOffsetY = 0;
+ // 绘制阴影时和原有对象的水平偏移值
+ this.ctx.shadowOffsetX = 0;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }else if(e.newValue == 'value2'){
+ this.ctx.clearRect(0,0,600,500);
+ // 创建一个径向渐变色
+ let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100);
+ gradient.addColorStop(0.0, 'red');
+ gradient.addColorStop(0.7, 'white');
+ gradient.addColorStop(1.0, 'green');
+ this.ctx.shadowBlur = 0;
+ this.ctx.shadowOffsetY = 0;
+ this.ctx.shadowOffsetX = 0;
+ this.ctx.fillStyle = gradient;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }else if(e.newValue == 'value3'){
+ this.ctx.clearRect(0,0,600,500);
+ let gradient = this.ctx.createLinearGradient(100,100, 400,400); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 30;
+ // 绘制阴影时的阴影颜色
+ this.ctx.shadowColor = 'rgb(229, 16, 16)';
+ this.ctx.fillStyle = gradient;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }else if(e.newValue == 'value4'){
+ this.ctx.clearRect(0,0,600,500);
+ this.ctx.clearRect(0,0,600,500);
+ let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 30; this.ctx.shadowOffsetY = 30;
+ // 绘制阴影时的阴影颜色
+ this.ctx.shadowColor = 'rgb(23, 1, 1)';
+ this.ctx.fillStyle = gradient;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }
+ },
+}
+```
+
+
+
+
+## 填充文字
+
+先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 600px;
+ height: 500px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+select{
+ margin-top: 50px;
+ width: 250px;
+ height: 100px;
+ background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ el: null,
+ ctx: null,
+ },
+ onShow(){
+ this.el = this.$refs.canvas1;
+ this.ctx = this.el.getContext("2d",{antialias: true});
+ // 创建文本
+ let text = "Hello World";
+ // 设置字体
+ this.ctx.font = '30px';
+ this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+ // 填充字体文本
+ this.ctx.fillText(text, 200, 250);
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ // 开始新的路径
+ this.ctx.beginPath();
+ // 初始化textAlign值
+ this.ctx.textAlign = 'left';
+ // 初始化textBaseline
+ this.ctx.textBaseline = 'alphabetic';
+ // 设置字体
+ this.ctx.font = '30px';
+ let text = "Hello World";
+ // 获取字体width
+ this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+ // 填充字体文本
+ this.ctx.fillText(text, 200, 250);
+ }else if(e.newValue == 'value2'){
+ this.ctx.clearRect(0,0,600,500);
+ this.ctx.beginPath();
+ // 设置透明度
+ this.ctx.globalAlpha = 0.1;
+ // 设置线宽度
+ this.ctx.lineWidth = 10;
+ // 设置线段颜色
+ this.ctx.strokeStyle = '#0000ff';
+ // 从当前点移动到指定点
+ this.ctx.moveTo(0, 240);
+ // 当前点到指定点进行路径连接
+ this.ctx.lineTo(600, 240);
+ this.ctx.stroke();
+ this.ctx.font = '35px';
+ this.ctx.globalAlpha = 1;
+ // 初始化textAlign值
+ this.ctx.textAlign = 'left';
+ // 设置textBaseline
+ this.ctx.textBaseline = 'top';
+ this.ctx.fillText('Top', 50, 240);
+ this.ctx.textBaseline = 'bottom';
+ this.ctx.fillText('Bottom', 200, 240);
+ this.ctx.textBaseline = 'middle';
+ this.ctx.fillText('Middle', 400, 240);
+ }else if(e.newValue == 'value3'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ this.ctx.beginPath();
+ this.ctx.globalAlpha = 0.1;
+ this.ctx.lineWidth = 10;
+ this.ctx.strokeStyle = '#0000ff';
+ this.ctx.moveTo(300, 0);
+ this.ctx.lineTo(300, 500);
+ this.ctx.stroke();
+ this.ctx.font = '35px';
+ this.ctx.globalAlpha = 1;
+ // 初始化 textBaseline
+ this.ctx.textBaseline = 'alphabetic';
+ // 设置textAlign
+ this.ctx.textAlign = 'left';
+ this.ctx.fillText('textAlign=left',300, 100);
+ this.ctx.textAlign = 'center';
+ this.ctx.fillText('textAlign=center',300, 250);
+ this.ctx.textAlign = 'right';
+ this.ctx.fillText('textAlign=right',300, 400);
+ }
+ }
+}
+```
+
+
+
+>  **说明：**
+> ltr布局模式下start和left一致，rtl布局模式下start和right一致·。
+
+
+## 添加图片
+
+创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。
+
+
+```
+
+
+
+
+ change
+
+ rotate
+
+ scale
+
+ translate
+
+ transform
+
+ setTransform
+
+
+
+
+
+
+
+ save
+ clear
+ restore
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.chart-data {
+ width: 700px;
+ height: 600px;
+}
+```
+
+```
+/* xxx.js */
+export default {
+ data: {
+ lineData: [
+ {
+ data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716]
+ }
+ ],
+ lineOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ series: {
+ lineStyle: {
+ width: 15,
+ },
+ }
+ },
+ }
+}
+```
+
+
+
+
+
+## 设置图表类型
+
+Chart组件通过设置type属性定义图表t类型，如将图表设置为柱状图。
+
+
+```
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+ 线形图
+ 柱状图
+ 量规图
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.chart-data {
+ width: 700px;
+ height: 600px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+ data: {
+ //线形图数据
+ lineData: [
+ {
+ strokeColor: '#0081ff',
+ fillColor: '#cce5ff', //填充色
+ data: [463, 250, 251, 254, 431, 354, 225, 396, 295, 328, 491, 205, 313, 275, 475, 553, 491, 380, 357, 416],
+ gradient: true,
+ }
+ ],
+ lineOps: {
+ //x轴参数设置
+ xAxis: { min: 0, max: 20, display: false, },
+ //y轴参数设置
+ yAxis: { min: 0, max: 1000, display: false, },
+ //数据序列参数设置
+ series: {
+ //线样式设置
+ lineStyle: { width: "5px", smooth: true, },
+ //线最前端位置白点的样式和大小
+ headPoint: { shape: "circle", size: 20, strokeWidth: 5, fillColor: '#ffffff', strokeColor: '#007aff', display: true, },
+ //设置屏幕显示满时，是否需要重头开始绘制
+ loop: { margin: 2, gradient: true } } },
+ },
+}
+```
+
+>  **说明：**
+> - options只支持柱状图和线形图设置参数，量规图不生效。
+>
+> - datasets只支持柱状图和线形图设置数据集合，量规图不生效。
+>
+> - series只有线形图支持。
+
+
+## 添加数据
+
+通过Chart组件的append方法，实现动态添加数据。
+
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.chart-region {
+ height: 400px;
+ width: 700px;
+}
+.chart-data {
+ width: 700px;
+ height: 600px;
+}
+button {
+ width: 100%;
+ height: 50px;
+ background-color: #F4F2F1;
+ text-color: #0C81F3;
+ margin-top: 30px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+ data: {
+ lineData: [
+ {
+ strokeColor: '#de0b6e',
+ fillColor: '#bb09a3',
+ data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+ gradient: true,
+ }
+ ],
+ lineOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ series: {
+ lineStyle: {
+ width: "5px",
+ smooth: true,
+ },
+ headPoint: {
+ shape: "circle",
+ size: 20,
+ strokeWidth: 5,
+ fillColor: '#ffffff',
+ strokeColor: '#f8145c',
+ display: true,
+ },
+ loop: {
+ margin: 2,
+ gradient: true,
+ }
+ }
+ },
+ },
+ addData() { this.$refs.linechart.append({ serial: 0, data: [Math.floor(Math.random() * 400) + 200] }) }
+}
+```
+
+
+
+
+## 场景示例
+
+开发者可以根据开关Switch的状态来选择数据展示的状态，当Switch状态为true时，通过定时器来实现数据的动态展示。
+
+
+```
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+ {{ $item.data }}
+
+
+
+
+ {{ $item.value }}
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.animator {
+ width: 500px;
+ height: 500px;
+}
+```
+
+
+```
+/* index.js */
+export default {
+ data: {
+ frames: [
+ {
+ src: "/common/landscape1.jpg",
+ },
+ {
+ src: "/common/landscape2.jpg",
+ }
+ ],
+ },
+};
+```
+
+
+
+
+## 设置Image-animator组件属性
+
+添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ background-color: #F1F3F5;
+}
+.animator {
+ width: 500px;
+ height: 500px;
+}
+```
+
+
+```
+/* index.js */
+export default {
+ data: {
+ frames: [
+ {
+ src: 'common/landscape1.jpg',
+ width: '250px',
+ height: '250px',
+ left: '150px',
+ top: '50px',
+ },
+ {
+ src: 'common/landscape2.jpg',
+ width: '300px',
+ height: '300px',
+ left: '150px',
+ top: '100px',
+ },
+ {
+ src: 'common/landscape1.jpg',
+ width: '350px',
+ height: '350px',
+ left: '150px',
+ top: '150px',
+ },
+ {
+ src: 'common/landscape2.jpg',
+ width: '400px',
+ height: '400px',
+ left: '150px',
+ top: '200px',
+ },
+ {
+ src: 'common/landscape3.jpg',
+ width: '450px',
+ height: '450px',
+ left: '150px',
+ top: '250px',
+ },
+ {
+ src: 'common/landscape4.jpg',
+ width: '500px',
+ height: '500px',
+ left: '150px',
+ top: '300px',
+ },
+ ],
+ },
+};
+```
+
+
+
+>  **说明：**
+> - 如果在images属性中设置了单独的duration属性，在Image-animator组件中设置的duration属性无效。
+>
+> - 如果fixedsize属性值设置为true，图片的width 、height 、top 和left属性无效。
+>
+> - 如果reverse属性值设置为false，表示从第1张图片播放到最后1张图片。 如果reverse属性值设置为true，表示从最后1张图片播放到第1张图片。
+
+
+## 绑定事件
+
+向Image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.doc-page {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+.img {
+ width: 600px;
+ height: 600px;
+ border: 3px solid orange;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+ data: {
+ imginfo: [
+ {
+ src: 'common/landscape1.jpg',
+ },{
+ src: 'common/landscape2.jpg',
+ },{
+ src: 'common/landscape3.jpg',
+ },{
+ src: 'common/landscape4.jpg',
+ }
+ ],
+ },
+ onInit() {
+ },
+ setpause(e) {
+ this.$element('img').pause()
+ },
+ setresume(e) {
+ this.$element('img').resume()
+ },
+ popstart(e) {
+ prompt.showToast({
+ message: '开始'
+ })
+ },
+ poppause(e) {
+ prompt.showToast({
+ message: '暂停'
+ })
+ },
+ popstop(e) {
+ prompt.showToast({
+ message: '停止'
+ })
+ },
+ popresume(e) {
+ prompt.showToast({
+ message: '恢复'
+ })
+ }
+}
+```
+
+
+
+
+## 场景示例
+
+在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。
+
+Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 设置属性和样式
+
+Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.customMarquee {
+ width: 100%;
+ height: 80px;
+ padding: 10px;
+ margin: 20px;
+ border: 4px solid #6712f1;
+ border-radius: 20px;
+ font-size: 40px;
+ color: #ffffff; font-weight: bolder;
+ font-family: serif;
+ background-color: #1567f3;
+}
+```
+
+
+
+通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.title-text{
+ font-size: 35px;
+}
+```
+
+
+
+>  **说明：**
+> - Menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。
+>
+> - Menu组件不支持focusable、disabled属性。
+
+
+## 设置样式
+
+为menu组件设置样式，例如字体颜色、大小、字符间距等。
+
+
+```
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.title-text{
+ font-size: 35px;
+ background-color: #5a5aee;
+ color: white;
+ width: 70%;
+ text-align: center;
+ height: 85px;
+ border-radius: 12px;
+}
+menu{
+ text-color: blue;
+ font-size: 35px;
+ letter-spacing: 2px;
+}
+option{
+ color: #6a6aef;
+ font-size: 30px;
+}
+```
+
+
+
+
+## 绑定事件
+
+为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。
+
+
+```
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ width: 100%;
+}
+.title-text{
+ font-size: 35px;
+ background-color: #5a5aee;
+ color: white;
+ width: 70%;
+ text-align: center;
+ height: 85px;
+ border-radius: 12px;
+ margin-top: 500px;
+ margin-left: 15%;
+}
+menu{
+ text-color: blue;
+ font-size: 35px;
+ letter-spacing: 2px;
+}
+option{
+ color: #6a6aef;
+ font-size: 30px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+ select(e) {
+ prompt.showToast({
+ message: e.value
+ })
+ },
+ cancel(){
+ prompt.showToast({
+ message: "cancel"
+ })
+ },
+ textClick() {
+ this.$element("menuId").show({x:175,y:590});
+ },
+}
+```
+
+
+
+
+## 场景示例
+
+本场景中开发者可点击toggle组件修改文字颜色，选择menu组件修改渐变色块大小。
+
+
+```
+
+
+
+ {{item.name}}
+
+
width:{{width}},height:{{height}}
+
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ width: 600px;
+ height: 500px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+select{
+ margin-top: 50px;
+ width: 250px;
+ height: 100px;
+ background-color: white;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ el: null,
+ ctx: null,
+ offscreen: null,
+ offCanvas: null,
+ img: null,
+ },
+ onShow(){
+ this.ctx = this.$refs.canvas1.getContext("2d");
+ this.offscreen = new OffscreenCanvas(600, 500);
+ this.offCanvas = this.offscreen.getContext("2d");
+ this.img = new Image();
+ this.img.src = 'common/images/2.png';
+ // 图片成功获取触发方法
+ let _this = this;
+ this.img.onload = function() {
+ _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
+ };
+ this.img.onerror = function() {
+ prompt.showToast({message:"error",duration:2000})
+ };
+ 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);
+ var bitmap = this.offscreen.transferToImageBitmap();
+ this.ctx.transferFromImageBitmap(bitmap);
+ },
+}
+```
+
+
+
+
+
+## 判断位置
+
+使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。
+
+
+```
+
+
+
+ 坐标：{{X}}, {{Y}}
+ In path:{{textValue}}
+ In stroke:{{textValue1}}
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+canvas{
+ width: 600px;
+ height: 600px;
+ background-color: #fdfdfd;
+ border: 5px solid red;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ onShow(){
+ let ctx = this.$refs.canvas.getContext('2d',{antialias: true});
+ let path = ctx.createPath2D();
+ // 房顶
+ path.moveTo(10, 300);
+ path.lineTo(210,100);
+ path.lineTo(410, 300);
+ // 屋子
+ path.moveTo(10, 300);
+ path.lineTo(410, 300);
+ path.lineTo(410, 600);
+ path.lineTo(10, 600);
+ path.closePath();
+ // 窗子
+ path.moveTo(50, 450);
+ path.bezierCurveTo(70, 350, 130, 350, 150, 450);
+ path.closePath();
+ // 门
+ path.moveTo(250, 450);
+ path.rect(250, 450, 350, 600);
+ path.closePath();
+ // 烟囱
+ path.moveTo(365, 250);
+ path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1);
+ // 树
+ path.moveTo(485, 450);
+ path.quadraticCurveTo(510, 500, 485, 600);
+ path.moveTo(550, 450);
+ path.quadraticCurveTo(525, 500, 550, 600);
+ path.moveTo(600, 535);
+ path.arc(520, 450, 85, 0, 6);
+ ctx.stroke(path);
+ },
+}
+```
+
+
+
+
+
+## 画图形
+
+先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。
+
+
+```
+
+
+
+
+ {{ isAdd }}
+ {{textName}}
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+>  **说明：**
+> Qrcode组件在创建的时候value的值为必填项。
+
+
+## 设置组件类型
+
+通过设置Qrcode的type属性来选择按钮类型，如定义Qrcode为矩形二维码、圆形二维码。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+select{
+ margin-top: 50px;
+ margin-bottom: 50px;
+}
+```
+
+
+```
+// index.js
+export default {
+ data: {
+ qr_type: 'rect',
+ bcol_list: ['rect','circle']
+ },
+ settype(e) {
+ this.qr_type = e.newValue
+ },
+}
+```
+
+
+
+
+## 设置样式
+
+通过color和background-color样式为二维码设置显示颜色和背景颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+qrcode{
+ width: 300px;
+ height: 300px;
+ color: blue; background-color: #ffffff;
+}
+```
+
+
+
+>  **说明：**
+> - width和height不一致时，取二者较小值作为二维码的边长，且最终生成的二维码居中显示。
+>
+> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
+>
+
+
+## 场景示例
+
+在本场景中将二维码与输入框绑定，通过改变输入框的内容改变二维码。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+qrcode{
+ width: 400px;
+ height: 400px;
+}
+```
+
+
+```
+// index.js
+export default{
+ data: {
+ textVal: ''
+ },
+ change(e){
+ this.textVal = e.value
+ }
+}
+```
+
+
diff --git a/zh-cn/application-dev/ui/ui-js-components-rating.md b/zh-cn/application-dev/ui/ui-js-components-rating.md
new file mode 100644
index 0000000000000000000000000000000000000000..a6f5b4434823b3b1375c6451a5d4aa9f22369551
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-rating.md
@@ -0,0 +1,257 @@
+# Rating开发指导
+
+
+Rating为评分条组件，表示用户使用感受的衡量标准条。具体用法请参考[Rating](../reference/arkui-js/js-components-basic-rating.md)。
+
+
+## 创建Rating组件
+
+在pages/index目录下的hml文件中创建一个Rating组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+rating {
+ width: 80%;
+ height: 150px;
+}
+```
+
+
+
+
+## 设置评分星级
+
+Rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+rating {
+ width: 80%;
+ height: 150px;
+}
+```
+
+
+
+
+## 设置评分样式
+
+Rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。
+
+
+```
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+```
+/* index.js */
+export default {
+ data: {
+ backstar: 'common/love.png',
+ secstar: 'common/love.png',
+ forestar: 'common/love1.png',
+ ratewidth: '400px',
+ rateheight: '150px'
+ },
+ onInit(){
+ }
+}
+```
+
+
+
+>  **说明：**
+> - star-background、star-secondary、star-foreground属性的星级图源必须全部设置，否则默认的星级颜色为灰色，提示图源设置错误。
+>
+> - star-background、star-secondary、star-foreground属性只支持本地路径图片，图片格式为png和jpg。
+
+
+## 绑定事件
+
+向Rating组件添加change事件，打印当前评分。
+
+
+```
+
+
+
+
+```
+
+
+```
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+rating {
+ width: 80%;
+ height: 150px;
+}
+```
+
+
+```
+import prompt from '@system.prompt';
+export default {
+ showrating(e) {
+ prompt.showToast({
+ message: '当前评分' + e.rating
+ })
+ }
+}
+```
+
+
+
+
+## 场景示例
+
+开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。
+
+
+```
+
+
+
+
+
+
+
+ 替换自定义图片
+
+
+
+ numstars {{stars}}
+
+
+
+ rating {{rate}}
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 设置属性
+
+通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 添加样式
+
+通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+search{
+ color: black; placeholder-color: black; caret-color: red;
+}
+```
+
+
+
+
+## 绑定事件
+
+向Search组件添加change、search、submit、share和translate事件，对输入信息进行操作。
+
+
+```
+
+
+
+ Enter text and then touch and hold what you've entered
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+text{
+ width: 100%;
+ font-size: 25px;
+ text-align: center;
+ margin-bottom: 100px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt'
+export default {
+ search(e){
+ prompt.showToast({
+ message: e.value,
+ duration: 3000,
+ });
+ },
+ translate(e){
+ prompt.showToast({
+ message: e.value,
+ duration: 3000,
+ });
+ },
+ share(e){
+ prompt.showToast({
+ message: e.value,
+ duration: 3000,
+ });
+ },
+ change(e){
+ prompt.showToast({
+ message: e.value,
+ duration: 3000,
+ });
+ },
+ submit(e){
+ prompt.showToast({
+ message: 'submit',
+ duration: 3000,
+ });
+ }
+}
+```
+
+
+
+
+## 场景示例
+
+在本场景中通过下拉菜单选择Search、Textarea和Input组件来实现搜索和输入效果。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ background-color: #F1F3F5;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+
+
+
+## 设置样式和属性
+
+Slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+.sli{
+ color: #fcfcfc;
+ scrollbar-color: aqua;
+ background-color: #b7e3f3;
+}
+```
+
+
+
+通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+>  **说明：**
+> mode属性为滑动条样式，仅在手机和平板上生效，可选值为：
+>
+> - outset：滑块在滑杆上；
+>
+> - inset：滑块在滑杆内。
+
+
+## 绑定事件
+
+向Rating组件添加change事件，添加时需要传入ChangeEvent参数。
+
+
+```
+
+
+ slider start value is {{startValue}}
+ slider current value is {{currentValue}}
+ slider end value is {{endValue}}
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+```
+// xxx.js
+export default {
+ data: {
+ value: 0,
+ startValue: 0,
+ currentValue: 0,
+ endValue: 0,
+ },
+ setvalue(e) {
+ if (e.mode == "start") {
+ this.value = e.value;
+ this.startValue = e.value;
+ } else if (e.mode == "move") {
+ this.value = e.value;
+ this.currentValue = e.value;
+ } else if (e.mode == "end") {
+ this.value = e.value;
+ this.endValue = e.value;
+ }
+ }
+}
+```
+
+
+
+
+## 场景示例
+
+开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。
+
+
+```
+
+
+
+
+
+ The width of this picture is {{WidthVal}}
+ The height of this picture is {{HeightVal}}
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+svg{
+ background-color: blue;
+}
+```
+
+
+
+
+## 设置属性
+
+通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+svg{
+ background-color: yellow;
+}
+.rect{
+ background-color: red;
+}
+```
+
+
+
+>  **说明：**
+> - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。
+>
+> - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-path.md b/zh-cn/application-dev/ui/ui-js-components-svg-path.md
new file mode 100644
index 0000000000000000000000000000000000000000..80770f6543997e18d2d386764e5fb63f9a0e9fbb
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-path.md
@@ -0,0 +1,50 @@
+# 绘制路径
+
+
+Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现 饼状图效果。
+
+```
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1200px;
+ width: 600px;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+
+>  **说明：**
+> - M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。
+>
+> - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
+>
+> - H/h = horizontal lineto 绘制平行线。
+>
+> - V/v = vertical lineto 绘制垂直线。
+>
+> - C/c = curveto 三次贝塞尔曲线 设置三组坐标参数： x1 y1, x2 y2, x y。
+>
+> - S/s = smooth curveto 三次贝塞尔曲线命令 设置两组坐标参数： x2 y2, x y。
+>
+> - Q/q = quadratic Belzier curve 二次贝塞尔曲线 设置两组坐标参数： x1 y1, x y。
+>
+> - T/t = smooth quadratic Belzier curveto 二次贝塞尔曲线命令 设置参数： x y。
+>
+> - A/a = elliptical Arc 弧形命令 设置参数： rx ry x-axis-rotation（旋转角度）large-arc-flag（角度大小） sweep-flag（弧线方向） x y。large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。
+>
+> - Z/z = closepath 从当前点画一条直线到路径的起点。
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-text.md b/zh-cn/application-dev/ui/ui-js-components-svg-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..c5e0d18c7ef6031074ed59ee37758a89c8c9b2e5
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-text.md
@@ -0,0 +1,53 @@
+# 绘制文本
+
+
+Svg组件还可以绘制文本。
+
+
+## 文本
+
+>  **说明：**
+> - 文本的展示内容需要写在元素标签text内，可嵌套tspan子元素标签分段。
+>
+> - 只支持被父元素标签svg嵌套。
+>
+> - 只支持默认字体sans-serif。
+
+通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
+
+
+```
+
+
+
+
+```
+
+
+
+
+## 沿路径绘制文本
+
+textpath文本内容沿着属性path中的路径绘制文本。
+
+
+```
+
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 添加属性和方法
+
+ witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+switch{
+ // 选中时的字体颜色
+ texton-color: #002aff;
+ // 未选中时的字体颜色
+textoff-color: silver;
+ text-padding: 20px;
+ font-size: 50px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ switchChange(e){
+ if(e.checked){
+ prompt.showToast({
+ message: "open"
+ });
+ }else{
+ prompt.showToast({
+ message: "close"
+ });
+ }
+ }
+}
+```
+
+
+
+
+
+>  **说明：**
+> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。
+
+
+## 场景示例
+
+在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。
+
+ 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
+
+```
+
+
+
+ Choose default address:
+
+
+
+ Shipping address:{{address}}
+
+
+ Choose an address:
+ {{item}}
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+
+
+## 添加子组件
+
+ Toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
+
+```
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+
+
+## 设置样式
+
+设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+.toolbarActive{
+ color: red;
+ background-color: #daebef;
+}
+```
+
+
+
+
+
+## 绑定事件
+
+分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ itemColor:'black'
+ },
+ itemClick(){
+ this.itemColor= "red";
+ prompt.showToast({duration:2000,message:'item click'});
+ },
+ itemLongPress(){
+ prompt.showToast({duration:2000,message:'item long press'});
+ this.itemColor= "blue";
+ },
+}
+```
+
+
+
+>  **说明：**
+> Toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
+
+
+## 场景示例
+
+本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。
+
+ 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ active: 0,
+ imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
+ itemList:[
+ {option:'item1',icon:'common/images/1.png'},
+ {option:'item2',icon:'common/images/2.png'},
+ {option:'item3',icon:'common/images/3.png'},
+ {option:'item4',icon:'common/images/4.png'},
+ ]
+ },
+ itemClick(id){
+ this.active= id;
+ },
+}
+```
+
+
diff --git a/zh-cn/application-dev/ui/ui-js-container-components.md b/zh-cn/application-dev/ui/ui-js-container-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..5e25cc9e28f6ef8ad420ac687e4dd84150dcf792
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-container-components.md
@@ -0,0 +1,15 @@
+# 容器组件
+
+
+
+- **[List开发指导](ui-js-components-list.md)**
+
+- **[Dialog开发指导](ui-js-components-dialog.md)**
+
+- **[Form开发指导](ui-js-components-form.md)**
+
+- **[Stepper开发指导](ui-js-components-stepper.md)**
+
+- **[Tabs开发指导](ui-js-component-tabs.md)**
+
+- **[Swiper开发指导](ui-js-components-swiper.md)**
\ No newline at end of file