From 6de162ca85faed410be302d8e7b3dd9e1eb93e95 Mon Sep 17 00:00:00 2001 From: luoying_ace Date: Thu, 29 Sep 2022 08:24:08 +0000 Subject: [PATCH] fixed 1d1ad94 from https://gitee.com/luoying_ace_admin/docs/pulls/10197 update zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md. Signed-off-by: luoying_ace --- .../arkui-ts/ts-drawing-components-shape.md | 168 ++++++++++++++---- 1 file changed, 138 insertions(+), 30 deletions(-) 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 502c54c40e..2e8274988c 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 @@ -48,7 +48,7 @@ Shape(value?: PixelMap) | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | mesh8+ | Array<number>,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | -## 示例 +## 示例1 ```ts // xxx.ets @@ -56,61 +56,169 @@ Shape(value?: PixelMap) @Component struct ShapeExample { build() { - Column({ space: 5 }) { - Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320) - // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) - // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) - // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) + Column({ space: 10 }) { + Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320) + // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) Shape() { Rect().width(300).height(50) 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 }) } .viewPort({ x: -2, y: -2, width: 304, height: 130 }) - .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) - .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) - .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) - // 在Shape的(-1, -1)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度2 + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(4) + .strokeDashArray([20]) + .strokeDashOffset(10) + .strokeLineCap(LineCapStyle.Round) + .strokeLineJoin(LineJoinStyle.Round) + .antiAlias(true) + // 分别在Shape的(0, 0)、(-5, -5)点绘制一个 300 * 50 带边框的矩形,可以看出之所以将视口的起始位置坐标设为负值是因为绘制的起点默认为线宽的中点位置，因此要让边框完全显示则需要让视口偏移半个线宽 Shape() { Rect().width(300).height(50) - }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) + } + .viewPort({ x: 0, y: 0, width: 320, height: 70 }) + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(10) - Text('border').fontSize(30).fontColor(0xCCCCCC).width(320).margin({top:30}) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20 Shape() { - Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10 + Rect().width(300).height(50) + } + .viewPort({ x: -5, y: -5, width: 320, height: 70 }) + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(10) + + Text('path').fontSize(11).fontColor(0xCCCCCC).width(320) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 20 }) - .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5 + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,向左偏移10 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角 + } + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + .strokeDashOffset(10) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,透明度0.5 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 20 }) - .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) - // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角 + .stroke(0xEE8443) + .strokeWidth(10) + .strokeOpacity(0.5) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,线条两端样式为半圆 Shape() { - Rect().width(300).height(100) + Path().width(300).height(10).commands('M0 0 L900 0') } - .viewPort({ x: -5, y: -5, width: 310, height: 120 }) - .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + .strokeLineCap(LineCapStyle.Round) + // 在Shape的(-80, -5)点绘制一个封闭路径,颜色0x317AF7,线条宽度10,边框颜色0xEE8443,拐角样式锐角（默认值） Shape() { - Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') + Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') } - .viewPort({ x: -80, y: -5, width: 310, height: 100 }) - .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10) - .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5) + .viewPort({ x: -80, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) }.width('100%').margin({ top: 15 }) } } ``` -![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png) + +## 示例2 + +```ts +// xxx.ets +@Entry +@Component +struct ShapeMeshExample { + @State columnVal: number = 0; + @State rowVal: number = 0; + @State count: number = 0; + @State verts: Array = []; + @State shapeWidth: number = 600; + @State shapeHeight: number = 600; + + build() { + Column() { + Shape() { + Rect() + .width('250px') + .height('250px') + .radiusWidth('10px') + .radiusHeight('10px') + .stroke('10px') + .margin({ left: '10px', top: '10px' }) + .strokeWidth('10px') + .fill(Color.Blue) + Rect() + .width('250px') + .height('250px') + .radiusWidth('10px') + .radiusHeight('10px') + .stroke('10px') + .margin({ left: '270px', top: '10px' }) + .strokeWidth('10px') + .fill(Color.Red) + } + .mesh(this.verts, this.columnVal, this.rowVal) + .width(this.shapeWidth + 'px') + .height(this.shapeHeight + 'px') + // 手指触摸Shape组件时会显示mesh扭曲效果 + .onTouch((event: TouchEvent) => { + var touchX = event.touches[0].x * 2; + var touchY = event.touches[0].y * 2; + this.columnVal = 20; + this.rowVal = 20; + this.count = (this.columnVal + 1) * (this.rowVal + 1); + var orig = [this.count * 2]; + var index = 0; + for (var i = 0; i <= this.rowVal; i++) { + var fy = this.shapeWidth * i / this.rowVal; + for (var j = 0; j <= this.columnVal; j++) { + var fx = this.shapeWidth * j / this.columnVal; + orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; + orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; + index++; + } + } + for (var k = 0; k < this.count * 2; k += 2) { + var dx = touchX - orig[k + 0]; + var dy = touchY - orig[k + 1]; + var dd = dx * dx + dy * dy; + var d = Math.sqrt(dd); + var pull = 80000 / (dd * d); + if (pull >= 1) { + this.verts[k + 0] = touchX; + this.verts[k + 1] = touchY; + } else { + this.verts[k + 0] = orig[k + 0] + dx * pull; + this.verts[k + 1] = orig[k + 1] + dy * pull; + } + } + }) + } + .width('600px') + .height('600px') + .border({ width: 3, color: Color.Black }) + } +} +``` -- GitLab