• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16/**
17 * 通过slice拉伸图片
18 */
19@Entry
20@Component
21struct Index {
22  @State top: number = 10
23  @State bottom: number = 10
24  @State left: number = 10
25  @State right: number = 10
26
27  build() {
28    Column({ space: 5 }) {
29      // 原图效果
30      Image($r('app.media.landscape'))
31        .width(200).height(200)
32        .border({ width: 2, color: Color.Pink })
33        .objectFit(ImageFit.Contain)
34
35      // 图像拉伸效果，设置resizable属性，对图片不同方向进行拉伸
36      Image($r('app.media.landscape'))
37        .resizable({
38          slice: {
39            left: this.left,
40            right: this.right,
41            top: this.top,
42            bottom: this.bottom
43          }
44        })
45        .width(200)
46        .height(200)
47        .border({ width: 2, color: Color.Pink })
48        .objectFit(ImageFit.Contain)
49
50      Row() {
51        Button('add top to ' + this.top).fontSize(10)
52          .onClick(() => {
53            this.top += 10
54          })
55        Button('add bottom to ' + this.bottom).fontSize(10)
56          .onClick(() => {
57            this.bottom += 10
58          })
59      }
60
61      Row() {
62        Button('add left to ' + this.left).fontSize(10)
63          .onClick(() => {
64            this.left += 10
65          })
66        Button('add right to ' + this.right).fontSize(10)
67          .onClick(() => {
68            this.right += 10
69          })
70      }
71
72    }
73    .justifyContent(FlexAlign.Start).width('100%').height('100%')
74  }
75}