中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
以下链接的resizable方法有什么用?这是照片里的图片url:https://xcimg.szwego.com/wsxcWeb/21c6da89/fcff7a9b-813f-4717-aae1-c4cc5487b954
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#示例5
微信扫码分享
resizable是设置图像拉伸时可调整大小的图像选项。
1. 拉伸对拖拽缩略图以及占位图有效。
2. 设置合法的 ResizableOptions 时,objectRepeat 属性设置不生效。
3. 当设置 top +bottom 大于原图的高或者 left + right 大于原图的宽时 ResizableOptions 属性设置不生效。
示例代码:
@Entry @Component struct ImageComponent { @State top: number = 40 @State bottom: number = 5 @State left: number = 40 @State right: number = 10 build() { Column({ space: 5 }) { // 原图效果 Image("xxxx") .width(200).height(200) .border({ width: 2, color: Color.Pink }) .objectFit(ImageFit.Contain) // 图像拉伸效果,设置resizable属性,对图片不同方向进行拉伸 Image("xxx") .resizable({ slice: { left: this.left, right: this.right, top: this.top, bottom: this.bottom } }) .width(200) .height(200) .border({ width: 2, color: Color.Pink }) .objectFit(ImageFit.Contain) Row() { Button("add top to " + this.top).fontSize(10) .onClick(() => { this.top += 2 }) Button("add bottom to " + this.bottom).fontSize(10) .onClick(() => { this.bottom += 2 }) } Row() { Button("add left to " + this.left).fontSize(10) .onClick(() => { this.left += 2 }) Button("add right to " + this.right).fontSize(10) .onClick(() => { this.right += 2 }) } } .justifyContent(FlexAlign.Start).width('100%').height('100%') } }
resizable是设置图像拉伸时可调整大小的图像选项。
1. 拉伸对拖拽缩略图以及占位图有效。
2. 设置合法的 ResizableOptions 时,objectRepeat 属性设置不生效。
3. 当设置 top +bottom 大于原图的高或者 left + right 大于原图的宽时 ResizableOptions 属性设置不生效。
示例代码: