PathLine怎么应用

本篇内容主要讲解“PathLine怎么应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“PathLine怎么应用”吧!

1. PathLine基本用途

PathLine是所有路径曲线中最简单的路径曲线，主要用于创建两点之间的路径，其中startX,startY属性决定了曲线路径的起点

2. PathLine的基本属性

PathLine的属性较为简单，只有x，y属性与relativeX和relativeY属性

• x:定义线段终点的x坐标的绝对位置(相对于坐标原点，而非起点)

• y:定义线段终点的y坐标的绝对位置(相对于坐标原点，而非起点)

• relativeX:定义终点x坐标相对于起点的距离

• relativeY:定义终点y坐标相对于起点的位置

- [注意]当PathLine中同时定义了两种坐标时，优先会使用相对位置

3. PathLine的基本用法

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 300
    flags: "FramelessWindowHint"        //去掉窗口标题栏
    PathView{
        //定义PathView的model属性，使用ListModel
        model: ListModel{
            id:list
            ListElement {
                //以下是元素的角色定义而不是属性定义
                name: "Apple"
                icon:"qrc:/images/appale.png"
                cost: 2.45
            }
            ListElement {
                name: "Orange"
                icon:"qrc:/images/banana.png"
                cost: 3.25
            }
            ListElement {
                name: "Banana"
                icon:"qrc:/images/orange.png"
                cost: 1.95
            }
            ListElement{
                name:"Peach"
                icon:"qrc:/images/peach.png"
                cost:2.3
            }
            ListElement{
                name:"Pear"
                icon:"qrc:/images/pear.png"
                cost:1.9
            }
        }
        //定义PathView的代理，从而确定Element的显示方式
        delegate: Component{
            //显示方式使用上Image下Text的方式
            Image{
                id:img
                width: 64
                height: 64
                source:icon
                scale: PathView.imgScale    //根据路径上特定点的属性，修改Image的scale属性
                opacity: PathView.imgOpacity
                Text {
                    id: txt
                    anchors.topMargin: 20
                    anchors.top:img.bottom
                    anchors.verticalCenter: verticalAlignment
                    text: name
                }
            }
        }
        //定义Path,可以理解为是多个段组成了Path，使用PathAttribute来设置各个路径点上的属性值
        path:Path {
            startX: 150; startY: 140
            PathAttribute{name:"imgOpacity";value:0.1}
            PathAttribute{name:"imgScale";value:0.5}

            PathLine { x:300; y: 140 }
            PathAttribute{name:"imgOpacity";value:1.0}
            PathAttribute{name:"imgScale";value:1.0}

            PathLine { x:450; y: 140 }
            PathAttribute{name:"imgOpacity";value:0.1}
            PathAttribute{name:"imgScale";value:0.5}
        }
    }
}

PathLine的效果预览

到此，相信大家对“PathLine怎么应用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！