QML基础语法六

图形动画

    主要包含颜色、渐变、调色板,如何给Item上色

    集中图片的显示方式

    Item变换,包含缩放、旋转、平移

    状态和动画,让Item动起来

    Flickable弹动、Flipable翻转

    动画的基类 Animation

    1. 颜色

        color,一个ARGB格式颜色值,主要通过SVG颜色名称、十六进制、Qt.rgba()表示

        SVG颜色名称

            主要就是red、lime、blue、black、white、yellow、cyan、magenta、green、pink、gray、gold等

        十六进制

            主要类似#RRGGBB或者#AARRGGBB

        Qt颜色函数

            Qt.rgba(r,g,b,alpha)

            Qt.hsla(h,s,l,alpha)

            Qt.darker(color,factor)

            Qt.lighter(color,factor)

            Qt.tint(color,tintColor)

    2. 渐变

        使用一组GradientStop指定颜色,指定位置、颜色取值范围[0,1]

        Rectangle{
            gradient:Gradient{
                GradientStop{position:0.0;color:"red"}
                GradientStop{position:0.5;color:"blue"}
                GradientStop{position:1.0;color:"green"}
            }
        }

    3. 系统调色板SystemPalette

包含系统标准颜色值对象,通过SystemPalette访问调色板

3个颜色组:Active、Inactive、Disabled

    4.图片Image

 Image用来显示图片,路径由source指定,格式为Qt支持的任何格式,PNG、JPEG、SVG等

本地图片加载完成前会阻塞UI

本地大图片加载需要设置asynchronous为true,将加载放在一个低优先级线程

网络图片为自动异步加载

progress、status可以获得实时进度

status取值

            Image.Ready Image.Loading Image.Null Image.Error

利用sourceSize.width sourceSize.height设置图片在内存中的大小设置    

        Image{
            id:image
            fillMode:Image.Tile
            source:"http://www.baidu.com/img/a.gif"
            sourceSize.width:100;sourceSize.height:100;
            onStatusChanged:{
                if(image.status == Image.Ready)
                    console.log('Loaded')
                else if(image.status == Image.Loading)
                    console.log('Loading')
            }
        }

    5. 边界图片BorderImage

利用图片创建边框,将源图片分成9个区域,图片缩放时,将各个区域进行缩放或平铺

四个角(1、3、7、9)不进行缩放

区域2、8通过horizontalTileMode模式缩放

区域4、6通过verticalTileMode模式缩放

区域5结合horizontalTileMode、verticalTileMode设置的模式缩放

        BorderImage{

            border{left:30;top:30;right:30;bottom:30;}
            horizontalTileMode:BorderImage.Strecth          水平拉伸
            verticalTileMode:BorderImage.Strecth            垂直拉伸

            //horizontalTileMode:BorderImage.Repeat          水平平铺
            //verticalTileMode:BorderImage.Repeat            垂直平铺
            source:"a.png"

        }

    6.动态图片AnimatedImage

        扩展了Image,可以播放帧图片,gif,当前帧currentFrame、总长度frameCount

        playing、paused来控制开始、暂停、停止   

     Rectangle{

            property int frames
            width:animation.width
            height:animation.height+8
            AnimatedImage{
                id:animation
                source:"a.gif"
            }
            Component.onCompleted:{
                frames = animation.frameCount
            }

            Rectangle{
                width
                height
                x:(animation.width-width)*animation.currentFrame/frames
                y:animation.height
            }

        }

    7.缩放、旋转、平移变换

Item拥有一个scale、rotation属性,可以实现缩放、旋转

scale < 1.0 缩小,scale >1.0 放大、默认值是1.0 ,负值会显示镜像效果

缩放效果是按照  transformOrigin指定的点为原点,总共可指定九个点

TopLeft        Top        TopRight
Left            Center      Right

 BottomLeft      

Bottom      BottomRight

 

        例子:

Rectangle{
    scale:1.6
    tansformOrigin:"TopLeft"
}

 

rotation属性指定顺时针旋转的度数,默认为0,正数为顺时针旋转、负数为逆时针旋转

Rectangle{
    scale:1.6
    rotation:30
}

    8.Transform高级变换

Transform是抽象类无法实例化,需要制定一个列表

常用类型Rotation、Scale、Translate,旋转缩放平移

Rotation:提供坐标轴axis.x  axis.y  axis.z、代表XYZ轴,实现3D;

        8.1 原点属性:origin.x  origin.y

        2D旋转不需要指定坐标轴、3D旋转需要指定原点、坐标轴

        angle属性:指定旋转的度数

        例子:

Item{
    mage{
         source:"xxx.img"
         transform:Rotation{
             origin.x:30;origin.y:30;
             axis{x:0;y:1;z:0}
             angle:72
         }
    }
}
        8.2 Scale

 提供了origin.x  origin.y设置原点

 xScale  yScale 设置在X轴、Y轴方向的缩放比例

Image{
    source:"xxx.png"
    transform:Scale{
         origin.x:25;origin.y:25;xScale:2        //在X轴方向上放大两倍
    }
    transform:Translate{
        x:25;y:25               //在x、y轴的偏移量
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/593935.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Samsung三星NP930XCJ-K01CN笔记本原厂Win10系统安装包下载

三星SAMSUNG笔记本电脑原装出厂Windows10预装OEM系统&#xff0c;恢复开箱状态自带系统 链接&#xff1a;https://pan.baidu.com/s/1Y3576Tsp8MtDxIpJGDucbA?pwdt0ox 提取码&#xff1a;t0ox 三星原装W10系统自带声卡,网卡,显卡,指纹,蓝牙等所有驱动、三星出厂主题专用壁纸…

以太网基础-IP、ICMP、ARP协议

一、IP协议 参考&#xff1a;rfc791.txt.pdf (rfc-editor.org) IP协议&#xff08;Internet Protocol&#xff09;是TCP/IP协议族中最核心的协议&#xff0c;提供不可靠的、无连接的、尽力而为的数据报传输服务。 IP报文数据头如下 Version&#xff1a;4bit&#xff0c;4表示…

上位机图像处理和嵌入式模块部署(树莓派4b和qt应用全屏占有)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;嵌入式应用一般都是为了某一个特定应用而存在的。也就是说&#xff0c;和pc不同&#xff0c;这个嵌入式板子一般都是为了解…

关于YOLO8学习(二)数据集收集,处理

前文 关于YOLO8学习(一)环境搭建,官方检测模型部署到手机 简介 本文将会讲解: (1)如何通过三方网站,获取可用于训练的数据源 (2)通过三方网址,选择合适的手机,通过手动标注,转换为可用于训练的数据源 开发环境 win10、python 3.11、cmake、pytorch2.0.1+cu117…

大厂案例 - 通用的三方接口调用方案设计(中)

文章目录 Pre阿里云华为云【AK和SK生成方案】最佳实践1. 创建API密钥管理系统2. 生成AK和SK3. 存储和管理AK和SK4. 提供API密钥分发机制5. 安全性6. 其他注意事项 DB Model Design表结构Next考虑其他建议 API接口设计指导1. 使用POST作为接口请求方式2. 客户端IP白名单3. 单个接…

[C++核心编程-02]----C++引用详解和使用方法分析

前言 在C中&#xff0c;引用是一个别名&#xff0c;它允许将一个已存在的变量或对象用不同的名称来访问。引用在定义时必须初始化&#xff0c;并且一旦初始化就不能再绑定其他对象&#xff0c;因此引用在声明时被初始化后就不能再改变引用对象。引用使用&符号进行声明。 引…

Game Theory In Competitive Programming|Part1 (原创)

Game Theory In Competitive Programming|Part1 在算法竞赛中&#xff0c;博弈论是一个经常出现的题目类型。通常是两个人在给定规则下&#xff0c;每个人都按照最优策略进行博弈&#xff0c;我们的任务是找出获胜者。这通常是贪心算法、动态规划等算法的混合。下面&#xff0c…

Apache和Nginx的区别以及如何选择

近来遇到一些客户需要lnmp环境的虚拟主机&#xff0c;但是Hostease这边的虚拟主机都是基于Apache的&#xff0c;尽管二者是不同的服务器软件&#xff0c;但是大多数情况下&#xff0c;通过适当的配置和调整两者程序也是可以兼容的。 目前市面上有许多Web服务器软件&#xff0c;…

哈希表实现-哈希桶法

哈希桶方法 由于直接定值法实现哈希表有着明显的弊端——如果多个节点的hash值相同会往后堆积&#xff0c;所以衍生出哈希桶方法 我们的哈希表设置成一个结点指针数组&#xff0c;每个哈希值对应的是一串链表&#xff0c;形状就像一个一个的桶我们就会把hash值相同的节点放到一…

宝塔怎么配置nginx

宝塔怎么配置nginx 1.找到nginx配置位置 2.修改nginx.conf文件 3.重启nginx

21岁的人生赚51W!拒绝捞男捞女,翻身也要爱惜身体!——早读(逆天打工人爬取热门微信文章解读)

身体是革命的本钱 引言Python 代码第一篇 卢克文工作室 捞女在今天的中国是怎样的存在第二篇 人民日报 来啦 新闻早班车要闻社会政策 结尾 我将我的健康视为生活的基石 不会为了短暂的成功而牺牲 我珍惜身体 知道健康是实现梦想的前提 引言 这里毕竟是一个程序员的代码学习平台…

基于SpringBoot实现各省距离Excel导出实战

目录 前言 一、列表及图表信息展示 1、数据过滤调整 2、信息列表及图表展示 3、Excel写入 二、界面可视化 1、Echarts图表和列表展示 2、城市详情和下载功能设计 三、成果展示 1、图表展示 2、部分城市数据分析 总结 前言 今天是五一黄金周假期第二天&#xff0c;不知…

Redis(Jedis和SpringBoot整合Redis)

文章目录 1.Jedis1.介绍2.环境配置1.创建maven项目2.pom.xml引入依赖3.新建一个包并创建一个文件 3.Jedis远程连接到Redis1.Redis放到服务器可以连接的前提条件2.为Redis设置密码1.编辑配置文件2.找到 requirepass3.设置密码为root4.重启Redis&#xff0c;在shutdown的时候报错…

R语言实战——中国职工平均工资的变化分析——相关与回归分析

链接: R语言学习—1—将数据框中某一列数据改成行名 R语言学习—2—安德鲁斯曲线分析时间序列数据 R语言学习—3—基本操作 R语言学习—4—数据矩阵及R表示 R语言的学习—5—多元数据直观表示 R语言学习—6—多元相关与回归分析 1、源数据 各行业平均工资变化 各地区平均工资…

常用算法介绍

1. 冒泡排序&#xff1a;冒泡排序是一种简单的排序算法&#xff0c;它的基本思想是比较相邻的两个元素&#xff0c;如果顺序错误就交换它们的位置&#xff0c;直到所有元素都按照升序排列。 2. 快速排序&#xff1a;快速排序是一种高效的排序算法&#xff0c;它的基本思想是选取…

内网端口转发与代理

思路&#xff1a;渗透的前提是双方能够建立通信。目前无法和win7建立通信&#xff0c;但是拿到了windows2003的权限&#xff0c;所以可以在Windows2003主机上面建立节点&#xff0c;作为跳板机去访问到内网。 目前状态&#xff1a;控制win2003&#xff08;IP&#xff1a;192.1…

基于JSP的人才公寓管理系统

目录 背景 技术简介 系统简介 界面预览 背景 随着互联网的广泛推广和应用&#xff0c;人才公寓管理系统在网络技术的推动下迅速进步。该系统的设计初衷是满足住户的实际需求&#xff0c;通过深入了解住户的期望&#xff0c;开发出高度定制化的人才公寓管理系统。利用互联网…

如何进行Go语言的性能测试和调优?

文章目录 开篇一、性能测试1. 使用标准库中的testing包2. 使用第三方工具 二、性能调优1. 优化算法和数据结构2. 减少不必要的内存分配和垃圾回收3. 并发和并行 结尾 开篇 Go语言以其出色的性能和简洁的语法受到了广大开发者的喜爱。然而&#xff0c;在实际开发中&#xff0c;…

39.乐理基础-拍号-认识音符

拍号是一个分数的形式&#xff0c;如下图篮色的圈圈里的东西&#xff0c;但它的实际意义和分数没什么关系&#xff0c;只是外观上是一个分数的形式 单独拿出拍号&#xff0c;如下图&#xff1a; 然后接下来只要搞懂什么是 Y分音符、一拍、小节就可以了。 音符&#xff1a; 控…

Java | Leetcode Java题解之第67题二进制求和

题目&#xff1a; 题解&#xff1a; class Solution {public String addBinary(String a, String b) {StringBuffer ans new StringBuffer();int n Math.max(a.length(), b.length()), carry 0;for (int i 0; i < n; i) {carry i < a.length() ? (a.charAt(a.leng…
最新文章