HarmonyOS svg图片尺寸

我现在有个svg图片。

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> 

它这个宽高现在是按40px来展示的,我希望能按40vp来展示应该怎么设置?

这个Image就是固定要 200x 200vp。

HarmonyOS
2024-10-28 10:19:05
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以试试Image的objectFit(ImageFit.None)方法。

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
        .objectFit(ImageFit.Fill)  
        .margin(15)  
          // 不保持宽高比进行放大缩小,使得图片充满显示边界。  
        .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
          // 保持宽高比显示,图片缩小或者保持不变。  
        .objectFit(ImageFit.ScaleDown)  
        .margin(15)  
        .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
          // 保持原有尺寸显示。  
        .objectFit(ImageFit.None)  
        .margin(15)  
        .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
    }  
  }  
}

针对不同的问题场景建议考虑其他布局,现提供以下思路。

Stack(){  
  Image($r('app.media.app_icon')).width(50).height(50)  
  Image($rawfile('konglong.jpg')).width(20).height(20)  
}  
.width(50).height(50)  
.border({  
  width: 1,  
  color: '#333'  
})
分享
微博
QQ
微信
回复
2024-10-28 16:00:40
相关问题
HarmonyOS如何换算字体或图片尺寸问题
335浏览 • 1回复 待解决
Image怎么替换svg图片
8248浏览 • 1回复 待解决
HarmonyOS svg图片运行后颜色变色了
157浏览 • 1回复 待解决
如何获取网络图片尺寸
334浏览 • 1回复 待解决
HarmonyOS 如何将svg图片导入到项目中
398浏览 • 1回复 待解决
图片压缩尺寸和大小问题
313浏览 • 1回复 待解决
HarmonyOS native中svg解码异常
341浏览 • 1回复 待解决
HarmonyOS svg、canvas 的使用详情
345浏览 • 1回复 待解决
Image组件不支持svg字符串显示
217浏览 • 1回复 待解决
HarmonyOS VP尺寸单位单位问题
215浏览 • 0回复 待解决
ConstraintSize尺寸设置问题
438浏览 • 1回复 待解决
ConstraintSize尺寸设置不生效
2277浏览 • 1回复 待解决
如何适配不同屏幕尺寸
239浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人