QML Shape实现任意圆角Rectangle矩形

前言

QML中有时候需要实现一些特殊定制化页面，比如不同的圆角矩形，如果直接用Rectangle控件定义radius圆角属性，会将四个角统一设置成一样的圆角，但是如果仅仅只想实现两个圆角效果，另外两个直角，或者圆角的弧度不同，这时候就不能直接用现有的Rectangle去做了，有两种方法，一种是直接用Canvas进行绘制，一种是通过Shape组件来实现。
两种方法均可，区别是前者稍微复杂一点，代码量会多一些，后者相对简单点，而且便于封装，多处使用。

本文主要使用Shape来封装一个任意圆角的矩形，方便满足不同需求实现。

先看效果：

其中第一张是带边框效果，其他几个的圆角大小也是不同的。

正文

话不多说，为了方便在不同的地方使用，直接封装成自定义控件，提供相应的属性便于设置。

上代码：

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Shapes 1.13Shape {id: shapeproperty var cornersRadiusproperty color colorproperty color borderColor:"transparent"property int borderWidth: 1layer.enabled: truelayer.samples: 4layer.smooth: trueShapePath {startX: 0startY: cornersRadius[0]fillColor: colorstrokeColor: borderColorstrokeWidth: borderWidthPathQuad { x: cornersRadius[0]; y: 0; controlX: 0; controlY: 0 }PathLine { x: shape.width - cornersRadius[1]; y: 0 }PathQuad { x: shape.width; y: cornersRadius[1]; controlX: shape.width; controlY: 0 }PathLine { x: shape.width; y: shape.height - cornersRadius[2] }PathQuad { x: shape.width - cornersRadius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }PathLine { x: cornersRadius[3]; y: shape.height }PathQuad { x: 0; y: shape.height - cornersRadius[3]; controlX: 0; controlY: shape.height }PathLine { x: 0; y: cornersRadius[0] }}
}

test代码

import QtQuick 2.13
import QtQuick.Window 2.13Window {width: 740height: 480visible: truetitle: qsTr("Curved Rectangle Demo")Row{spacing: 20anchors.centerIn: parentCurvedRectangle{width: 160height: 160color: "cyan"cornersRadius: [20,0,20,0]borderWidth:1borderColor:"grey"}CurvedRectangle{width: 160height: 160color: "green"cornersRadius: [30,50,40,0]}CurvedRectangle{width: 160height: 160color: "blue"cornersRadius: [30,0,0,30]}CurvedRectangle{width: 160height: 160color: "red"cornersRadius: [0,20,20,0]}}
}

直接通过cornersRadius属性，指定四个角的圆角大小。若要使用边框，可以设置borderColor和borderWidth, 不设置就默认没有边框。

代码不复杂，不做过多解释，仅此分享。

Enjoy~

QML Shape实现任意圆角Rectangle矩形相关推荐

java判断线与矩形相交_判断任意多边形与矩形的相交(线段与矩形相交或线段与线段相交)...
任意多边形与矩形的相交,其实就是判断多条线段是否与这个矩形相交,再简单点就是判断线段是否与矩形的每一条边相交了.那现在,我们先来看看判断一条线段与矩形的其中一条线段的相交的情况(上方水平线): (图形 ...
Qt项目中，绘制只有两个圆角的矩形及QPainterPath类的应用
总第39篇本文主要梳理总结了在Qt项目开发过程中,某些特殊场合绘制只有两个圆角矩形的方法,并在此基础上详细介绍了类QPainterPath的用法. 1.两个圆角矩形的绘制方法在Qt项目中,绘制只有 ...
矩形换位算法C语言实现,关于C#：任意大小的矩形矩阵的运行时有效换位
我迫切需要时间来优化大量的C代码以提高速度,我正在寻找一种算法-最好是C"代码段"-可以转换任意大小的矩形源矩阵u[r](行数,c列数)放入目标矩阵v▼显示[d](s = c行数, ...
Android 中shape的使用(圆角矩形)
一.在res/drawable文件夹下创建一个xml文件: <?xml version="1.0" encoding="utf-8"?> <! ...
Android 中shape的使用(圆角矩形)
一.在res/drawable文件夹下创建一个名为gradient_box的xml文件: 1 <?xml version="1.0" encoding="utf-8 ...
java创建Shape类，求子类circle，圆形rectangle矩形，rhombus菱形的周长和面积
测试类:主要实现创建新对象,并初始化,然后输出结果. package lesson2; public class Demo1 { public static void main(String[] ar ...
Android shape的使用(圆角矩形)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
Android Shape属性corners 圆角效果，边框效果...
1,Corners [1]Corners标签是用来字义圆角的,其中radius与其它四个并不能共同使用. [2]android:radius:定义四个角的的圆角半径. [3]其它四个是逐个字义每个角的 ...
matlab 圆角,rectangle函数MATLAB matlab中rectangle画圆角矩形
MATLAB如何画长方形,怎么用rectangle函数 rectangle函数用于绘制矩形图形.例如>>rectangle('Position',[0 0 2 4],'Curvature' ...

QML Shape实现任意圆角Rectangle矩形

前言

正文

QML Shape实现任意圆角Rectangle矩形相关推荐

最新文章

热门文章