import QtQuick 2.6
import QtGraphicalEffects 1.0

/*
 * 作者: yubo
 * 功能: 文字光晕特效
 * 描述: 定制Text光晕样式公共控件，档位切换特效
 * 日期: 2019-03-13
 */

Row {
    property var gearArray: [ "P", "R", "N", "D" ]
    spacing: 20

    Repeater {
        model: 4
        Item {
            width: gear.width
            height: gear.height
            opacity: Car.gear === index ? 1 : 0.4
            scale: Car.gear === index ? 1.2 : 1
            transformOrigin: Item.Bottom

            Text {
                id: gear
                transform: Scale { origin.x: gear.width / 2; origin.y: gear.height; xScale: 1.23; yScale: 0.9 }
                text: gearArray[index]
                color: "#ffffff"
                font.pixelSize: 30
                font.italic: true
                font.family: UiController.font["SourceHanSansCN-Medium"]
                layer.enabled: Car.gear === index
                layer.effect: Glow {
                    color: "#06c9d5"
                    radius: 8     // 平滑系数
                    samples: 1 + radius * 2
                    spread: 0.3   // 光圈边框宽度
                }
            }

            Behavior on scale { NumberAnimation { duration: 200 } }
            Behavior on opacity { NumberAnimation { duration: 200 } }
        }
    }
}