前几天想用QML做一个圆角平行四边形,刚开始用Rectangle,给了一个旋转角度,发现跟想像的不一样,然后就这么放着了。今天来了灵感,想起了切变矩阵,一试感觉还不错。
实现代码
测试代码
头条必乱的文本代码
Parallelogram.qml ============================
import QtQuick 2.12
Item {
property real xs: 0 // 水平方向切变
property real ys: 0 // 垂直方向切变
property alias radius: rect.radius // 圆角
property alias text: title.text // 文本
Rectangle {
id: rect
anchors.fill: parent
color: "lightblue"
// 切变矩阵
transform: Matrix4x4 {
matrix: Qt.matrix4x4(1, xs, 0, 0,
ys, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1)
}
Text {
id: title
anchors.centerIn: rect
text: "0"
}
}
}
test.qml ============================
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("glimix.com qml 101 - #106")
color: "#404040"
Column {
anchors.centerIn: parent
spacing: 3
Repeater {
id: rep
model: 9
Parallelogram {
xs: -0.05
ys: -0.05
radius: 4
width: 90
height: 30
text: index + 1
}
}
}
Parallelogram {
x: 70; y: 40; width: 180; height: 90
xs: -0.4
text: "水平方向"
}
Parallelogram {
x: 420; y: 40; width: 180; height: 90
ys: 0.4
text: "垂直方向"
}
}