实现一个类似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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明
可以使用 HTML、CSS 和 JavaScript 实现一个类似 Element UI 的滑块组件。以下是一个简单的示例: HTML: ``` <div class="el-slider"> <div class="el-slider__bar"></div> <div class="el-slider__button"></div> </div> ``` CSS: ``` .el-slider { position: relative; height: 6px; width: 100%; background-color: #e5e5e5; } .el-slider__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; width: 100%; background-color: #409EFF; } .el-slider__button { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 16px; width: 16px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } ``` JavaScript: ``` const slider = document.querySelector('.el-slider'); const bar = slider.querySelector('.el-slider__bar'); const button = slider.querySelector('.el-slider__button'); let isDragging = false; function updateButtonPosition(percent) { button.style.left = `${percent}%`; } function updateBarWidth(percent) { bar.style.width = `${percent}%`; } function updateValue(percent) { const min = parseFloat(slider.getAttribute('data-min')) || 0; const max = parseFloat(slider.getAttribute('data-max')) || 100; const value = (max - min) * percent / 100 + min; slider.setAttribute('data-value', value); slider.dispatchEvent(new Event('input')); } function handleMouseDown(event) { isDragging = true; } function handleMouseMove(event) { if (isDragging) { const rect = slider.getBoundingClientRect(); const percent = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100)); updateButtonPosition(percent); updateBarWidth(percent); updateValue(percent); } } function handleMouseUp(event) { isDragging = false; } button.addEventListener('mousedown', handleMouseDown); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); ``` 以上代码实现一个基本的滑块组件,可以拖动滑块按钮来改变其值,并且会触发 `input` 事件。需要注意的是,这里使用了 `data-min` 和 `data-max` 属性来设置滑块的最小值和最大值,使用了 `data-value` 属性来设置当前的值(通过 `input` 事件更新)。可以在 HTML 中动态设置这些属性来初始化滑块组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值