【Qt Quick】Image-Discuz教程下载

【Qt Quick】Image

来自版块: Discuz教程发表于: 2024-7-1 23:05:58
212
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
加载图片
  1. Image {
  2.       width: 130; height: 100
  3.       source: "../Image/TBH.png"
  4.   }
复制代码
不透明度
  1. opacity: 0.5
复制代码
拉伸图片的方法
说明
在不同场景中图片的显示方法也不同,平铺拉伸等。
写法
1. Stretch(默认)
图像被缩放以适应
  1. Image {
  2.       width: 130; height: 100
  3.       source: "qtlogo.png"
  4.   }
复制代码
2. PreserveAspectFit
图像等比缩放
  1. Image {
  2.       width: 130; height: 100
  3.       fillMode: Image.PreserveAspectFit
  4.       source: "qtlogo.png"
  5.   }
复制代码
3. PreserveAspectCrop
图像均匀缩放以填充,必要时裁剪
  1. Image {
  2.       width: 130; height: 100
  3.       fillMode: Image.PreserveAspectCrop
  4.       source: "qtlogo.png"
  5.       clip: true
  6.   }
复制代码
4. Tile
平铺
  1. Image {
  2.       width: 120; height: 120
  3.       fillMode: Image.Tile
  4.       horizontalAlignment: Image.AlignLeft
  5.       verticalAlignment: Image.AlignTop
  6.       source: "qtlogo.png"
  7.   }
复制代码
5. TileVertically
垂直拉伸
  1. Image {
  2.       width: 120; height: 120
  3.       fillMode: Image.TileVertically
  4.       verticalAlignment: Image.AlignTop
  5.       source: "qtlogo.png"
  6.   }
复制代码
6. TileHorizontally
水平拉伸

  1. Image {
  2.       width: 120; height: 120
  3.       fillMode: Image.TileHorizontally
  4.       verticalAlignment: Image.AlignLeft
  5.       source: "qtlogo.png"
  6.   }
复制代码
抗锯齿处理
较大图片缩小显示时,会有明显的锯齿感
1.png
处理之后的图片会明显平滑很多
2.png
手动进行设置大小
  1. sourceSize: Qt.size(60,60)
复制代码
绝对路径的图片加载方法
在绝对路径前+file:///
代码
说明
在面板中输入网址点击Open进行加载,可以加载网络图片或者本地图片。
  1. import QtQuick 2.0
  2. import QtQuick.Controls 2.5

  3. Item {
  4.     id:root
  5.     anchors.fill: parent

  6.     Rectangle{
  7.         anchors.top:parent.top
  8.         width: parent.width
  9.         height: parent.height - 80
  10.         color: "#121212"

  11.         //设置等待加载时的转圈
  12.         BusyIndicator{
  13.             id:busy
  14.             running: true
  15.             anchors.centerIn: parent
  16.             z:2
  17.         }

  18.         Text{
  19.             id:stateLabel
  20.             visible: false
  21.             color: "white"
  22.             font.pointSize: 30
  23.             anchors.centerIn: parent
  24.             z:3
  25.         }

  26.         Image {
  27.             id: imageViewer
  28.             asynchronous: true//网络加载时此属性不起作用
  29.             cache:false//为false告诉图片不用缓存
  30.             anchors.fill: parent
  31.             fillMode: Image.PreserveAspectCrop //图片被均匀的缩放用来适应不需要裁剪的情况
  32.             onStatusChanged: {
  33.                 if(imageViewer.status === Image.Loading){
  34.                     busy.running = true
  35.                     stateLabel.visible = false
  36.                 }else if(imageViewer.status === Image.Ready){
  37.                     busy.running = false
  38.                 }else if(imageViewer.status === Image.Error){
  39.                     busy.running = false
  40.                     stateLabel.visible = true
  41.                     stateLabel.text = "ERROR"
  42.                 }
  43.             }
  44.         }

  45. //        Component.onCompleted: {
  46. //            imageViewer.source =
  47. //            "file:///D:\\aFX_WP\\Qt_code\\LoderImage\\maps\\3318.jpg"
  48. //        }
  49.     }

  50.     Button{
  51.         id:i_BtnOpen
  52.         width: 80
  53.         height: 30
  54.         anchors.bottom: parent.bottom
  55.         anchors.bottomMargin: 20
  56.         anchors.left: parent.left
  57.         anchors.leftMargin: 20
  58.         Text{
  59.             text:"Open"
  60.             anchors.centerIn: parent
  61.             font.pointSize: 18
  62.         }
  63.         onClicked: {
  64.             imageViewer.source = i_TInput_Path.text
  65.         }
  66.     }
  67.     Rectangle{
  68.         width: 400
  69.         height: i_BtnOpen.height
  70.         anchors.left: i_BtnOpen.right
  71.         anchors.leftMargin: 20
  72.         anchors.top: i_BtnOpen.top
  73.         color: "black"
  74.         TextInput{
  75.             id:i_TInput_Path
  76.             anchors.fill: parent
  77.             color: "light gray"
  78.             font.pointSize: 14
  79.             verticalAlignment: Text.AlignVCenter
  80.             selectByMouse: true//允许鼠标选择输入框内的文字
  81.             selectionColor: "sky blue"
  82.             clip: true
  83.         }
  84.     }

  85. }
复制代码

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部