Duilib自绘圆形进度条(仿网易)

最新推荐文章于 2024-07-25 10:09:27 发布
最新推荐文章于 2024-07-25 10:09:27 发布
阅读量579 收藏 1
点赞数
分类专栏： duilib 文章标签： c++ visual studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36088602/article/details/119645978
版权

UICircleProgress.h

#pragma once
#include <GdiPlus.h>
#include <atlstr.h>

using namespace Gdiplus;

namespace DuiLib
{
	class CCircleProgressUI :
		public CProgressUI
	{
	public:
		CCircleProgressUI(void);
		~CCircleProgressUI(void);

		void SetCircular(BOOL bCircular = TRUE);
		void SetClockwiseRotation(BOOL bClockwise = TRUE);
		void SetCircleWidth(DWORD dwCircleWidth);
		void SetBgColor(DWORD dwBgColor);
		DWORD GetBgColor() const;
		void SetFgColor(DWORD dwBgColor);
		DWORD GetFgColor() const;
		void SetIndicator(LPCTSTR lpIndicatorImage);
		void SetEnableCircleEffect(BOOL bEnableCircleEffect = FALSE);
		void SetCircleGradientColor1(DWORD dwColor);
		void SetCircleGradientColor2(DWORD dwColor);
		void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);
		void PaintBkColor(HDC hDC);

	private:
		BOOL        m_bCircular;
		BOOL        m_bClockwise;
		DWORD       m_dwCircleWidth;
		DWORD       m_dwBgColor;
		DWORD       m_dwFgColor;
		BOOL        m_bEnableCircleEffect;
		DWORD       m_dwGradientColor1;
		DWORD       m_dwGradientColor2;
		Gdiplus::Image* m_pIndicator;
		CString		m_sIndicatorImage;
	};
}

UICircleProgress.cpp

#include "stdafx.h"
#include "CircleProgress.h"
#include "shlwapi.h"

namespace ui
{

	CircleProgress::CircleProgress() :
		m_bCircular(true),
		m_bClockwise(true),
		m_nCircleWidth(1),
		m_dwBackgroundColor(0),
		m_dwForegroundColor(0),
		m_dwGradientColor(1),
		m_pIndicator(nullptr)
	{

	}

	void CircleProgress::SetAttribute(const std::wstring& srName, const std::wstring& strValue)
	{
		if (srName == _T("circular")) SetCircular(strValue == _T("true"));
		else if (srName == _T("circlewidth")) SetCircleWidth(_ttoi(strValue.c_str()));
		else if (srName == _T("indicator")) SetIndicator(strValue);
		else if (srName == _T("clockwise")) SetClockwiseRotation(strValue == _T("true"));
		else if (srName == _T("bgcolor")) {
			LPCTSTR pValue = strValue.c_str();
			while (*pValue > _T('\0') && *pValue <= _T(' ')) pValue = ::CharNext(pValue);
			SetBackgroudColor(pValue);
		}
		else if (srName == _T("fgcolor")) {
			LPCTSTR pValue = strValue.c_str();
			while (*pValue > _T('\0') && *pValue <= _T(' ')) pValue = ::CharNext(pValue);
			SetForegroudColor(pValue);
		}
		else if (srName == _T("gradientcolor")) {
			LPCTSTR pValue = strValue.c_str();
			while (*pValue > _T('\0') && *pValue <= _T(' ')) pValue = ::CharNext(pValue);
			SetCircleGradientColor(pValue);
		}
		else Progress::SetAttribute(srName, strValue);
	}

	void CircleProgress::PaintStatusImage(IRenderContext* pRender)
	{
		//Progress::PaintStatusImage(pRender);
		if (m_bCircular)
		{
			//目前IRenderContext还有很多GDI+接口未实现，暂时直接用gdi+画图了
			//以后可能会调整：需实现1、DrawArc  2、Pen增加brush(渐变)入参 3、可以自由设置Graphics属性
			int direction = m_bClockwise ? 1 : -1;   //旋转方向
			int bordersize = 1;          //弧度宽度目前使用1像素

			Gdiplus::Graphics graphics(pRender->GetDC());
			graphics.SetSmoothingMode(Gdiplus::SmoothingModeHighQuality);
			Gdiplus::Pen bgPen(m_dwBackgroundColor, m_nCircleWidth);
			// 圆形中心
			CPoint center;
			center.x = m_rcItem.left + (m_rcItem.right - m_rcItem.left) / 2;
			center.y = m_rcItem.top + (m_rcItem.bottom - m_rcItem.top) / 2;

			// 控件矩形内的最大正方形的边界
			int side = min(m_rcItem.right - m_rcItem.left, m_rcItem.bottom - m_rcItem.top);
			//UiRect rcBorder;  仍然存在UiRect 到 RectF的转换，所以直接用gdi的RectF了
			Gdiplus::RectF rcBorder;
			rcBorder.X = center.x - side / 2;
			rcBorder.Y = center.y - side / 2;
			rcBorder.Width = rcBorder.Height = side;

			Gdiplus::RectF outer = rcBorder;
			if (m_pIndicator) {
				outer.Inflate(-1.0F *m_pIndicator->GetWidth() / 2, -1.0F * m_pIndicator->GetWidth() / 2);
			}
			else
			{
				outer.Inflate(-0.5 * m_nCircleWidth, -0.5 * m_nCircleWidth);
			}
			outer.Inflate(-1, -1);


			if (m_dwGradientColor == 0)
			{
				//不使用渐变色，直接用前景色铺满
				Gdiplus::Pen fgPen(m_dwForegroundColor, m_nCircleWidth);
				graphics.DrawArc(&bgPen, outer, 270, 360);   //270从最上面开始递增，设为0的话，是最右边开始
				graphics.DrawArc(&fgPen, outer, 270, direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin));
			}
			else
			{
				Gdiplus::REAL factors[4] = { 0.0f, 0.4f, 0.6f, 1.0f };
				Gdiplus::REAL positions[4] = { 0.0f, 0.2f, 0.8f, 1.0f };

				Gdiplus::LinearGradientBrush lgbrush(rcBorder, m_dwForegroundColor, m_dwGradientColor, Gdiplus::LinearGradientModeVertical);
				lgbrush.SetBlend(factors, positions, 4);
				graphics.DrawArc(&bgPen, outer, 270, 360);
				Gdiplus::Pen fgPen(&lgbrush, m_nCircleWidth);
				graphics.DrawArc(&fgPen, outer, 270, direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin));

			}

			//画旋转指示器图标，需要用到矩阵
			if (m_pIndicator)
			{
				Gdiplus::Matrix matrix;
				matrix.RotateAt(direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin), Gdiplus::PointF(center.x, center.y), Gdiplus::MatrixOrderAppend);
				graphics.SetTransform(&matrix);
				Gdiplus::RectF rectf;
				rectf.X = center.x - m_pIndicator->GetWidth() / 2;
				rectf.Y = outer.Y + bordersize / 2 - m_pIndicator->GetHeight() / 2;
				rectf.Width = m_pIndicator->GetWidth();
				rectf.Height = m_pIndicator->GetHeight();
				graphics.DrawImage(m_pIndicator, rectf);
			}

		}
	}

	void CircleProgress::ClearImageCache()
	{
		__super::ClearImageCache();
		if (m_pIndicator)
		{
			delete m_pIndicator;
			m_pIndicator = nullptr;
		}
	}

	void CircleProgress::SetCircular(bool bCircular /*= true*/)
	{
		m_bCircular = bCircular;
		Invalidate();
	}

	void CircleProgress::SetClockwiseRotation(bool bClockwise /*= true*/)
	{
		if (bClockwise != m_bClockwise)
		{
			m_bClockwise = bClockwise;
			if (m_pIndicator)
			{
				//已经旋转了图片，旋转到相反的方向
				m_pIndicator->RotateFlip(Gdiplus::Rotate180FlipNone);
			}

		}
	}

	void CircleProgress::SetCircleWidth(int nCircleWidth)
	{
		m_nCircleWidth = nCircleWidth;
		Invalidate();
	}


	void CircleProgress::SetBackgroudColor(const std::wstring& strColor)
	{
		m_dwBackgroundColor = GlobalManager::GetTextColor(strColor);
		ASSERT(m_dwBackgroundColor != 0);
		Invalidate();
	}

	void CircleProgress::SetForegroudColor(const std::wstring& strColor)
	{
		m_dwForegroundColor = GlobalManager::GetTextColor(strColor);
		ASSERT(m_dwForegroundColor != 0);
		Invalidate();
	}

	void CCircleProgressUI::SetIndicator(LPCTSTR lpIndicatorImage)
	{
		ASSERT(lpIndicatorImage);
		if (m_sIndicatorImage != lpIndicatorImage)
		{
			m_sIndicatorImage = lpIndicatorImage;

			std::wstring imageResourcePath;
			std::wstring imagepath = m_sIndicatorImage;
			if (!::PathFileExistsW(imagepath.c_str())) 
			{
				CString strResourcePath = GetManager()->GetResourcePath();
				imageResourcePath = strResourcePath;
				imagepath = imageResourcePath + imagepath;
			}

			if (!::PathFileExistsW(imagepath.c_str())) {
				return;
			}


			m_pIndicator = new Gdiplus::Image(imagepath.c_str());

			Status state = m_pIndicator->GetLastStatus();
			if (Ok == state)
			{
				// 假定图片指向上
				m_pIndicator->RotateFlip(m_bClockwise ? Rotate90FlipNone : Rotate270FlipNone);
				Invalidate();
			}
		}
	}

	void CircleProgress::SetCircleGradientColor(const std::wstring& strColor)
	{
		m_dwGradientColor = GlobalManager::GetTextColor(strColor);
		ASSERT(m_dwGradientColor != 0);
		Invalidate();
	}

}

使用:

void CRichListWnd::OnSelectChanged( TNotifyUI &msg )
{
	if(msg.pSender->GetName() == _T("down_list"))
	{
		static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("tab_main")))->SelectItem(0);
	}
	else if(msg.pSender->GetName() == _T("down_his"))
	{
		static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("tab_main")))->SelectItem(1);

		CCircleProgressUI* progress = static_cast<CCircleProgressUI*>(m_PaintManager.FindControl(L"proName"));
		if (!progress)return;

		progress->SetValue(1);

		::SetTimer(m_hWnd, IDT_PROGRESS, 100, NULL);

	}
}

LRESULT CRichListWnd::OnTimer(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
	switch (wParam)
	{
	case IDT_PROGRESS:
	{
		CCircleProgressUI* progress = static_cast<CCircleProgressUI*>(m_PaintManager.FindControl(L"proName"));
		value = value % 100;
		progress->SetValue(value);

		TCHAR szBuffer[32] = { 0 };

		swprintf_s(szBuffer, _T("%d%%"), value);
		
		progress->SetText(szBuffer);
		value++;
	}
	default:
		break;
	}

	bHandled = false;
	return 0;
}

在duilib库"\Core\UIDefine.h" 添加:
在这里插入图片描述
在duilib库"\DuiLib\UIlib.h" 添加头文件
在这里插入图片描述

在duilib库"\Core\UIDlgBuilder.cpp" 找到函数CControlUI* CDialogBuilder::_Parse(CMarkupNode* pRoot, CControlUI* pParent, CPaintManagerUI* pManager)添加
在这里插入图片描述

logo_18x18.png
logo_18x18.png

xml

<CircleProgress name="proName" circular="true" indicator="logo_18x18.png" clockwise="true" enablecircleeffect="true" gradientcolor1="#FFFFFFFF" gradientcolor2="#FF0000FF" width="250" height="250" circlewidth="16" text="" min="1" max="100" value="10" bgcolor="#FFF8A09F" fgcolor="#FF9DEDF8" gradient="false" bordersize="0" bordercolor="#FFFFFF00" valign="vcenter" textcolor="0xFFFFFFFF" font="2" />

在这里插入图片描述

 2021年8月13日11:50:20 望技术有成后能回来看见自己的脚步
归途醉染
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DuiLib 自绘鼠标提示窗口 tooltip
04-13
在DuiLib中，"自绘鼠标提示窗口 tooltip"是一个关键的特性，它允许开发者超越系统默认的提示窗口样式，创造出更加个性化和符合应用风格的提示信息。 通常，系统默认的tooltip是简单文本形式，样式单一，而DuiLib的...
duilib 环形进度条
03-20
在Duilib中实现环形进度条，通常需要通过自绘（Custom Draw）来完成。自绘意味着你需要编写代码来控制UI元素的绘制，而不是依赖于库提供的默认绘制方式。GDI+（Graphics Device Interface Plus）是Windows API的一个...
duilib自绘制圆形进度条
Keep Moving~
05-27 3081
圆形进度条在duilib框架中是非基础控件，我们需要基于Progress控件进行自绘制，核心代码包括UICircleProgress.h和UICircleProgress.cpp两个文件，其代码如下： UICircleProgress.h #ifndef __UICIRCLE_PROGRESS_H__ #define __UICIRCLE_PROGRESS_H__ #pragma once ...
Duilib多标签选项卡拖拽效果：添加动画特效！
sinat_27171121的博客
06-08 701
Direct是比较早的，他的技术比较老。和普通的win程序是一样的。然后他的控件大多是没有句柄的。那个是dx插特效，是不一样的，在播放dx特效之时，会有一个阻塞之类的，特效组合也不是很自由。在postSize的循环中，实时修改动画过程中控件的位置，不直接采用setPos 的值，从而实现布局动画，原理十分的简单。不然跑的太快，CPU飙升过于明显。和chrome浏览器不同的是他没有使用标准的拖拽事件，而是分别处理了点击触摸移动事件。我调查了一些小型界面库，包括imgui、lcui等，都没有内置这样的组件。
Duilib自绘圆形进度条
fighton的专栏
05-24 3537
CircleProgressUI.h#pragma once namespace DuiLib { class CCircleProgressUI : public CProgressUI { public: CCircleProgressUI(void); ~CCircleProgressUI(void); void SetCircular(BOOL bCircular
再谈duilib控件自绘
学习并记录
09-10 1415
之前写过一篇duilib自绘，其中主要介绍了PostPaint。这个由于机制原因，会导致一直绘制在本窗体最上层（当然还是比子窗口级别低的），这样有时候切换tab页之类的，会出现自绘的东西还在，不能完美跟随控件。下面重新介绍下duilib的绘制流程。 先介绍Paint，DoPaint，PaintBkcolor，PaintBkImage，PaintStatusImage，PaintText，PaintBorder，DoPostPaint 这些paint函数的大致作用以及调用的时机。 Paint函数是源头，从
duilib自绘
学习并记录
01-31 2335
有时候我们在使用duilib的同时，可能想自己在窗体上绘制一些图形、线条等等，但是发现绘制不上去。emmm，不用烦恼，其实是绘制上去然后又被duilib自身的绘制机制给擦掉了应该。 那么正确的绘制姿势呢？ 方法1：从CControlUI派生一个子类，然后直接重写DoPaint接口，在里面绘制即可。这样有1个限制，duilib默认是后添加的控件Z序高，而实际绘制全部控件的时候，Z序高的控件在上层...
duilib自绘控件
深之JohnChen的专栏
04-14 2000
有时候我们在使用duilib的同时，可能想自己在窗体上绘制一些图形、线条等等，但是发现绘制不上去。其实是绘制上去然后又被duilib自身的绘制机制给擦掉了应该。 那么正确的绘制姿势呢？ 方法1：从CControlUI派生一个子类，然后直接重写DoPaint接口，在里面绘制即可。这样有1个限制，duilib默认是后添加的控件Z序高，而实际绘制全部控件的时候，Z序高的控件在上层。因此...
duilib-自定义圆形按钮-环形进度条控件
Yvan Jiang的专栏
08-21 1732
duilib-自定义圆形按钮-环形进度条控件 如何自定义一个圆形按钮控件内嵌到环形进度条底部，点击按钮刷新进度条值，类似下图： 1、在UIDefine.h中增加宏定义 #define DUI_CTR_BTN_PROGRESS (_T("btnProgress")) 2、编码控件头文件 UIBtnProgress.h #ifndef UI_BTN_PROGRESS_H #define UI_BTN_PROGRESS_H #pragma once #include <GdiPlus.h&
Duilib的圆环形 进度条 实现（网易云信版本）
weixin_30692143的博客
08-14 491
/** @file CircleProgress.h* @brief 圆环型进度条控件，圆环中间可以有文本（如85%）* @copyright (c) 2019-2022, NetEase Inc. All rights reserved* @author Xuhuajie* @date 2019/8/14*/ #ifndef UI_CONTROL_CIRCLEPROGRESS_H_#...
网易云信DUIlib 使用小记
王春雨的博客
04-22 1621
网易云信的duilib跟原版不同地方是原版的DUI 如果你想处理按钮的点击事件和其他控件的事件直接在Notify 函数中响应就行了，而云信的diuli定义了一个EventType事件类型的枚举里面涵盖了大部分控件的消息，AttachBubbledEvent（）的第一个参数就是需要你自己需要响应的消息类型，比如kEventClick消息就是所有控件的单击消息，const EventCallback& callback) { OnBubbledEvent[eventType] += callbac...
duilib学习------网易云信小实例
u011269801的专栏
06-13 514
1、效果图如下： 2、
自绘进度条和自绘图形
08-25
在这个场景中，"自绘进度条和自绘图形"指的是通过编程来创建和定制进度条以及其它图形用户界面（GUI）元素的过程。下面我们将深入探讨这一主题。 首先，进度条是用户界面中常见的一种反馈机制，用于展示任务的完成...
网易云信Windows应用界面开发框架（基于Duilib）
04-30
NIM Duilib 包含了一整套桌面软件的开发部件，与其说这是一个界面库，不如说它是一个开发框架。从原有 Duilib 基础上拓展了一些新的能力，并整合了 Google base 基础类库（线程、内存、闭包等）。您完全可以直接使用...
Duilib 控件重绘教程附带例子
02-13
本教程将重点讲解如何在Duilib中进行控件的重绘，以实现自定义的视觉效果。 控件重绘是Duilib中实现界面个性化的重要手段。通过重绘，我们可以改变控件的默认外观，比如修改边框样式、调整颜色、添加图案或者动画...
【C++】C++中的find方法介绍
qq_35902025的博客
07-25 397
find 函数是 std::string 类中非常有用的成员函数之一，它提供了灵活的方式来查找子字符串或字符。使用 npos 可以检查查找操作是否成功。
《Cross-Modal Dynamic Transfer Learning for Multimodal Emotion Recognition》
最新发布
buyaotutou的博客
07-25 1134
例如：第一章 Python 机器学习入门之pandas的使用文章链接Multimodal Emotion Recognition is an important research area for developing human-centric applications, especially in the context of video platforms. Most existing models have attempted to develop sophisticated fusion tech
背单词工具(C++)
zeyeqianli的博客
07-24 3366
【代码】背单词工具(C++)
duilib自绘messagebox
10-27
自绘messagebox是指通过duilib框架，开发者可以自己设计和绘制消息框的外观和样式，而不必使用Windows系统默认的消息框样式。 要实现自绘messagebox，首先需要创建一个自定义的对话框控件，并在其中添加需要的控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值