diff --git a/ArkUI/entry/src/main/ets/pages/ResizableStretchAround.ets b/ArkUI/entry/src/main/ets/pages/ResizableStretchAround.ets
new file mode 100644
index 0000000000000000000000000000000000000000..313b95abb3fcfc4b171c2c1670975bf2a0c8af72
--- /dev/null
+++ b/ArkUI/entry/src/main/ets/pages/ResizableStretchAround.ets
@@ -0,0 +1,87 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ:是否有处理"9图"（又称"draw9patch"、".9图"、"点9图"等）的平替方案
+*/
+
+
+// [Start resizable_stretch_around]
+import { drawing } from '@kit.ArkGraphics2D';
+
+@Entry
+@Component
+struct DrawingLatticeResizeDemo {
+  // lattice grid definition
+  private xDivs: Array<number> = [40, 100, 120, 180];
+  private yDivs: Array<number> = [];
+  private fXCount: number = 4;
+  private fYCount: number = 0;
+  private drawingLatticeFirst: DrawingLattice =
+    drawing.Lattice.createImageLattice(this.xDivs, this.yDivs, this.fXCount, this.fYCount);
+  @State widthValue: number = 260;
+  @State heightValue: number = 260;
+
+  build() {
+    Scroll() {
+      Column({ space: 20 }) {
+        Text('Dynamic Resize by Lattice')
+          .fontSize(22)
+          .fontWeight(FontWeight.Bold)
+
+        // The picture shows
+        Image($r('app.media.lightBluexhdpi'))
+          .width(String(this.widthValue) + 'px')
+          .height(String(this.heightValue) + 'px')
+          .borderWidth(2)
+          .resizable({
+            lattice: this.drawingLatticeFirst
+          })
+
+        // Width adjustment
+        Column({ space: 5 }) {
+          Text(`Width: ${this.widthValue.toFixed(0)} px`)
+          Slider({
+            value: this.widthValue,
+            min: 100,
+            max: 400,
+            step: 10
+          })
+            .onChange(value => {
+              this.widthValue = value;
+            })
+        }
+
+        // Height adjustment
+        Column({ space: 5 }) {
+          Text(`Width: ${this.heightValue.toFixed(0)} px`)
+          Slider({
+            value: this.heightValue,
+            min: 78,
+            max: 400,
+            step: 10
+          })
+            .onChange(value => {
+              this.heightValue = value;
+            })
+        }
+      }
+      .width('100%')
+      .padding(20)
+    }
+  }
+}
+
+// [End resizable_stretch_around]
\ No newline at end of file