【QML学习5】对元素进行旋转、缩放等操作

1. 元素透明度更改opacity

opacity控制了元素的透明度，其取值范围是[0,1]，取0时完全透明，取1时完全不透明。
透明度的属性会传递给子元素，产生叠加效应，下面是一个案例：

Rectangle {
    width: 400; height: 400
    color: "#00a3fc"
    Rectangle {
        x: 50; y: 50; width: 200; height: 300
        color: "white"
        opacity: 0.5

        Rectangle {
            x: 100; y: 25; width: 200; height: 50
            color: "red"
            opacity: 0.5
        }
        Rectangle {
            x: 100; y: 90; width: 200; height: 50
            color: "red"
        }
    }

    Rectangle {
       x: 150; y: 210; width: 200; height: 50
       color: "red"
       opacity: 0.5
    }
    Rectangle {
       x: 150; y: 275; width: 200; height: 50
       color: "red"
    }
}

显示效果如下：

2. 更改尺度scale

scale控制了元素的透明度，，取0时尺度为0，取1时原大小，0-1。
尺度的属性会传递给子元素，产生叠加效应，下面是一个案例：

Rectangle {
    width: 400; height: 400
    color: "#00a3fc"
    Rectangle {
        x: 50; y: 50; width: 200; height: 300
        color: "white"
        opacity: 0.5
        scale: 0.5

        Rectangle {
            x: 100; y: 25; width: 200; height: 50
            color: "red"
            opacity: 0.5
            scale: 0.5
        }
        Rectangle {
            x: 100; y: 90; width: 200; height: 50
            color: "red"
        }
    }

    Rectangle {
       x: 150; y: 210; width: 200; height: 50
       color: "red"
       opacity: 0.5
       scale: 0.5
    }
    Rectangle {
       x: 150; y: 275; width: 200; height: 50
       color: "red"

    }
}

效果如下：

默认的缩放中心点是元素的几何中心，可以使用transformOrigin属性来设置旋转中心，有以下9个选项。

3. 旋转rotation

使用rotation属性来控制元素的旋转，其描述的是顺时针旋转的度数。与scale相似，具有集成性，默认的旋转中心是元素的几何中心，可以使用transformOrigin属性来设置旋转中心。

4. 自定义转换transform

transform属性可以描述自定义转换操作，具体来说这个属性可以有以下四种类型的描述方式：

• Rotation
• Scale
• Translate
• Matrix4x4

用Rotation来描述可定义的量有角度、旋转轴和旋转原点：

• angle : real

• axis

  • axis.x : real
  • axis.y : real
  • axis.z : real

• origin

  • origin.x : real
  • origin.y : real

用Scale来描述可定义的量有缩放中心和x、y方向上的缩放比例：

• origin
• origin.x : real
• origin.y : real
• xScale : real
• yScale : real

Translate可以用来描述平移，可以定义在x和y上的平移量

• x : real
• y : real

Matrix4x4是4×4的旋转矩阵。

下面是使用这些描述的案例：

Rectangle {
    width: 100; height: 100
    color: "blue"
    transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}
}
Rectangle {
    width: 100; height: 100
    color: "blue"
    transform: Scale { origin.x: 25; origin.y: 25; xScale: 3}
}
Rectangle {
   width: 100; height: 100
    color: "blue"
    transform: Translate { y: 20 }
}
Rectangle {
    width: 100
    height: 100
    color: "red"
    transform: Matrix4x4 {
        property real a: Math.PI / 4
        matrix: Qt.matrix4x4(Math.cos(a), -Math.sin(a), 0, 0,
                             Math.sin(a),  Math.cos(a), 0, 0,
                             0,           0,            1, 0,
                             0,           0,            0, 1)
    }
}