牡丹江做网站建设北京网站优化专家

最近在做项目的时候想这实现一个能够根据相对位置动态改变大小的进度条提示框，偶尔发现了一个很有用的组件Shape这个控件里面可以画各种线条,实线虚线矩形三角形圆角的三角形或者各种自定义形状。下面提供一个2条虚线加上一个矩形的小栗子。更多的自定义形状还是请自行钻研。

Shape {
                    ShapePath {
                        strokeStyle: ShapePath.DashLine
                        strokeWidth: 2
                        strokeColor: "#23D255"
                        dashPattern: [1, 3] // 设置虚线的样式
                        startX:gwpro.width
                        startY: 0
                        PathLine{
                            x:gwpro.width
                            y:gw.height*2+25
                        }
                    }
                    ShapePath {
                        strokeStyle: ShapePath.DashLine
                        strokeWidth: 2
                        strokeColor: "#23D255"
                        dashPattern: [1, 3] // 设置虚线的样式
                        startX:gtpro.width
                        startY: 0
                        PathLine{
                            x:gtpro.width
                            y: 280
                        }
                    }
                    ShapePath {
                        strokeWidth: 1
                        strokeColor: "black"
                        fillColor: "#1A28CBCE"//+"#1A"
                        startX: gwpro.width
                        startY: 0
                        PathLine { x: gwpro.width; y: 0 }
                        PathLine { x: gtpro.width; y: 0 }
                        PathLine { x: gtpro.width; y: 50 }
                        PathLine { x: gwpro.width; y: 50 }
                    }
                    Text {
                        x:gwpro.width+50
                        y:10
                        text: "46"+"mm"
                        font.family:"PingFangSC-Medium"
                        font.pixelSize: 24
                        color: "#28CBCE"
                    }
                }

上面这个例子如果用js 实现代码量不敢想象，用这个控件看起来非常简单。希望给大家一点启发