圆形热点按钮的制作

原创 2012年03月24日 11:39:30

说明:

绘制一个圆形的按钮,如果鼠标悬停在圆里面时,边框变成黑色,否则为白色。

过程:

思路如下:首先在对话框中绘制一个圆形,然后处理WM_MOUSEMOVE消息,计算出当前鼠标所停的点是否在圆里面。如果在,那么就在绘制时把边框变成黑色的。再处理WM_LBUTTONUP,如果鼠标在圆里面,就弹出一个对话框。

首先先定义类circle

class circle : public CWnd
{
	DECLARE_DYNAMIC(circle)
private:
	CPoint center; .//圆心所在点
	int radium;//半径
public:
	circle();
	virtual ~circle();
	void draw(int radium,CPoint center,CDC *pDC,int mode,CString text);//绘制圆形按钮
	bool isInCricle(CPoint point);//判断是否在圆里面
	void click(CPoint point);
protected:
	DECLARE_MESSAGE_MAP()
};



然后再实现。

void circle::draw(int radium,CPoint center,CDC *pDC,int mode,CString text)
{
		CPen pen = CPen(PS_SOLID,5,RGB(255,255,255));
		CPen selected = CPen(PS_SOLID,5,RGB(0,0,0));
		CFont font;
		font.CreatePointFont(196,_T("黑体"));
		if (mode == 0)//在圆外面
		{
			pDC->SelectObject(pen);
			pDC->Ellipse(center.x - radium,center.y - radium,center.x + radium,center.y + radium);//计算圆的区域
			pDC->SelectObject(font);
			pDC->TextOutW(center.x - text.GetLength() * 7,center.y - text.GetLength() * 5,text);//7 = sqrt(196)/2
			this->radium = radium;
			this->center = center;
		}
		else//在圆里面
		{
			pDC->SelectObject(selected);
			pDC->Ellipse(center.x - radium,center.y - radium,center.x + radium,center.y + radium);
			pDC->SelectObject(font);
			pDC->TextOutW(center.x - text.GetLength() * 7,center.y - text.GetLength() * 5,text);
			this->radium = radium;
			this->center = center;
		}
}

bool circle::isInCricle(CPoint point)
{
	int m,n;
	m = static_cast<int>(point.x) - this->center.x;//计算这个点是否在圆里面
	n = static_cast<int>(point.y) - this->center.y;
	if (m * m + n * n <= this->radium * this->radium)
	{
		return TRUE;
	}
	else
	{
		return FALSE;
	}
}

void circle::click(CPoint point)
{
	if (this->isInCricle(point))
	{
		MessageBoxW(_T("成功了!"),_T("消息"));
	}
}


在对话框头文件中,定义

circle myCircle;
CDC *pDC;//绘图上下文


最后再initDialog中进行初始化

	myCircle.draw(50,CPoint(100,100),pDC,0,_T("ABC"));


另外,我们还得处理WM_MOUSEMOVE和WM_LBUTTONUP

void CcirclebuttonDlg::OnMouseMove(UINT nFlags, CPoint point)
{
	// TODO: 在此添加消息处理程序代码和/或调用默认值
	if (myCircle.isInCricle(point))
	{
		myCircle.draw(50,CPoint(100,100),pDC,1,_T("ABC"));
	}
	else
	{
		myCircle.draw(50,CPoint(100,100),pDC,0,_T("ABC"));
	}
	CDialogEx::OnMouseMove(nFlags, point);
}
//处理WM_MOUSEMOVE


void CcirclebuttonDlg::OnLButtonUp(UINT nFlags, CPoint point)
{
	// TODO: 在此添加消息处理程序代码和/或调用默认值
	myCircle.click(point);
	CDialogEx::OnLButtonUp(nFlags, point);
}

//处理WM_LBUTTONUP


不一定是最好看,但是,这或许是用于的。这篇文章如有不足之处,请多多指教

一步步教你制作WPF圆形玻璃按钮

图1   1.介绍 从我开始使用vista的时候,我就非常喜欢它的圆形玻璃按钮。WPF最好的一个方面就是允许自定义任何控件的样式。用了一段时间的Microsoft Expression Bl...
  • new_smile
  • new_smile
  • 2016年05月11日 14:22
  • 4768

HTML--练习制作聚美优品美容热点产品列表

无标题文档 .a { background-color: #F3C; padding: 7px; color: #FFF; } .b { width:300px; height:50...
  • gengzhi1293443962
  • gengzhi1293443962
  • 2016年10月18日 14:46
  • 1713

css纯代码实现圆边框和圆按钮

一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:   * 减少维护的工作量。图片文件的生成...
  • qq_25107499
  • qq_25107499
  • 2015年10月12日 10:45
  • 6699

C#圆形Button——RoundButton

C#自定义圆形按钮控件
  • luzhenyuxfcy
  • luzhenyuxfcy
  • 2016年07月20日 11:36
  • 2096

c#圆形自定义按钮

using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnos...
  • y18874489765
  • y18874489765
  • 2017年11月24日 15:51
  • 276

图片上按钮特效 热点链接(img map area)

转 http://www.jb51.net/web/90755.html 那么,如何获取这个坐标值呢? 方法一:.新建一个html页面,在body里面插入如下代码: 复制代码...
  • fendou4533
  • fendou4533
  • 2013年10月12日 23:04
  • 1716

是的,就连这种Apollonius圆图案也很容易做成GIF动画的形式

做成动画不难; 而且这种图案的绘制对内存要求不高。
  • stereohomology
  • stereohomology
  • 2015年05月17日 09:38
  • 903

Java制作圆形按钮

制作圆形Swing按钮(中文版)     作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站        这是一个关于制作...
  • chen920629
  • chen920629
  • 2013年12月11日 10:37
  • 2867

WPF 圆形按钮 渐变色

WPF 按钮:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x...
  • youqingyike
  • youqingyike
  • 2015年07月31日 14:19
  • 2068

IOS设置圆形按钮的简单实现

在IOS系统中,我们常会看到用户的头像图片用圆形图像来表示。 那么这应该怎么实现呢?我们可以通过修改UIView背后的CALayer对象的属性来实现。 在IOS中,一个View是对应着与其配对的L...
  • u013378438
  • u013378438
  • 2015年08月19日 22:55
  • 3128
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆形热点按钮的制作
举报原因:
原因补充:

(最多只允许输入30个字)