QML实现圆环颜色选择器

青旅半醒 2023-10-11 09:57 31阅读 0赞

话不多说，先上效果图：  
![在这里插入图片描述][20190922155228899.gif]  
以上demo完整项目源码路径：  
https://github.com/lesliefish/QMLInAction/tree/master/demos%26projects/Components/ColorSelector

--------------------

ColorSelector组件代码如下，有问题可以留言：

import QtQuick 2.0
    import QtQuick.Controls 2.2
    Item {
        id:baseItem
        width: 350
        height: width
        signal colorChanged(string newColor);
        property int circleWidth: 40;//圆环宽度
        property var curColor: undefined;
    
        Rectangle {
            id: control
            width: baseItem.width
            height: width
            color: "transparent"
            border.width: 1
            border.color: "black"
            anchors.margins: 10
    
            // 根据角度获取颜色值
            function getAngleColor(angle) {
                var color, d;
                if (angle < Math.PI * 2 / 5) { // angle: 0-72
                    d = 255 / (Math.PI * 2 / 5) * angle;
                    color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
                } else if (angle < Math.PI * 4 / 5) { // angle: 72-144
                    d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
                    color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
                } else if (angle < Math.PI * 6 / 5) { // angle: 144-216
                    d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
                    color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
                } else if (angle < Math.PI * 8 / 5) { // angle: 216-288
                    d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
                    color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
                } else { // angle: 288-360
                    d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
                    color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
                }
                return color;
            }
    
            // 获取旋转角度
            function getRotateAngle (mouseX, mouseY) {
                var yPosOffset = mouseY - control.width/2;    // 计算角度 : tan(x) = (y2-y1)/(x2-x1);
                var xPosOffset = mouseX - control.height/2;
                // 旋转的弧度 hudu, 角度angle
                var hudu = 0, angle = 0;
                if (xPosOffset != 0 && yPosOffset != 0) {
                    hudu = Math.atan(Math.abs(yPosOffset / xPosOffset));
                }
    
                if (xPosOffset === 0 && yPosOffset === 0) {
                    return angle;
                } else if (xPosOffset < 0 && yPosOffset < 0) {
                    angle = hudu * 180 / Math.PI;                   // 左上
                } else if (xPosOffset === 0 && yPosOffset < 0) {
                    angle = 90;                                     // 上 中间
                } else if (xPosOffset > 0 && yPosOffset < 0) {
                    angle = 180 - hudu * 180 / Math.PI;             // 右上
                } else if (xPosOffset > 0 && yPosOffset === 0) {
                    angle = 180;                                    // 上 下 中间
                } else if (xPosOffset > 0 && yPosOffset > 0) {
                    angle = 180 + hudu * 180 / Math.PI;             // 右下
                } else if (xPosOffset === 0 && yPosOffset > 0) {
                    angle = 270;                                    // 下 中间
                } else if (xPosOffset < 0 && yPosOffset > 0) {
                    angle = 360 - hudu * 180 / Math.PI;             // 左下
                }
                return angle;
            }
    
    
            // 通过鼠标所在点更新Canvas画图信息
            function updateCanvasByMousePos(x, y){
                var currentAngle = control.getRotateAngle(x, y);
                console.log(x, y, currentAngle);
                updateCanvasByAngle(currentAngle);
            }
    
    
            //通过角度更新Canvas画图信息位置
            function updateCanvasByAngle(angle){
                var newX = control.width/2 +  - Math.cos(angle*Math.PI/180) * (control.width/2-baseItem.circleWidth/2-2*control.anchors.margins);
                var newY = control.height/2 - Math.sin(angle* Math.PI/180) * (control.height/2-baseItem.circleWidth/2-2*control.anchors.margins);
    
                console.log("new : ", newX, newY,"\ncur color is :" + baseItem.curColor);
                handle.xDrawPos = newX;
                handle.yDrawPos = newY;
                handle.requestPaint();
    
                baseItem.curColor='rgb('+control.getAngleColor(((angle+180)%360)/180 * Math.PI)+')';
                baseItem.colorChanged(baseItem.curColor);//发信号
            }
    
            // 鼠标选择圆环按钮
            Canvas {
                id:handle
                width : parent.width;
                height : width
    
                property int xDrawPos: 0
                property int yDrawPos: 0
    
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.clearRect(0,0,width,height);
                    ctx.beginPath();
                    ctx.arc(xDrawPos, yDrawPos, baseItem.circleWidth/2 + 10, 0, 2 * Math.PI, false);
                    ctx.fillStyle = 'lightblue';
                    ctx.fill();
                    ctx.strokeStyle = 'transparent';
                    ctx.stroke();
                    ctx.closePath();
    
                    ctx.beginPath();
                    ctx.arc(xDrawPos, yDrawPos, baseItem.circleWidth/2 - 2, 0, 2 * Math.PI, false);
                    ctx.fillStyle = baseItem.curColor;
                    ctx.fill();
                    ctx.strokeStyle = 'transparent';
                    ctx.stroke();
                    ctx.closePath();
                }
    
                z:1000
            }
    
            // 圆环画布
            Canvas {
                id: canvas
                width: parent.width-4*control.anchors.margins;
                height: parent.height
                anchors.centerIn: parent
    
                onPaint: {
                    var ctx = getContext("2d")
                    var iSectors = 360;
                    var iSectorAngle = (360/iSectors)/180 * Math.PI; // in radians
                    ctx.translate(width/2, height/2);
                    for (var i = 0; i< iSectors; i++) {
                        var startAngle = 0;
                        var endAngle = startAngle + iSectorAngle;
                        var radius = (width/2-1);
                        var color = control.getAngleColor(iSectorAngle * i);
                        ctx.beginPath();
                        ctx.moveTo(0, 0);
                        ctx.arc(0, 0, radius, startAngle, endAngle, false);
                        ctx.closePath();
                        ctx.strokeStyle = 'rgb('+color+')';
                        ctx.stroke();
                        ctx.fillStyle = 'rgb('+color+')';
                        ctx.fill();
                        ctx.rotate(iSectorAngle);
                    }
                    ctx.restore();
    
                    ctx.save();
                    ctx.translate(0,0);
                    ctx.beginPath();
                    ctx.arc(0, 0, width/2-baseItem.circleWidth, 0, 2 * Math.PI, false);
                    ctx.fillStyle = 'white';
                    ctx.fill();
                    ctx.strokeStyle = 'transparent';
                    ctx.stroke();
                    ctx.restore();
                }
    
                MouseArea {
                    id:colorSelectorMouseArea
                    anchors.fill: parent;
                    onMouseXChanged: {
                        control.updateCanvasByMousePos(mouseX, mouseY);
                    }
                }
    
                Component.onCompleted:{
                    control.updateCanvasByAngle(0);
                }
            }
        }
    }

[20190922155228899.gif]: https://img-blog.csdnimg.cn/20190922155228899.gif