在QML中鼠标单击特殊效果实现示例
2012-11-05 09:34
176 查看
还是借鉴了Qt自带的扫雷示例中的代码!(Qt中的一些代码还是有非常好的借鉴意义的,值得学习一下,推荐像我们这种初学者去学习学习!)
首先是效果显示控件:
//Explosion.qml
这段基本上就是扫雷应用程序中的照搬下来的!图片来源自己更改了相对路径。Particles声明了可以随机出现指定source的效果。
具体说,就是声明了图片(source)出现的声明周期(lifeSpan)以及不同声明周期之间的差距(lifeSpanDeviation),例如若lifeSpan为800,而lifeSpanDeviation为200,那么这些图片就会出现600至1000不等的时间。
角度angle属性的变化范围以及速度velocity属性的变化范围都依次类推。这个还可以好好再推敲一下。
上述qml的使用就是,放到某个大框(Item或Rectangle等等)里,然后通过制定出现的x和y为鼠标区域的mouse.x和mouse.y来实现在鼠标单击的时候出现类似于焰火的效果。简单的使用如下:
Explosion{
我这里是不论鼠标在哪单击都从窗体的中心位置显示这个效果。这里的15是Explosion的长度的一半,意思是让Explosion的中心与父Item的中心重合。(就是一个纠正值!)
触发可以有很多种方式,这里的触发方式如下:
Rectangle{
}
其它的代码都略去了,具体效果自己也可以多试试。
希望对你有帮助。
补充一句,这个particles出现的效果是随机的!我还曾经尝试用这个模拟过下雨,下雪效果,不错的控件!很炫。哈哈
首先是效果显示控件:
//Explosion.qml
import QtQuick 1.0
import Qt.labs.particles 1.0
Item {
property bool explode : false
Particles {
id: particles
width: 30
height: 30
lifeSpan: 800
lifeSpanDeviation: 0
source: "../Images/star.png"
count: 0
angle: 270
angleDeviation: 360
velocity: 100
velocityDeviation: 20
z: 100
}
states: State { name: "exploding"; when: explode
StateChangeScript {script: particles.burst(200); }
}
}
这段基本上就是扫雷应用程序中的照搬下来的!图片来源自己更改了相对路径。Particles声明了可以随机出现指定source的效果。
具体说,就是声明了图片(source)出现的声明周期(lifeSpan)以及不同声明周期之间的差距(lifeSpanDeviation),例如若lifeSpan为800,而lifeSpanDeviation为200,那么这些图片就会出现600至1000不等的时间。
角度angle属性的变化范围以及速度velocity属性的变化范围都依次类推。这个还可以好好再推敲一下。
上述qml的使用就是,放到某个大框(Item或Rectangle等等)里,然后通过制定出现的x和y为鼠标区域的mouse.x和mouse.y来实现在鼠标单击的时候出现类似于焰火的效果。简单的使用如下:
Explosion{
id: expl
x: parent.width / 2 - 15
y: parent.height / 2 - 15
}
我这里是不论鼠标在哪单击都从窗体的中心位置显示这个效果。这里的15是Explosion的长度的一半,意思是让Explosion的中心与父Item的中心重合。(就是一个纠正值!)
触发可以有很多种方式,这里的触发方式如下:
Rectangle{
id: content
MouseArea{
anchors.fill: parent
onClicked: {
expl.explode = true
}
onReleased: {
expl.explode = false
}
}
}
其它的代码都略去了,具体效果自己也可以多试试。
希望对你有帮助。
补充一句,这个particles出现的效果是随机的!我还曾经尝试用这个模拟过下雨,下雪效果,不错的控件!很炫。哈哈
相关文章推荐
- GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- 微信小程序实现鼠标拖动效果示例
- GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)
- jQuery实现鼠标点击处心形漂浮的炫酷效果示例
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- JS与CSS3实现图片响应鼠标移动放大效果示例
- Qt for Android QML实现缩放、拖拽、长按效果简单示例
- 原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
- jquery实现鼠标拖动图片效果示例代码