自动优化网站建设咨询,网站建设企业网的项目描述,绍兴网站建设冯炳良,重庆建设工程信息网官网安全监督信息网简单的转换#xff08;Simple Transformations#xff09; 转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移#xff0c;旋转#xff0c;缩放。下面我们将讲解这些简单的操作和一些更高级的用法。 我们先从一个简单的转换开始。用下面的场景作为我们学习的开始…
简单的转换Simple Transformations 转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移旋转缩放。下面我们将讲解这些简单的操作和一些更高级的用法。 我们先从一个简单的转换开始。用下面的场景作为我们学习的开始。
简单的位移是通过改变x,y坐标来完成的。旋转是改变rotation旋转属性来完成的这个值使用角度作为单位0~360。缩放是通过改变scale比例的属性来完成的小于1意味着缩小大于1意味着放大。旋转与缩放不会改变对象的几何形状对象的x,y坐标与width/height宽/高也类似。只有绘制指令是被转换的对象。
在我们展示例子之前我想要介绍一些东西ClickableImage元素ClickableImage elementClickableImage仅仅是一个包含鼠标区域的图像元素。我们遵循一个简单的原则三次使用相同的代码描述一个用户界面最好可以抽象为一个组件。
// ClickableImage.qml// Simple image which can be clickedimport QtQuick 2.0Image {id: rootsignal clickedMouseArea {anchors.fill: parentonClicked: root.clicked()}
}我们使用我们可点击图片元素来显示了三个火箭。当点击时每个火箭执行一种简单的转换。点击背景将会重置场景。
// transformation.qmlimport QtQuick 2.0Item {// set width based on given backgroundwidth: bg.widthheight: bg.heightImage { // nice background imageid: bgsource: assets/background.png}MouseArea {id: backgroundClicker// needs to be before the images as order matters// otherwise this mousearea would be before the other elements// and consume the mouse eventsanchors.fill: parentonClicked: {// reset our little scenerocket1.x 20rocket2.rotation 0rocket3.rotation 0rocket3.scale 1.0}}ClickableImage {id: rocket1x: 20; y: 100source: assets/rocket.pngonClicked: {// increase the x-position on clickx 5}}ClickableImage {id: rocket2x: 140; y: 100source: assets/rocket.pngsmooth: true // need antialisingonClicked: {// increase the rotation on clickrotation 5}}ClickableImage {id: rocket3x: 240; y: 100source: assets/rocket.pngsmooth: true // need antialisingonClicked: {// several transformationsrotation 5scale - 0.05}}
}火箭1在每次点击后X轴坐标增加5像素火箭2每次点击后会旋转。火箭3每次点击后会缩小。对于缩放和旋转操作我们都设置了smooth:true来增加反锯齿由于性能的原因通常是被关闭的与剪裁属性clip类似。当你看到你的图形中出现锯齿时你可能就需要打开平滑smooth。
注意
为了获得更好的显示效果当缩放图片时推荐使用已缩放的图片来替代过量的放大可能会导致图片模糊不清。当你在缩放图片时你最好考虑使用smooth:true来提高图片显示质量。
使用MouseArea来覆盖整个背景点击背景可以初始化火箭的值。
注意
在代码中先出现的元素有更低的堆叠顺序叫做z顺序值z-order如果你点击火箭1足够多次你会看见火箭1移动到了火箭2下面。z轴顺序也可以使用元素对象的z-property来控制。
由于火箭2后出现在代码中火箭2将会放在火箭1上面。这同样适用于MouseArea鼠标区域一个后出现在代码中的鼠标区域将会与之前的鼠标区域重叠后出现的鼠标区域才能捕捉到鼠标事件。
请记住文档中元素的顺序很重要。
