QML类型：PathArc、PathAngleArc

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
            }
        }
    }
}