在很多情况，我们开发应用的时候经常会用到颜色选择器，大一的时候我做一个涂鸦软件的时候遇到的一个问题，就是如何在qt上做一个圆盘的
颜色选择器，这次做一个例子来让大家了解这种控件是怎么做的。
首先我们要理解颜色中的hsv的概念，大家可以直接百度hsn color 的颜色分布原理
首先给大家介绍hsv颜色选择器的原理：

看上图是qt文档中qcolor的帮助文档，我就是用这个类来实现颜色数据转换的，图中的点对应的是hsv中的h(Hue)的值，值范围为（0,360）整形，而且它的颜色区间对应着这个值如上图所示。很好，就这里我们能
联想到360刚好是一个颜色圆盘选择器的起点。

接下来我们要理解hsv中的s的值，如上图，我们看到不管圆盘的角度怎么样，大家发现越靠近中间颜色是不是越白？对，s的值就是这里的奥妙。s值是颜色的饱和度，它的值范围是0~255整形。通过这个我们应该大致知道颜色圆盘选择起是怎么实现了吧？

最后一步就是理解v值，v值的意思就是颜色的深度值，从上图我们就可以知道
好了基本的概念都有了，我们就可以在qt中做这个颜色圆盘选择器了！看下图效果：

对于QColor这个类就不详细介绍了，大家可以自己在帮助文档中参考参考，耐心半个小时就能活用这个类啦！
由于在使用颜色选择器的时候需要用到Hsv 转换RGB，qt友好的帮我们解决了这个麻烦的公式问题，就在qcolor中！
我们先写一个专门转换颜色格式的类：
colortransformer.h

ifndef COLORTRANSFORMER_H

define COLORTRANSFORMER_H

include "jni.h"

include

include

class ColorTransFormer: public QObject
{
Q_OBJECT
public:
ColorTransFormer();
~ColorTransFormer();

Q_INVOKABLE void set_hsv(int h,int s,int v){    mcolor.setHsv(h,s,v);}Q_INVOKABLE int get_red(){    return mcolor.red();}Q_INVOKABLE int get_blue(){    return mcolor.blue();}Q_INVOKABLE int get_green(){    return mcolor.green();}Q_INVOKABLE QColor get_rgb(){    return mcolor.toRgb();}Q_INVOKABLE int get_h(){    return mcolor.hue();}Q_INVOKABLE int get_s(){    return mcolor.saturation();}Q_INVOKABLE void set_rgb(int r,int g,int b){    mcolor.setRgb(r,g,b);}

private:
QColor mcolor;

};

endif // COLORTRANSFORMER_H

colortransformer.cpp

include "colortransformer.h"

ColorTransFormer::ColorTransFormer()
{

}

ColorTransFormer::~ColorTransFormer()
{

}
main.cpp

include

include

include

include

include

include

include

include

include

include

//qml object
//# include "wifimanager.h"

include "colortransformer.h"

//# include "mymediaplayer.h"
//# include "datasbase.h"

include "playlist.h"

include "testandroidlib.h"

//elian

include "C:\elian.h"

//debug

include

int main(int argc, char *argv[])
{
QApplication a(argc, argv);

//qmlRegisterType("WifiManager",1,0,"MWifiManager");qmlRegisterType("ColorTransFormer",1,0,"MColorTransFormer");//qmlRegisterType("MyMediaPlayer",1,0,"TomMediaPlayer");//qmlRegisterType("MDatabase",1,0,"MyDatabase");//qmlRegisterType("MusicFileScanner",1,0,"MyMusicFileScanner");//int proversion=0;

// int libversion=0;
//elianGetVersion(&proversion,&libversion);
// TestAndroidLib aa;
//for(int a=0;a
ColorPage.qml

import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
import QtQuick 2.4
import ColorTransFormer 1.0
import QtGraphicalEffects 1.0

Rectangle {
property var angle;
property int pointx;
property int pointy;
property int red:255
property int blue:255
property int green:255
property int groupR:ma.width/2
property int lightness:100

property int cv:255property int cs;property int ch;anchors.fill: parentMColorTransFormer{    id:color_hsv}function caculate_angle(){    var r=Math.sqrt((pointx*pointx+pointy*pointy))    if(pointx>=0&&pointy>=0){        angle=Math.asin(pointy/r)    }    if(pointx=0){        angle=Math.PI-Math.asin(pointy/r)    }    if(pointx=0&&pointy=0&&angleMath.Pi/2&&angleMath.Pi&&angleMath.Pi*3/2&&angle=0&&angleMath.Pi/2&&angleMath.Pi&&angleMath.Pi*3/2&&angle

好，代码就提供参考，注意colorpage.qml那里的那些函数转换，这只是我自己解决mousearea触点位置计算角度的算法，大家可以想更好的解决办法，我觉得这函数有点弄得复杂的，但是我也是第一次尝试，所以就懒得标记了。

关键字：qt5, qml

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！