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 15d655ff27b9b2e468f2509b93b058f3279ad64c..22231ba443c6382fb645d04b9833424324be8e55 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 @@ -145,91 +145,3 @@ struct ShapeExample { ``` ![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 }) - } -} -``` - -示意图: - -![zh-cn_image1_0000001184628104](figures/zh-cn_image1_0000001184628104.png) - -手指触摸Shape组件时会显示mesh扭曲效果: - -![zh-cn_image2_0000001184628104](figures/zh-cn_image2_0000001184628104.png) \ No newline at end of file