designer实现圆角 qt_QML 实现圆角平行四边形

前几天想用QML做一个圆角平行四边形,刚开始用Rectangle,给了一个旋转角度,发现跟想像的不一样,然后就这么放着了。今天来了灵感,想起了切变矩阵,一试感觉还不错。

ca7d35ccc3db15a9710b467c9d156f11.png

实现代码

c089c0ea1fb0fd6eab9eb8547c7e7262.png

测试代码

2f522e6ef0d590766012d5347e6cc358.png

头条必乱的文本代码

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: "垂直方向"

}

}

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页