【Qt Quick】Image-Discuz教程下载

登录/ 注册
站长工具
 找回密码
 立即注册
QQ登录
搜索
返回列表 发新帖

【Qt Quick】Image

来自版块: Discuz教程发表于: 2024-7-1 23:05:58
933
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
水平拉伸

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

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

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

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

  22.         Text{
  23.             id:stateLabel
  24.             visible: false
  25.             color: "white"
  26.             font.pointSize: 30
  27.             anchors.centerIn: parent
  28.             z:3
  29.         }

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

  51. //        Component.onCompleted: {
  52. //            imageViewer.source =
  53. //            "file:///D:\\aFX_WP\\Qt_code\\LoderImage\\maps\\3318.jpg"
  54. //        }
  55.     }

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

  93. }
复制代码
Image

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

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

©2015-2022 www.tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部