注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沙漠里de烟雨

原创分享,禁止转载

 
 
 

日志

 
 

qml下的颜色拾取器  

2017-05-11 03:28:35|  分类: QT5.x与QML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
PropertyColorSelector.qml =>
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Private 1.0

Rectangle
{
    id: root

    property int lid
    property string name
    property string value
    property var callback
    property int groupId
    property int topY

    property int hide_height:btn_height+2*top_gap;
    property int show_height:hide_height+clrSelector.selSize+sel_gap;

    y: root.topY
    width: parent.width
    height: root.hide_height

    function controlHeight()
    {
        return root.height;
    }

    signal heightChanged(var deltaHeight,var id)


    ///控件固定大小相关;
    property int x_left
    property int x_right
    property int name_width
    property int top_gap
    property int btn_height
    property double btn_ratio
    property int minWidth
    ///-

    property int sel_gap: 5
    property int subCtrl_gap : 10
    property int subCtrlMin: minWidth-x_left - x_right - name_width-2*subCtrl_gap-btn_height;

    property int subCtrl_width: getSubCtrlWidth();
    property int sprint_width: root.width-root.x_left-root.name_width-root.x_right-(subCtrl_width+btn_height+2*subCtrl_gap);

    function getSubCtrlWidth()
    {
        var subCtrl_len1 = (root.width-(x_left + x_right + name_width) - 2*subCtrl_gap-btn_height) * btn_ratio
        var subCtrl_len2 = subCtrl_len1<=subCtrlMin ? subCtrlMin : subCtrl_len1
        var sprint_width1 = root.width-x_left-name_width-x_right-(subCtrl_len2+btn_height+2*subCtrl_gap);
        return (sprint_width1<=0 ? subCtrlMin : subCtrl_len2);
    }

    NameCtrl
    {
        id: nameId
        x:0; y:0
        name:root.name
        x_left: root.x_left
        name_width: root.name_width
        top_gap : root.top_gap
        btn_height : root.btn_height
        spring_width: root.sprint_width
    }

    Row
    {
        id: clrRow

        y:top_gap
        x: nameId.x+nameId.width+subCtrl_gap
        height:btn_height
        width:subCtrl_width+btn_height+2*subCtrl_gap
        spacing: subCtrl_gap

        Rectangle
        {
            id: selectSwitch
            width: root.btn_height
            height: root.btn_height
            color: colorField.text
            border.width: 1
            border.color: "black"
            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                    content.visible = !content.visible;
                    if(content.visible)
                        root.height = show_height
                    else
                        root.height = hide_height

                    root.heightChanged(root.height-(content.visible?hide_height:show_height),root.lid);
                }
            }
        }

        Rectangle
        {
            id: clrVal
            height: root.btn_height
            width:root.subCtrl_width
            TextField
            {
                id: colorField
                anchors.fill: clrVal
                text: content.currentColor
                readOnly: true
                horizontalAlignment: Qt.AlignHCenter
                onTextChanged:
                {
                    callback(colorField.text);
                }
            }
        }

    }


    Rectangle
    {
        id: content

        visible: false

        property int currentH
        property int currentS
        property int currentL
        property int currentA
        property string currentColor : root.value

        x: 0
        y: nameId.y+nameId.height+root.sel_gap
        width: parent.width
        height: root.height - content.y;
        color: palette.window

        SystemPalette { id: palette }

        Rectangle
        {
            id: clrSelector

            property int selSize: 100
            property int sliderWdith: 10
            property int sliderGap: root.x_left

            x:0; y:0;
            height: selSize
            width: sliderGap+selSize+sliderGap+sliderWdith+sliderGap

            Rectangle
            {
                id: paletteFrame
                visible: true

                x:clrSelector.sliderGap
                y:0
                width: clrSelector.selSize
                height: clrSelector.selSize

                Image
                {
                    id: paletteMap
                    anchors.fill: parent
                    source: "pic/checkers.png"
                    fillMode: Image.Tile

                    ShaderEffect
                    {
                        id: map
                        width: 64
                        height: 64
                        opacity: spinA.value
                        scale: paletteMap.width / width;
                        layer.enabled: true
                        layer.smooth: true
                        anchors.centerIn: parent

                        property real hue: spinH.value

                        fragmentShader: (content.OpenGLInfo.profile === OpenGLInfo.CoreProfile) ? "#version 150
                        in vec2 qt_TexCoord0;
                        uniform float qt_Opacity;
                        uniform float hue;
                        out vec4 fragColor;

                        float hueToIntensity(float v1, float v2, float h) {
                            h = fract(h);
                            if (h < 1.0 / 6.0)
                                return v1 + (v2 - v1) * 6.0 * h;
                            else if (h < 1.0 / 2.0)
                                return v2;
                            else if (h < 2.0 / 3.0)
                                return v1 + (v2 - v1) * 6.0 * (2.0 / 3.0 - h);

                            return v1;
                        }

                        vec3 HSLtoRGB(vec3 color) {
                            float h = color.x;
                            float l = color.z;
                            float s = color.y;

                            if (s < 1.0 / 256.0)
                                return vec3(l, l, l);

                            float v1;
                            float v2;
                            if (l < 0.5)
                                v2 = l * (1.0 + s);
                            else
                                v2 = (l + s) - (s * l);

                            v1 = 2.0 * l - v2;

                            float d = 1.0 / 3.0;
                            float r = hueToIntensity(v1, v2, h + d);
                            float g = hueToIntensity(v1, v2, h);
                            float b = hueToIntensity(v1, v2, h - d);
                            return vec3(r, g, b);
                        }

                        void main() {
                            vec4 c = vec4(1.0);
                            c.rgb = HSLtoRGB(vec3(hue, 1.0 - qt_TexCoord0.t, qt_TexCoord0.s));
                            fragColor = c * qt_Opacity;
                        }
                        " : "
                        varying mediump vec2 qt_TexCoord0;
                        uniform highp float qt_Opacity;
                        uniform highp float hue;

                        highp float hueToIntensity(highp float v1, highp float v2, highp float h) {
                            h = fract(h);
                            if (h < 1.0 / 6.0)
                                return v1 + (v2 - v1) * 6.0 * h;
                            else if (h < 1.0 / 2.0)
                                return v2;
                            else if (h < 2.0 / 3.0)
                                return v1 + (v2 - v1) * 6.0 * (2.0 / 3.0 - h);

                            return v1;
                        }

                        highp vec3 HSLtoRGB(highp vec3 color) {
                            highp float h = color.x;
                            highp float l = color.z;
                            highp float s = color.y;

                            if (s < 1.0 / 256.0)
                                return vec3(l, l, l);

                            highp float v1;
                            highp float v2;
                            if (l < 0.5)
                                v2 = l * (1.0 + s);
                            else
                                v2 = (l + s) - (s * l);

                            v1 = 2.0 * l - v2;

                            highp float d = 1.0 / 3.0;
                            highp float r = hueToIntensity(v1, v2, h + d);
                            highp float g = hueToIntensity(v1, v2, h);
                            highp float b = hueToIntensity(v1, v2, h - d);
                            return vec3(r, g, b);
                        }

                        void main() {
                            lowp vec4 c = vec4(1.0);
                            c.rgb = HSLtoRGB(vec3(hue, 1.0 - qt_TexCoord0.t, qt_TexCoord0.s));
                            gl_FragColor = c * qt_Opacity;
                        }
                        "
                    }

                    MouseArea
                    {
                        id: mapMouseArea
                        anchors.fill: parent
                        onPositionChanged:
                        {
                            if (pressed && containsMouse)
                            {
                                var xx = Math.max(0, Math.min(mouse.x, parent.width))
                                var yy = Math.max(0, Math.min(mouse.y, parent.height))
                                spinS.value = 1.0 - yy / parent.height
                                spinL.value = xx / parent.width
                                vLine.x = mouse.x
                                hLine.y = mouse.y
                            }
                        }
                        onPressed: positionChanged(mouse)
                    }

                    Rectangle
                    {
                        id:hLine;
                        x:0
                        y:0
                        width:parent.width;
                        height:1
                        color:"white"
                    }
                    Rectangle
                    {
                        id:vLine;
                        x:0
                        y:0
                        width:1;
                        height:parent.width
                        color:"white"
                    }

                    BorderImage
                    {
                        anchors.fill: parent
                        anchors.margins: -1
                        anchors.leftMargin: -2
                        source: "pic/sunken_frame.png"
                        border.left: 8
                        border.right: 8
                        border.top: 8
                        border.bottom: 8
                    }
                }
            }

            Rectangle
            {
                id: sliderH

                property real minimum: 0.0
                property real maximum: 0.9
                property int x_gap: 5

                x:paletteFrame.x+paletteFrame.width+x_gap
                y:paletteFrame.y
                width:clrSelector.sliderGap+clrSelector.sliderWdith+clrSelector.sliderGap-2*x_gap
                height:paletteFrame.height

                function updateHandleYPos(value)
                {
                    if (sliderH.maximum > sliderH.minimum)
                    {
                        var handleYpos = mouseArea.height - ( (value-sliderH.minimum)*(mouseArea.height-handle.height)/(sliderH.maximum-sliderH.minimum));
                        return handleYpos;
                    }
                    return mouseArea.height-handle.height/2;
                }

                transformOrigin: Item.TopLeft
                gradient: Gradient
                {
                    GradientStop {position: 1.000; color: Qt.rgba(1, 0, 0, 1)}
                    GradientStop {position: 0.833; color: Qt.rgba(1, 1, 0, 1)}
                    GradientStop {position: 0.667; color: Qt.rgba(0, 1, 0, 1)}
                    GradientStop {position: 0.500; color: Qt.rgba(0, 1, 1, 1)}
                    GradientStop {position: 0.333; color: Qt.rgba(0, 0, 1, 1)}
                    GradientStop {position: 0.167; color: Qt.rgba(1, 0, 1, 1)}
                    GradientStop {position: 0.000; color: Qt.rgba(1, 0, 0, 1)}
                }

                BorderImage
                {
                    source: "pic/sunken_frame.png"
                    border.left: 8
                    border.right: 8
                    border.top:8
                    border.bottom: 8
                    anchors.fill: sliderH
                    anchors.margins: -1
                    anchors.topMargin: -2
                    anchors.leftMargin: -2
                }

                Image
                {
                    id: handle
                    smooth: true
                    source: "pic/slider_handle.png"
                    height: 10 //滑块的高度;
                    width:sliderH.width+6
                    x: 2-sliderH.x_gap
                    y: mouseArea.height-handle.height;
                }

                MouseArea
                {
                    id: mouseArea
                    anchors.fill: sliderH

                    onPressed:
                    {
                        var realValue = ((sliderH.maximum - sliderH.minimum) * (mouseArea.height-mouseY) / (mouseArea.height-handle.height)) + sliderH.minimum;
                        var value = Math.min(sliderH.maximum,Math.max(0,realValue));
                        var pos = sliderH.updateHandleYPos(realValue);
                        handle.y = Math.min(Math.max(0,pos),(mouseArea.height-handle.height));
                        spinH.value = value;
                    }

                    onPositionChanged:
                    {
                        if (pressed)
                        {
                            if(mouseY>=0 && mouseY<mouseArea.height)
                            {
                                var realValue = ((sliderH.maximum - sliderH.minimum) * (mouseArea.height-mouseY) / (mouseArea.height-handle.height)) + sliderH.minimum;
                                var value = Math.min(sliderH.maximum,Math.max(0,realValue));
                                var pos = sliderH.updateHandleYPos(realValue);
                                handle.y = Math.min(Math.max(0,pos),(mouseArea.height-handle.height));
                                spinH.value = value;
                            }
                        }
                    }
                }
            }

        }

        Column
        {
            id:spinColumn

            y:0
            x:content.width-spinColumn.width-root.x_right

            property int spH: root.btn_height

            width:150
            height:paletteFrame.height
            spacing: (spinColumn.height-4*spH)/3

            Rectangle
            {
                id: colorH
                color:"transparent"
                width:spinColumn.width
                height:spinColumn.spH
                Text
                {
                    id:txtH
                    x:0
                    width:10
                    height:colorH.height
                    text:"H:"
                    verticalAlignment: Qt.AlignVCenter
                }
                SpinBox
                {
                    id:spinH
                    x:txtH.x+txtH.width
                    height:colorH.height
                    width:parent.width-spinH.x
                    value:0.0
                    minimumValue: 0.0
                    maximumValue: 0.9
                    stepSize: 0.1
                    decimals:2
                    onValueChanged:
                    {
                        content.currentColor = Qt.hsla(spinH.value, spinS.value, spinL.value, spinA.value)
                    }
                }
            }

            Rectangle
            {
                id: colorS
                color:"transparent"
                width:spinColumn.width
                height:spinColumn.spH
                Text
                {
                    id:txtS
                    x:0
                    width:10
                    height:colorS.height
                    text:"S:"
                    verticalAlignment: Qt.AlignVCenter
                }
                SpinBox
                {
                    id:spinS
                    x:txtS.x+txtS.width
                    height:colorH.height
                    width:parent.width-spinS.x
                    value:0.0
                    minimumValue: 0.0
                    maximumValue: 1.0
                    stepSize: 0.1
                    decimals:2
                    onValueChanged:
                    {
                        hLine.y = (1.0-spinS.value) * paletteMap.height
                        content.currentColor = Qt.hsla(spinH.value, spinS.value, spinL.value, spinA.value)
                    }
                }
            }

            Rectangle
            {
                id: colorL
                color:"transparent"
                width:spinColumn.width
                height:spinColumn.spH
                Text
                {
                    id:txtL
                    x:0
                    width:10
                    height:colorH.height
                    text:"L:"
                    verticalAlignment: Qt.AlignVCenter
                }
                SpinBox
                {
                    id:spinL
                    x:txtL.x+txtL.width
                    height:colorH.height
                    width:parent.width-spinL.x
                    value:0.0
                    minimumValue: 0.0
                    maximumValue: 1.0
                    stepSize: 0.1
                    decimals:2
                    onValueChanged:
                    {
                        vLine.x = spinL.value * paletteMap.width
                        content.currentColor = Qt.hsla(spinH.value, spinS.value, spinL.value, spinA.value)
                    }
                }
            }

            Rectangle
            {
                id: colorA
                color:"transparent"
                width:spinColumn.width
                height:spinColumn.spH
                Text
                {
                    id:txtA
                    x:0
                    width:10
                    height:colorA.height
                    text:"A:"
                    verticalAlignment: Qt.AlignVCenter
                }
                SpinBox
                {
                    id:spinA
                    x:txtA.x+txtA.width
                    height:colorH.height
                    width:parent.width-spinA.x
                    value:1.0
                    minimumValue: 0.0
                    maximumValue: 1.0
                    stepSize: 0.1
                    decimals:2
                    onValueChanged:
                    {
                        content.currentColor = Qt.hsla(spinH.value, spinS.value, spinL.value, spinA.value)
                    }
                }
            }

        }
    }
}
  评论这张
 
阅读(9)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017