PathArc
一、描述
PathArc 提供了一种简单的方法来指定具有半径的给定位置的弧。
请注意,不能使用单个 PathArc 来指定圆。可以使用两个 PathArc 元素,每个元素指定圆的一半。
二、属性成员
1、radiusX : real
radiusY : real
圆弧所在椭圆的两个轴的半径
2、x : real
y : real
圆弧的终点(绝对位置)。
3、relativeX : real
relativeY : real
定义圆弧相对于其起点的终点。
如果为单个轴指定了相对和绝对结束位置,则将使用相对位置。
相对位置和绝对位置可以混合使用,例如设置相对 x 和绝对 y。
path: Path
{
startX:100; startY: 0 //起点
PathArc
{
y: 300
relativeX:0
radiusX: 200; radiusY: 200
}
}
path: Path
{
startX:100; startY: 0 //起点
PathArc
{
x: 100; y: 300
radiusX: 200; radiusY: 200
}
}
上面这两个设置效果是相等的,起点x=100,终点x=100,即x相对位置=0,设置x:100和设置relativeX:0效果一样。
此图画了四个圆弧,下一个圆弧的起点在上一个圆弧的终点。
4、direction : enumeration
定义圆弧的方向。从哪个方向
- PathArc.Clockwise:顺时针(默认)
- PathArc.Counterclock:逆时针
import QtQuick 2.14
import QtQuick.Window 2.2
Window
{
id:win
visible: true
width: 800
height: 600
Rectangle
{
id: window
anchors.fill: parent
Canvas
{
id: canvas
anchors.fill: parent
smooth: true
onPaint:
{
var context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "blue"
context.path = path
context.stroke()
}
}
Path
{
id:path
startX: 20; startY: 100
PathArc
{
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
}
}
}
}
startX: 20; startY: 100
PathArc
{
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Counterclockwise
}
5、useLargeArc : bool
是否使用由圆弧点定义的大圆弧。
startX: 20; startY: 100
PathArc
{
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
useLargeArc:true
}
useLargeArc:false
startX: 20; startY: 100
PathArc
{
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
useLargeArc:true
}
PathArc
{
x: 20; y: 100
radiusX: 100; radiusY: 100
direction: PathArc.Counterclockwise
useLargeArc:false
}
startX: 20; startY: 100
PathArc
{
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
useLargeArc:true
}
PathArc
{
x: 20; y: 100
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
useLargeArc:false
}
6、xAxisRotation : real
定义弧的旋转,以度为单位。默认值为 0。
圆弧是圆或椭圆的一部分。给定半径以及起点和终点,有两个椭圆连接这些点。该属性定义了这些椭圆的 X 轴的旋转。
注意:该值仅在 radiusX 和 radiusY 不同时(即弧是椭圆而不是圆的一部分时)才有用。
startX: 50; startY: 100
PathArc
{
x: 150; y: 100
radiusX: 50; radiusY: 20
xAxisRotation: 0
}
xAxisRotation: 45
xAxisRotation: 90
xAxisRotation: 135
PathAngleArc
一、描述
PathAngleArc 提供了一种指定弧的简单方法。PathArc 旨在作为较大路径的一部分(指定起点和终点)工作,而 PathAngleArc 旨在使以圆弧为主的路径更加直观。
二、属性成员
1、radiusX : real
radiusY : real
同上。
2、centerX : real
centerY : real
圆弧的中心。
3、moveToStart : bool
此元素是否应与前一个 Path 元素(或 startX/Y)断开连接。默认值是true。
如果设置为 false,则前一个元素的终点(或 startX/Y(如果 PathAngleArc 是第一个元素))将通过直线连接到圆弧的起点。
4、startAngle : real
圆弧的起始角度。起始角度按顺时针方向增加,在 3 点钟位置为零度。
5、sweepAngle : real
圆弧扫过的角度。正数是顺时针,负数是逆时针。
圆弧将从 startAngle 开始扫描的角度,值为 360 会产生一个完整的圆。
import QtQuick 2.14
import QtQuick.Window 2.2
Window
{
id:win
visible: true
width: 800
height: 600
Rectangle
{
id: window
anchors.fill: parent
Canvas
{
id: canvas
anchors.fill: parent
smooth: true
onPaint:
{
var context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "blue"
context.path = path
context.stroke()
}
}
Path
{
id:path
startX: 20; startY: 100
PathAngleArc
{
radiusX: 100; radiusY: 100
startAngle:30
sweepAngle:45
}
}
}
}