example/example_en_US.ts

@@ -70,17 +70,17 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="53"/>
+        <location filename="qml/window/CrashWindow.qml" line="50"/>
         <source>We apologize for the inconvenience caused by an unexpected error</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="65"/>
+        <location filename="qml/window/CrashWindow.qml" line="62"/>
         <source>Report Logs</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="75"/>
+        <location filename="qml/window/CrashWindow.qml" line="72"/>
         <source>Restart Program</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2737,60 +2737,49 @@ Some contents...</source>
     <name>T_Tour</name>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
-        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Upload File</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
-        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Put your files here.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
-        <location filename="qml/page/T_Tour.qml" line="24"/>
+        <location filename="qml/page/T_Tour.qml" line="52"/>
-        <location filename="qml/page/T_Tour.qml" line="74"/>
+        <location filename="qml/page/T_Tour.qml" line="54"/>
-        <location filename="qml/page/T_Tour.qml" line="76"/>
         <source>Save</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
-        <location filename="qml/page/T_Tour.qml" line="24"/>
         <source>Save your changes.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
-        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Other Actions</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
-        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Click to see other actions.</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="46"/>
+        <location filename="qml/page/T_Tour.qml" line="31"/>
         <source>Begin Tour</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="52"/>
+        <location filename="qml/page/T_Tour.qml" line="45"/>
-        <source>Begin Tour with custom indicator</source>
+        <location filename="qml/page/T_Tour.qml" line="47"/>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <location filename="qml/page/T_Tour.qml" line="67"/>
-        <location filename="qml/page/T_Tour.qml" line="69"/>
         <source>Upload</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="83"/>
+        <location filename="qml/page/T_Tour.qml" line="61"/>
         <source>More</source>
         <translation type="unfinished"></translation>
     </message>

example/example_zh_CN.ts

@@ -70,17 +70,17 @@
         <translation type="unfinished">友情提示</translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="53"/>
+        <location filename="qml/window/CrashWindow.qml" line="50"/>
         <source>We apologize for the inconvenience caused by an unexpected error</source>
         <translation type="unfinished">对于意外错误给您带来的不便，我们深表歉意</translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="65"/>
+        <location filename="qml/window/CrashWindow.qml" line="62"/>
         <source>Report Logs</source>
         <translation type="unfinished">上报日志</translation>
     </message>
     <message>
-        <location filename="qml/window/CrashWindow.qml" line="75"/>
+        <location filename="qml/window/CrashWindow.qml" line="72"/>
         <source>Restart Program</source>
         <translation type="unfinished">重启程序</translation>
     </message>
@@ -552,7 +552,7 @@
     <message>
         <location filename="qml/global/ItemsOriginal.qml" line="448"/>
         <source>Tour</source>
-        <translation type="unfinished">漫游式引导</translation>
+        <translation type="unfinished">游览</translation>
     </message>
     <message>
         <location filename="qml/global/ItemsOriginal.qml" line="454"/>
@@ -2938,67 +2938,56 @@ Some contents...</source>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
-        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Upload File</source>
         <translation type="unfinished">上传文件</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="15"/>
-        <location filename="qml/page/T_Tour.qml" line="23"/>
         <source>Put your files here.</source>
         <translation type="unfinished">把你的文件放在这里</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
-        <location filename="qml/page/T_Tour.qml" line="24"/>
+        <location filename="qml/page/T_Tour.qml" line="52"/>
-        <location filename="qml/page/T_Tour.qml" line="74"/>
+        <location filename="qml/page/T_Tour.qml" line="54"/>
-        <location filename="qml/page/T_Tour.qml" line="76"/>
         <source>Save</source>
         <translation type="unfinished">保存</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="16"/>
-        <location filename="qml/page/T_Tour.qml" line="24"/>
         <source>Save your changes.</source>
         <translation type="unfinished">保存更改</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
-        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Other Actions</source>
         <translation type="unfinished">其他操作</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="17"/>
-        <location filename="qml/page/T_Tour.qml" line="25"/>
         <source>Click to see other actions.</source>
         <translation type="unfinished">点击查看其他操作</translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="46"/>
+        <location filename="qml/page/T_Tour.qml" line="31"/>
         <source>Begin Tour</source>
-        <translation type="unfinished">开始导览</translation>
+        <translation type="unfinished">开始游览</translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="52"/>
+        <location filename="qml/page/T_Tour.qml" line="45"/>
-        <source>Begin Tour with custom indicator</source>
+        <location filename="qml/page/T_Tour.qml" line="47"/>
-        <translation type="unfinished">以自定义指示器开始导览</translation>
-    </message>
-    <message>
-        <location filename="qml/page/T_Tour.qml" line="67"/>
-        <location filename="qml/page/T_Tour.qml" line="69"/>
         <source>Upload</source>
         <translation type="unfinished">上传</translation>
     </message>
     <message>
-        <location filename="qml/page/T_Tour.qml" line="83"/>
+        <location filename="qml/page/T_Tour.qml" line="61"/>
         <source>More</source>
         <translation type="unfinished">更多</translation>
     </message>
     <message>
         <location filename="qml/page/T_Tour.qml" line="10"/>
         <source>Tour</source>
-        <translation type="unfinished">漫游式引导</translation>
+        <translation type="unfinished">游览</translation>
     </message>
 </context>
 <context>

example/qml/page/T_Rectangle.qml

@@ -11,11 +11,17 @@ FluScrollablePage{
 
     FluFrame{
         Layout.fillWidth: true
+        Layout.preferredHeight: 80
         padding: 10
 
-        Flow{
+        Column{
-            width: parent.width
             spacing: 15
+            anchors{
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
+            RowLayout{
+                Layout.topMargin: 20
                 FluRectangle{
                     width: 50
                     height: 50
@@ -68,14 +74,6 @@ FluScrollablePage{
                     borderWidth: 2
                     borderColor: "#3f72af"
                 }
-            FluRectangle{
-                width: 50
-                height: 50
-                color:"#dbe2ef"
-                borderWidth: 2
-                borderColor: "#3f72af"
-                borderStyle: Qt.DashLine
-                dashPattern: [4,2]
             }
         }
     }
@@ -86,8 +84,6 @@ FluScrollablePage{
     radius: [25,25,25,25]
     borderWidth: 2
     borderColor: "#000000"
-    borderStyle: Qt.DashLine
-    dashPattern: [4,2]
     width: 50
     height: 50
 }'

example/qml/page/T_Tour.qml

@@ -17,44 +17,22 @@ FluScrollablePage{
             {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
         ]
     }
-    FluTour{
-        id:tour_custom_indicator
-        steps:[
-            {title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
-            {title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
-            {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
-        ]
-        indicator: Component{
-            FluText {
-                text: "%1 / %2".arg(current + 1).arg(total)
-            }
-        }
-    }
 
     FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 130
         padding: 10
 
-        Row{
+        FluFilledButton{
             anchors{
                 top: parent.top
                 topMargin: 14
             }
-            spacing: 20
-            FluFilledButton{
             text: qsTr("Begin Tour")
             onClicked: {
                 tour.open()
             }
         }
-            FluFilledButton{
-                text: qsTr("Begin Tour with custom indicator")
-                onClicked: {
-                    tour_custom_indicator.open()
-                }
-            }
-        }
 
         Row{
             spacing: 20

example/qml/window/CrashWindow.qml

@@ -19,9 +19,6 @@ FluWindow {
     Component.onCompleted: {
         window.stayTop = true
     }
-    Component.onDestruction: {
-        FluRouter.exit()
-    }
 
     onInitArgument:
         (argument)=>{

src/FluRectangle.cpp

@@ -6,14 +6,10 @@ FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) {
     radius({0, 0, 0, 0});
     borderWidth(0);
     borderColor(Qt::black);
-    borderStyle(Qt::SolidLine);
-    dashPattern({});
     connect(this, &FluRectangle::colorChanged, this, [=] { update(); });
     connect(this, &FluRectangle::radiusChanged, this, [=] { update(); });
     connect(this, &FluRectangle::borderWidthChanged, this, [=] { update(); });
     connect(this, &FluRectangle::borderColorChanged, this, [=] { update(); });
-    connect(this, &FluRectangle::borderStyleChanged, this, [=] { update(); });
-    connect(this, &FluRectangle::dashPatternChanged, this, [=] { update(); });
 }
 
 bool FluRectangle::borderValid() const {
@@ -25,8 +21,8 @@ void FluRectangle::paint(QPainter *painter) {
     painter->setRenderHint(QPainter::Antialiasing);
 
     QRectF rect = boundingRect();
-    bool drawBorder = borderValid();
+    bool valid = borderValid();
-    if (drawBorder) {
+    if (valid) {
         // 绘制边框时画笔的宽度从路径向两侧扩充
         // 因此实际绘制的矩形应向内侧收缩边框宽度的一半，避免边框裁剪导致不完整
         qreal halfBorderWidth = _borderWidth / 2.0;
@@ -58,12 +54,8 @@ void FluRectangle::paint(QPainter *painter) {
     painter->fillPath(path, _color);
 
     // 绘制边框
-    if (drawBorder) {
+    if (valid) {
-        QPen pen(_borderColor, _borderWidth, _borderStyle);
+        painter->strokePath(path, QPen(_borderColor, _borderWidth));
-        if (_borderStyle == Qt::DashLine || _borderStyle == Qt::CustomDashLine) {
-            pen.setDashPattern(_dashPattern);
-        }
-        painter->strokePath(path, pen);
     }
 
     painter->restore();

src/FluRectangle.h

@@ -14,8 +14,6 @@ class FluRectangle : public QQuickPaintedItem {
     Q_PROPERTY_AUTO(QList<int>, radius)
     Q_PROPERTY_AUTO(qreal, borderWidth)
     Q_PROPERTY_AUTO(QColor, borderColor)
-    Q_PROPERTY_AUTO(Qt::PenStyle, borderStyle)
-    Q_PROPERTY_AUTO(QVector<qreal>, dashPattern)
     QML_NAMED_ELEMENT(FluRectangle)
 public:
     explicit FluRectangle(QQuickItem *parent = nullptr);

src/Qt5/imports/FluentUI/Controls/FluTour.qml

@@ -7,10 +7,8 @@ import FluentUI 1.0
 Popup{
     property var steps : []
     property int targetMargins: 5
-    property int targetRadius: 2
     property Component nextButton: com_next_button
     property Component prevButton: com_prev_button
-    property Component indicator: com_indicator
     property int index : 0
     property string finishText: qsTr("Finish")
     property string nextText: qsTr("Next")
@@ -24,12 +22,12 @@ Popup{
     contentItem: Item{}
     onVisibleChanged: {
         if(visible){
-            d.animationEnabled = false
             control.index = 0
-            d.updatePos()
-            d.animationEnabled = true
         }
     }
+    onIndexChanged: {
+        canvas.requestPaint()
+    }
     Component{
         id: com_next_button
         FluFilledButton{
@@ -52,32 +50,10 @@ Popup{
             }
         }
     }
-    Component{
-        id: com_indicator
-        Row{
-            spacing: 10
-            Repeater{
-                model: total
-                delegate: Rectangle{
-                    width: 8
-                    height: 8
-                    radius: 4
-                    scale: current === index ? 1.2 : 1
-                    color:{
-                        if(current === index){
-                            return FluTheme.primaryColor
-                        }
-                        return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-                    }
-                }
-            }
-        }
-    }
     Item{
         id:d
         property var window: Window.window
         property point pos: Qt.point(0,0)
-        property bool animationEnabled: true
         property var step: steps[index]
         property var target: {
             if(steps[index]){
@@ -97,22 +73,15 @@ Popup{
             }
             return control.width
         }
-        function updatePos(){
-            if(d.target && d.window){
-                d.pos = d.target.mapToGlobal(0,0)
-                d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
-            }
-        }
-        onTargetChanged: {
-            updatePos()
-        }
     }
     Connections{
         target: d.window
         function onWidthChanged(){
+            canvas.requestPaint()
             timer_delay.restart()
         }
         function onHeightChanged(){
+            canvas.requestPaint()
             timer_delay.restart()
         }
     }
@@ -120,128 +89,39 @@ Popup{
         id: timer_delay
         interval: 200
         onTriggered: {
-            d.updatePos()
+            canvas.requestPaint()
         }
     }
-    Item{
+    Canvas{
-        id: targetRect
+        id: canvas
-        x: d.pos.x - control.targetMargins
-        y: d.pos.y - control.targetMargins
-        width: d.target ? d.target.width + control.targetMargins * 2 : 0
-        height: d.target ? d.target.height + control.targetMargins * 2 : 0
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on width {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on height {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-    }
-    Shape {
         anchors.fill: parent
-        layer.enabled: true
+        onPaint: {
-        layer.samples: 4
+            d.pos = d.target.mapToGlobal(0,0)
-        layer.smooth: true
+            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
-        ShapePath {
+            var ctx = canvas.getContext("2d")
-            fillColor: "#88000000"
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
-            strokeWidth: 0
+            ctx.save()
-            strokeColor: "transparent"
+            ctx.fillStyle = "#88000000"
-
+            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
-            // draw background
+            ctx.globalCompositeOperation = 'destination-out'
-            PathMove {
+            ctx.fillStyle = 'black'
-                x: 0
+            var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
-                y: 0
+            drawRoundedRect(rect,2,ctx)
-            }
+            ctx.restore()
-            PathLine {
-                x: control.width
-                y: 0
-            }
-            PathLine {
-                x: control.width
-                y: control.height
-            }
-            PathLine {
-                x: 0
-                y: control.height
-            }
-            PathLine {
-                x: 0
-                y: 0
-            }
-
-            // draw highlight
-            PathMove {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y
-            }
-            PathLine {
-                x: targetRect.x + targetRect.width - control.targetRadius
-                y: targetRect.y
-            }
-            PathArc {
-                x: targetRect.x + targetRect.width
-                y: targetRect.y + control.targetRadius
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x + targetRect.width
-                y: targetRect.y + targetRect.height - control.targetRadius
-            }
-            PathArc {
-                x: targetRect.x + targetRect.width - control.targetRadius
-                y: targetRect.y + targetRect.height
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y + targetRect.height
-            }
-            PathArc {
-                x: targetRect.x
-                y: targetRect.y + targetRect.height - control.targetRadius
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x
-                y: targetRect.y + control.targetRadius
-            }
-            PathArc {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
         }
+        function drawRoundedRect(rect, r, ctx) {
+            ctx.beginPath();
+            ctx.moveTo(rect.x + r, rect.y);
+            ctx.lineTo(rect.x + rect.width - r, rect.y);
+            ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+            ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+            ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+            ctx.lineTo(rect.x + r, rect.y + rect.height);
+            ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+            ctx.lineTo(rect.x, rect.y + r);
+            ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+            ctx.closePath();
+            ctx.fill()
         }
     }
     FluFrame{
@@ -271,18 +151,6 @@ Popup{
             return 0
         }
         border.width: 0
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
         FluShadow{
             radius: 5
         }
@@ -325,21 +193,10 @@ Popup{
                 leftMargin: 15
             }
         }
-        FluLoader{
-            readonly property int total: steps.length
-            readonly property int current: control.index
-            sourceComponent: control.indicator
-            anchors{
-                bottom: parent.bottom
-                left: parent.left
-                bottomMargin: 15
-                leftMargin: 15
-            }
-        }
         FluLoader{
             id: loader_next
             property bool isEnd: control.index === steps.length-1
-            sourceComponent: control.nextButton
+            sourceComponent: com_next_button
             anchors{
                 top: text_desc.bottom
                 topMargin: 10
@@ -350,7 +207,7 @@ Popup{
         FluLoader{
             id: loader_prev
             visible: control.index !== 0
-            sourceComponent: control.prevButton
+            sourceComponent: com_prev_button
             anchors{
                 right: loader_next.left
                 top: loader_next.top
@@ -389,17 +246,5 @@ Popup{
             }
             return 0
         }
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
     }
 }

src/Qt5/imports/FluentUI/plugins.qmltypes

@@ -233,8 +233,6 @@ Module {
         Property { name: "radius"; type: "QList<int>" }
         Property { name: "borderWidth"; type: "double" }
         Property { name: "borderColor"; type: "QColor" }
-        Property { name: "borderStyle"; type: "Qt::PenStyle" }
-        Property { name: "dashPattern"; type: "QVector<qreal>" }
     }
     Component {
         name: "FluSheetType"
@@ -4330,10 +4328,8 @@ Module {
         defaultProperty: "contentData"
         Property { name: "steps"; type: "QVariant" }
         Property { name: "targetMargins"; type: "int" }
-        Property { name: "targetRadius"; type: "int" }
         Property { name: "nextButton"; type: "QQmlComponent"; isPointer: true }
         Property { name: "prevButton"; type: "QQmlComponent"; isPointer: true }
-        Property { name: "indicator"; type: "QQmlComponent"; isPointer: true }
         Property { name: "index"; type: "int" }
         Property { name: "finishText"; type: "string" }
         Property { name: "nextText"; type: "string" }

src/Qt6/imports/FluentUI/Controls/FluTour.qml

@@ -7,10 +7,8 @@ import FluentUI
 Popup{
     property var steps : []
     property int targetMargins: 5
-    property int targetRadius: 2
     property Component nextButton: com_next_button
     property Component prevButton: com_prev_button
-    property Component indicator: com_indicator
     property int index : 0
     property string finishText: qsTr("Finish")
     property string nextText: qsTr("Next")
@@ -24,12 +22,12 @@ Popup{
     contentItem: Item{}
     onVisibleChanged: {
         if(visible){
-            d.animationEnabled = false
             control.index = 0
-            d.updatePos()
-            d.animationEnabled = true
         }
     }
+    onIndexChanged: {
+        canvas.requestPaint()
+    }
     Component{
         id: com_next_button
         FluFilledButton{
@@ -52,32 +50,10 @@ Popup{
             }
         }
     }
-    Component{
-        id: com_indicator
-        Row{
-            spacing: 10
-            Repeater{
-                model: total
-                delegate: Rectangle{
-                    width: 8
-                    height: 8
-                    radius: 4
-                    scale: current === index ? 1.2 : 1
-                    color:{
-                        if(current === index){
-                            return FluTheme.primaryColor
-                        }
-                        return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-                    }
-                }
-            }
-        }
-    }
     Item{
         id:d
         property var window: Window.window
         property point pos: Qt.point(0,0)
-        property bool animationEnabled: true
         property var step: steps[index]
         property var target: {
             if(steps[index]){
@@ -97,22 +73,15 @@ Popup{
             }
             return control.width
         }
-        function updatePos(){
-            if(d.target && d.window){
-                d.pos = d.target.mapToGlobal(0,0)
-                d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
-            }
-        }
-        onTargetChanged: {
-            updatePos()
-        }
     }
     Connections{
         target: d.window
         function onWidthChanged(){
+            canvas.requestPaint()
             timer_delay.restart()
         }
         function onHeightChanged(){
+            canvas.requestPaint()
             timer_delay.restart()
         }
     }
@@ -120,128 +89,39 @@ Popup{
         id: timer_delay
         interval: 200
         onTriggered: {
-            d.updatePos()
+            canvas.requestPaint()
         }
     }
-    Item{
+    Canvas{
-        id: targetRect
+        id: canvas
-        x: d.pos.x - control.targetMargins
-        y: d.pos.y - control.targetMargins
-        width: d.target ? d.target.width + control.targetMargins * 2 : 0
-        height: d.target ? d.target.height + control.targetMargins * 2 : 0
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on width {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on height {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-    }
-    Shape {
         anchors.fill: parent
-        layer.enabled: true
+        onPaint: {
-        layer.samples: 4
+            d.pos = d.target.mapToGlobal(0,0)
-        layer.smooth: true
+            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
-        ShapePath {
+            var ctx = canvas.getContext("2d")
-            fillColor: "#88000000"
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
-            strokeWidth: 0
+            ctx.save()
-            strokeColor: "transparent"
+            ctx.fillStyle = "#88000000"
-
+            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
-            // draw background
+            ctx.globalCompositeOperation = 'destination-out'
-            PathMove {
+            ctx.fillStyle = 'black'
-                x: 0
+            var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
-                y: 0
+            drawRoundedRect(rect,2,ctx)
-            }
+            ctx.restore()
-            PathLine {
-                x: control.width
-                y: 0
-            }
-            PathLine {
-                x: control.width
-                y: control.height
-            }
-            PathLine {
-                x: 0
-                y: control.height
-            }
-            PathLine {
-                x: 0
-                y: 0
-            }
-
-            // draw highlight
-            PathMove {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y
-            }
-            PathLine {
-                x: targetRect.x + targetRect.width - control.targetRadius
-                y: targetRect.y
-            }
-            PathArc {
-                x: targetRect.x + targetRect.width
-                y: targetRect.y + control.targetRadius
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x + targetRect.width
-                y: targetRect.y + targetRect.height - control.targetRadius
-            }
-            PathArc {
-                x: targetRect.x + targetRect.width - control.targetRadius
-                y: targetRect.y + targetRect.height
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y + targetRect.height
-            }
-            PathArc {
-                x: targetRect.x
-                y: targetRect.y + targetRect.height - control.targetRadius
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
-            }
-
-            PathLine {
-                x: targetRect.x
-                y: targetRect.y + control.targetRadius
-            }
-            PathArc {
-                x: targetRect.x + control.targetRadius
-                y: targetRect.y
-                radiusX: control.targetRadius
-                radiusY: control.targetRadius
-                useLargeArc: false
-                direction: PathArc.Clockwise
         }
+        function drawRoundedRect(rect, r, ctx) {
+            ctx.beginPath();
+            ctx.moveTo(rect.x + r, rect.y);
+            ctx.lineTo(rect.x + rect.width - r, rect.y);
+            ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+            ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+            ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+            ctx.lineTo(rect.x + r, rect.y + rect.height);
+            ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+            ctx.lineTo(rect.x, rect.y + r);
+            ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+            ctx.closePath();
+            ctx.fill()
         }
     }
     FluFrame{
@@ -271,18 +151,6 @@ Popup{
             return 0
         }
         border.width: 0
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
         FluShadow{
             radius: 5
         }
@@ -325,21 +193,10 @@ Popup{
                 leftMargin: 15
             }
         }
-        FluLoader{
-            readonly property int total: steps.length
-            readonly property int current: control.index
-            sourceComponent: control.indicator
-            anchors{
-                bottom: parent.bottom
-                left: parent.left
-                bottomMargin: 15
-                leftMargin: 15
-            }
-        }
         FluLoader{
             id: loader_next
             property bool isEnd: control.index === steps.length-1
-            sourceComponent: control.nextButton
+            sourceComponent: com_next_button
             anchors{
                 top: text_desc.bottom
                 topMargin: 10
@@ -350,7 +207,7 @@ Popup{
         FluLoader{
             id: loader_prev
             visible: control.index !== 0
-            sourceComponent: control.prevButton
+            sourceComponent: com_prev_button
             anchors{
                 right: loader_next.left
                 top: loader_next.top
@@ -389,17 +246,5 @@ Popup{
             }
             return 0
         }
-        Behavior on x {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
-        Behavior on y {
-            enabled: d.animationEnabled && FluTheme.animationEnabled
-            NumberAnimation {
-                duration: 167
-            }
-        }
     }
 }