Основы работы с модулем Shapes

Модуль Shapes позволяет создавать произвольные пути, а затем обводить их контур и заполнять внутреннюю часть. Определение пути можно повторно использовать в других местах, где используются пути, например, для элемента PathView, используемого с моделями. Для рисования пути используется элемент Shape, а различные элементы пути помещаются в ShapePath.

В приведенном ниже примере создается путь, показанный на скриншоте. Вся фигура, все пять заполненных областей создаются из одного пути, который затем обводится и заполняется.

import QtQuick
import QtQuick.Shapes

Rectangle {
    id: root
    width: 600
    height: 600

    Shape {
        anchors.centerIn: parent
        
        ShapePath {
        
            strokeWidth: 3
            strokeColor: "darkGray"
            fillColor: "lightGray"

            startX: -40; startY: 200
            
            // Круг
            
            PathArc { x: 40; y: 200; radiusX: 200; radiusY: 200; useLargeArc: true }
            PathLine { x: 40; y: 120 }
            PathArc { x: -40; y: 120; radiusX: 120; radiusY: 120; useLargeArc: true; direction: PathArc.Counterclockwise }
            PathLine { x: -40; y: 200 }

            // Точки
            
            PathMove { x: -20; y: 80 }
            PathArc { x: 20; y: 80; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 80; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 130 }
            PathArc { x: 20; y: 130; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 130; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 180 }
            PathArc { x: 20; y: 180; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 180; radiusX: 20; radiusY: 20; useLargeArc: true }

            PathMove { x: -20; y: 230 }
            PathArc { x: 20; y: 230; radiusX: 20; radiusY: 20; useLargeArc: true }
            PathArc { x: -20; y: 230; radiusX: 20; radiusY: 20; useLargeArc: true } 
        }
    }
}

В приведенном выше примере путь состоит из дочерних элементов ShapePath, то есть элементов PathArc, PathLine и PathMove. Строительные блоки путей мы подробно рассмотрим в следующем разделе.

Теги