diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001219982725.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001219982725.png old mode 100644 new mode 100755 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001219982725.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001219982725.PNG index 310eae1cbaec0f37b61787a9cfa6ddf032c887d4..97b4e3e93daf8eb2b3d73a6776b56a4b745f0ba6 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001219982725.PNG and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001219982725.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png index ef4a4905fb4c0c1a6559bb622c523282ef01ee27..c334da3c021801a8c3c741bc5d2fbf76bcfe0455 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png index 17a7767c1f69c12ccfb0c1436110a9e22b848c26..4279bc045cae702953a3b0fd6d0e25450b27d945 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png index 048fdc4749a41e0675390e66e61b5d63953ed8e1..f5116e56dcaf8e48edc8f1d62a70160d8b84fba0 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index c87ba0db483cc70e214e12dc35e4dc72e711a4cc..663bf40b155f99a3ff4e752de047fd4dfd5444d3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -58,35 +58,41 @@ struct LineExample { Column({ space: 10 }) { // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标 Line() + .width(200) + .height(150) .startPoint([0, 0]) .endPoint([50, 100]) .stroke(Color.Black) .backgroundColor('#F5F5F5') Line() .width(200) - .height(200) + .height(150) .startPoint([50, 50]) .endPoint([150, 150]) .strokeWidth(5) .stroke(Color.Orange) .strokeOpacity(0.5) .backgroundColor('#F5F5F5') - // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域 - Line({ width: 50, height: 50 }) + // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移 + Line() + .width(200) + .height(150) .startPoint([0, 0]) .endPoint([100, 100]) .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) + .strokeDashOffset(5) .backgroundColor('#F5F5F5') - // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移 - Line({ width: 50, height: 50 }) + // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域 + Line() + .width(50) + .height(50) .startPoint([0, 0]) .endPoint([100, 100]) .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) - .strokeDashOffset(5) .backgroundColor('#F5F5F5') } } @@ -151,12 +157,16 @@ struct LineExample { build() { Column() { Line() + .width(300) + .height(30) .startPoint([50, 30]) .endPoint([300, 30]) .stroke(Color.Black) .strokeWidth(10) // 设置strokeDashArray的数组间隔为 50 Line() + .width(300) + .height(30) .startPoint([50, 20]) .endPoint([300, 20]) .stroke(Color.Black) @@ -164,6 +174,8 @@ struct LineExample { .strokeDashArray([50]) // 设置strokeDashArray的数组间隔为 50, 10 Line() + .width(300) + .height(30) .startPoint([50, 20]) .endPoint([300, 20]) .stroke(Color.Black) @@ -171,6 +183,8 @@ struct LineExample { .strokeDashArray([50, 10]) // 设置strokeDashArray的数组间隔为 50, 10, 20 Line() + .width(300) + .height(30) .startPoint([50, 20]) .endPoint([300, 20]) .stroke(Color.Black) @@ -178,6 +192,8 @@ struct LineExample { .strokeDashArray([50, 10, 20]) // 设置strokeDashArray的数组间隔为 50, 10, 20, 30 Line() + .width(300) + .height(30) .startPoint([50, 20]) .endPoint([300, 20]) .stroke(Color.Black) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index 71fa790219c90efaa162a3eb7de97f3623d9a574..08d670baba94c85bfb0bed37f1ab30561db5c6c5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -74,9 +74,10 @@ struct PathExample { .fontSize(11) .fontColor(0xCCCCCC) .width('90%') - // 绘制一条长900px，宽3vp的直线 + // 绘制一条长600px，宽3vp的直线 Path() - .height(10) + .width('600px') + .height('10px') .commands('M0 0 L600 0') .stroke(Color.Black) .strokeWidth(3) @@ -88,16 +89,22 @@ struct PathExample { // 绘制直线图形 Flex({ justifyContent: FlexAlign.SpaceBetween }) { Path() + .width('210px') + .height('310px') .commands('M100 0 L200 240 L0 240 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() + .width('210px') + .height('310px') .commands('M0 0 H200 V200 H0 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() + .width('210px') + .height('310px') .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z') .fillOpacity(0) .stroke(Color.Black) @@ -108,16 +115,22 @@ struct PathExample { // 绘制弧线图形 Flex({ justifyContent: FlexAlign.SpaceBetween }) { Path() + .width('250px') + .height('310px') .commands("M0 300 S100 0 240 300 Z") .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() + .width('210px') + .height('310px') .commands('M0 150 C0 100 140 0 200 150 L100 300 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() + .width('210px') + .height('310px') .commands('M0 100 A30 20 20 0 0 200 100 Z') .fillOpacity(0) .stroke(Color.Black) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index cdba2df4d4dfe6a55d1b4bf41e51f9ce56e74889..60d07fe9aafec52b01e133cd83c1b0f229c5b0e6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -70,6 +70,8 @@ struct ShapeExample { Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) } + .width(350) + .height(140) .viewPort({ x: -2, y: -2, width: 304, height: 130 }) .fill(0x317AF7) .stroke(Color.Black) @@ -83,6 +85,8 @@ struct ShapeExample { Shape() { Rect().width(300).height(50) } + .width(350) + .height(80) .viewPort({ x: 0, y: 0, width: 320, height: 70 }) .fill(0x317AF7) .stroke(Color.Black) @@ -91,6 +95,8 @@ struct ShapeExample { Shape() { Rect().width(300).height(50) } + .width(350) + .height(80) .viewPort({ x: -5, y: -5, width: 320, height: 70 }) .fill(0x317AF7) .stroke(Color.Black) @@ -101,6 +107,8 @@ struct ShapeExample { Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } + .width(350) + .height(20) .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443) .strokeWidth(10) @@ -109,6 +117,8 @@ struct ShapeExample { Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } + .width(350) + .height(20) .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443) .strokeWidth(10) @@ -118,6 +128,8 @@ struct ShapeExample { Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } + .width(350) + .height(20) .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443) .strokeWidth(10) @@ -126,6 +138,8 @@ struct ShapeExample { Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } + .width(350) + .height(20) .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443) .strokeWidth(10) @@ -135,7 +149,9 @@ struct ShapeExample { Shape() { Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') } - .viewPort({ x: -80, y: -5, width: 310, height: 90 }) + .width(300) + .height(200) + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) .fill(0x317AF7) .stroke(0xEE8443) .strokeWidth(10) @@ -147,3 +163,4 @@ struct ShapeExample { ``` ![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png) +、 \ No newline at end of file