qt android 开发篇之如何实现圆盘(hsv)颜色选择器

在很多情况,我们开发应用的时候经常会用到颜色选择器,大一的时候我做一个涂鸦软件的时候遇到的一个问题,就是如何在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

版权声明

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

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部