类似Dreamweaver的颜色选择器

一、前言

用过Dreamweaver的朋友一定对它的颜色选择器留下深刻的印象,因为它确实相当好用,其中的一项比较实用的功能是可以选取屏幕上任意一点的颜色。笔者按此思路封装了一个称为CColorPicker的类实现了类似的功能,并修正了Dreamweaver颜色选择器将屏幕上选取的颜色作近似处理的缺点。本文详细介绍了CColorPicker类的使用方法,并提供示例工程供读者参考。

下图便是示例代码的执行效果图

二、CColorPicker的简单介绍

CColorPicker类是从CButton派生的,可以像一般的按钮一样使用它。因为考虑到封装性与使用的方便,其中的鼠标光标与色彩对话框都采用动态建立。该类提供自动绑定的功能,当选择的颜色改变后通过BN_CLICKED事件通知父窗口,下面就让我们来看看CColorPicker类的具体使用步骤吧!

三、具体使用步骤(以示例工程为例)

3.1 准备工作

创建ColorPickerDemo对话框MFC工程。

将本文代码中提供的ColorPicker.h,ColorPicker.cpp两个文件拷贝到您的工程目录下,并加入到工程中。

3.2 利用资源编辑器在主对话框中加入ID为:IDC_BUTTON1的按钮,在Style中设置其为Owner draw属性。在CColorPickerDemoDlg类中为IDC_BUTTON1添加Control类别的成员变量(Member Variables)m_btnColor1,然后在ColorPickerDemoDlg.h中将CButton m_btnColor1;改为CColorPicker m_btnColor1;

并在ColorPickerDemoDlg.h中加上#include "ColorPicker.h"

编译运行看看效果吧!

3.3 程序已经可以运行了,但如何得到色彩选择器颜色改变的通知呢?在这里按钮的BN_CLICKED的单击事件已经成了颜色改变的事件了。我们只要像添加按钮单击处理函数一样即可添加颜色改变处理函数。

在处理函数里我们可以通过COLORREF CColorPicker::GetColor()函数得到COLORREF类型的颜色值,或者通过void CColorPicker::GetColor(CString& strColor)函数直接得到型如#FFFFFF样式的字符串。请看如下代码:

void CColorPickerDemoDlg::OnButton1()
  { COLORREF m_clrBKColor = m_btnColor1.GetColor(); CString strColor; m_btnColor1.GetColor(strColor); }

3.4 自动绑定功能

假如您需要在选择色彩后自动将颜色值写入某个窗口,可以用void CColorPicker::SetBuddy(HWND hWnd)函数设置绑定的窗口,这一功能在自动设置编辑框文字时非常有用。

颜色选择器CColorPicker就介绍到这里了,愿它能为您的程序增色,下回见吧!

时间: 2024-10-31 23:47:41

类似Dreamweaver的颜色选择器的相关文章

Bootstrap的Color Palette颜色选择器

Color Palette是一个颜色选择器,基于Bootstrap前端开发框架,适用于Bootstrap 2.3.2+以上的版本,依赖于jQuery插件库,支持自定义配置预设的颜色,轻量级的颜色选择jQuery插件. 依赖关系 Bootstrap 2.3.2+ jQuery 1.8.1+ 安装方法 如果你习惯使用Git,你可以使用下面的命令获取到插件的文件: git https://github.com/extremeFE/bootstrap-colorpalette.git 如果你不知道Git

使用HTML5技术开发一个属于自己的超酷颜色选择器

可能大家见过很多使用jquery/js开发的颜色选择器,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器.希望大家喜欢!   复制代码 代码如下: <!--preview element --> <div class="preview"></div> <!-- colorpicker element --> <div class="colorpicker" style="display:n

js实现可得到不同颜色值的颜色选择器实例

 这篇文章主要介绍了js实现可得到不同颜色值的颜色选择器,实例分析了javascript颜色操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=p

Android中颜色选择器和改变字体颜色的实例教程_Android

1.构建一张七彩图: 我们经常看到这种样子的颜色选择器吧.. 然后其实右边的亮度选择是: 这样我们的代码就可以进行啦...   // 创建七彩图片 private void init() { int[] oc = { 0xffff0000, 0xffffff00, 0xff00ff00, 0xff00ffff, 0xff0000ff, 0xffff00ff, 0xffff0000 }; float[] op = { 0, 0.16667f, 0.33333f, 0.5f, 0.66667f, 0

颜色选择器学习

说是颜色选择器,其实我本来不是用弄这个,只是想搞搞渐变的,但是在网上收集资料的时候感觉好像是一起的所以我就说都一起看看吧 其实说到颜色选择器网上的资料一大把,基本上都是基于android apiDemo做的研究,我也不例外: 代码网上很多我就直接贴了:都有注释: 主要介绍下这个: SweepGradient 颜色渐变方向非环形,而是以某点为圆心呈扇形扫过. SweepGradient的构造函数: public SweepGradient(float cx, float cy, int[] col

js实现可得到不同颜色值的颜色选择器实例_javascript技巧

本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut

JS实现简单面向对象的颜色选择器实例_javascript技巧

本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

仿google adsense颜色选择器代码,从中易广告联盟程序提取[原创]第1/2页_javascript技巧

仿google adsense颜色选择器代码css代码 复制代码 代码如下: <style type="text/css">  BODY {      PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #02418a; PADDING-TOP: 0px; FONT-FAMILY: Arial

js 颜色选择器(兼容firefox)_页面背景

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu