实现一个类似360的button

通过改写一个buttonst类,实现360效果的button。

主要可以完成:frame,hover,face效果,并且支持menu,tooltips

1)派生新的类QButton.添加虚函数,设置自绘style

void QButton::PreSubclassWindow() 
{
// TODO: Add your specialized code here and/or call the base class
UINT nBS;

nBS = GetButtonStyle();

// Set initial control type
m_nTypeStyle = nBS & BS_TYPEMASK;

// Check if this is a checkbox
if (nBS & BS_CHECKBOX) m_bIsCheckBox = TRUE;

// Set initial default state flag
if (m_nTypeStyle == BS_DEFPUSHBUTTON)
{
// Set default state for a default button
m_bIsDefault = TRUE;

// Adjust style for default button
m_nTypeStyle = BS_PUSHBUTTON;
} // If

// You should not set the Owner Draw before this call
// (don't use the resource editor "Owner Draw" or
// ModifyStyle(0, BS_OWNERDRAW) before calling PreSubclassWindow() )
ASSERT(m_nTypeStyle != BS_OWNERDRAW);

// Switch to owner-draw
ModifyStyle(BS_TYPEMASK, BS_OWNERDRAW, SWP_FRAMECHANGED);
CButton::PreSubclassWindow();
}


2)添加一些控制的变量

void QButton::DrawItem(LPDRAWITEMSTRUCT lpDIS) 
{
// TODO: Add your code to draw the specified item
CDC* pDC = CDC::FromHandle(lpDIS->hDC);
CRect rc = lpDIS->rcItem;
CBitmap bitmap;
bitmap.CreateCompatibleBitmap(pDC, rc.Width(), rc.Height());
CDC memdc;
memdc.CreateCompatibleDC(pDC);
memdc.SelectObject(bitmap);
PaintBk(&memdc);
memdc.SelectObject(GetStockObject(NULL_BRUSH));
memdc.Rectangle(rc);
if(m_bIsCheckBox)
{
m_bIsPressed = (lpDIS->itemState & ODS_SELECTED) || (m_nCheck != 0);
}else
{
m_bIsPressed = (lpDIS->itemState & ODS_SELECTED);
}
m_bIsFocused = (lpDIS->itemState & ODS_FOCUS);
m_bIsDisabled = (lpDIS->itemState & ODS_DISABLED);
if(m_bIsDisabled)
{
if(m_pImage_disable != NULL)
m_pImage_disable->Draw(memdc.m_hDC, rc);
}else
{
if(m_bIsPressed)
{
if(m_pImage_pressed != NULL){
m_pImage_face->Draw(memdc.m_hDC, rc);
CRect rc2;
rc2 = rc;
rc2.OffsetRect(2,2);
m_pImage_pressed->Draw(memdc.m_hDC, rc);
}
}else if(m_bIsHovering)
{//draw hover image
if(m_pImage_hover != NULL && m_pImage_face != NULL)
{
m_pImage_face->Draw(memdc.m_hDC, rc);
m_pImage_hover->Draw(memdc.m_hDC, rc);
}
}else
{
if(m_pImage_face != NULL){
m_pImage_face->Draw(memdc.m_hDC, rc);
}
}
}

pDC->BitBlt(0, 0, rc.Width(), rc.Height(), &memdc, 0, 0, SRCCOPY);
TRACE("m_bIsPressed = %d\n", m_bIsPressed);
}

直接用memdc绘制,frame,hover,face

3)使用cximage来加载png图片资源

BOOL QButton::LoadDisablePng(UINT nID, LPCTSTR cType)
{
if(m_pImage_disable != NULL)
delete m_pImage_disable;
m_pImage_disable = new CxImage;
return m_pImage_disable->LoadResource(FindResource(NULL,MAKEINTRESOURCE(nID),cType), CXIMAGE_FORMAT_PNG);
}

4)添加mouse hover等支持。

5)测试程序

OnInitDialog()
{
m_btn.LoadFacePng(IDR_PNG8,"PNG"); 
  m_btn.LoadPressPng(IDR_PNG10,"PNG");
 // m_btn.LoadDisablePng(IDR_PNG10,"PNG");
  m_btn.LoadHoverPng(IDR_PNG9,"PNG");
m_btn.SetTooltipText("Hunter lv Tool tips!", TRUE);
m_btn.SetMenu(IDR_MENU1, this->m_hWnd, TRUE);QButton m_btn
}

6)需要自己编译cximage的库,然后添加库文件,头文件就可以直接使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
由于Vue.js是一个JavaScript框架,无法直接使用HTML实现Vue的按钮组件。但是,我们可以使用Vue提供的组件机制来创建按钮组件。 下面是一个简单的Vue按钮组件的示例代码: ```html <template> <button class="btn" :class="type" @click="$emit('click')"> <slot></slot> </button> </template> <script> export default { name: 'MyButton', props: { type: { type: String, default: 'default' } } } </script> <style> .btn { padding: 8px 16px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; cursor: pointer; } .btn.default { background-color: #fff; color: #333; } .btn.primary { background-color: #007bff; color: #fff; } </style> ``` 在这个组件中,我们定义了一个名为`MyButton`的Vue组件,它具有一个`type`属性和一个`click`事件。`type`属性用于控制按钮的样式,可以是`default`或`primary`,默认值为`default`。`click`事件用于在按钮被点击时触发。 在模板中,我们使用`button`元素来显示按钮,并使用`class`绑定`type`属性来设置按钮的样式。我们还使用了Vue提供的`slot`插槽来实现按钮的内容。 在脚本中,我们将`type`属性定义为一个具有默认值的字符串类型,以便在没有指定`type`属性时使用默认值。我们还将`click`事件绑定到按钮上,并使用`$emit`方法触发`click`事件。 在样式中,我们定义了按钮的基本样式和两种不同的样式(`default`和`primary`)来实现不同类型的按钮。 要使用这个组件,只需在Vue应用程序中导入并注册它,然后在模板中使用它: ```html <template> <div> <my-button @click="handleClick">Default Button</my-button> <my-button type="primary" @click="handleClick">Primary Button</my-button> </div> </template> <script> import MyButton from './MyButton.vue' export default { components: { MyButton }, methods: { handleClick() { console.log('Button clicked') } } } </script> ``` 在这个示例中,我们导入并注册了`MyButton`组件,并在模板中使用了两个不同类型的按钮。当按钮被点击时,会触发`handleClick`方法,该方法会在控制台中输出一条消息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值