/** @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_
#define UI_CONTROL_CIRCLEPROGRESS_H_

#pragma once

namespace ui
{

class UILIB_API CircleProgress : public Progress
{
public:
CircleProgress();

/// 重写父类方法,提供个性化功能,请参考父类声明
virtual void SetAttribute(const std::wstring& strName, const std::wstring& strValue) override;
virtual void PaintStatusImage(IRenderContext* pRender) override;
virtual void ClearImageCache() override;

/**
* @brief 设置圆形进度条
* @param[in] bCircular 为 true 时设置为圆形滚动条,false 时设置为父级滚动条,默认为 true
* @return 无
*/
void SetCircular(bool bCircular = true);
/**
* @brief 设置递增方向
* @param[in] bClockwise 为 true 时设置为顺时针,false 时设置为逆时针,默认为 true
* @return 无
*/
void SetClockwiseRotation(bool bClockwise = true);
/**
* @brief 设置圆环宽度
* @param[in] nCircleWidth 宽度数值
* @return 无
*/
void SetCircleWidth(int nCircleWidth);
/**
* @brief 设置进度条背景颜色
* @param[in] strColor要设置的背景颜色字符串,该字符串必须在 global.xml 中存在
* @return 无
*/
void SetBackgroudColor(const std::wstring& strColor);
/**
* @brief 设置进度条前景颜色
* @param[in] strColor要设置的前景颜色字符串,该字符串必须在 global.xml 中存在
* @return 无
*/
void SetForegroudColor(const std::wstring& strColor);
/**
* @brief 设置进度条前景渐变颜色,与ForegroudColor同时使用,可以不设置,则无渐变效果
* @param[in] strColor要设置的前景渐变颜色字符串,该字符串必须在 global.xml 中存在
* @return 无
*/
void SetCircleGradientColor(const std::wstring& strColor);
/**
* @brief 设置进度指示移动图标
* @param[in] sIndicatorImage要设置的图片
* @return 无
*/
void SetIndicator(const std::wstring& sIndicatorImage);

protected:
bool m_bCircular;
bool m_bClockwise;
int m_nCircleWidth;
DWORD m_dwBackgroundColor;
DWORD m_dwForegroundColor;
DWORD m_dwGradientColor;
//Image m_IndicatorImage; //使用image对象,无法满足需求,需要设置矩阵变换
Gdiplus::Image* m_pIndicator; //此类目前维护资源管理
std::wstring m_sIndicatorImage;

};

} // namespace ui

#endif // UI_CONTROL_CIRCLEPROGRESS_H_

/** @file CircleProgress.cpp
* @brief 圆环型滚动条控件,圆环中间可以有文本(如85%)
* @copyright (c) 2019-2022, NetEase Inc. All rights reserved
* @author Xuhuajie
* @date 2019/8/14
*/

#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(0),
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::SmoothingModeAntiAlias);
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 CircleProgress::SetIndicator(const std::wstring& sIndicatorImage)
{
if (m_sIndicatorImage != sIndicatorImage)
{
m_sIndicatorImage = sIndicatorImage;
if (m_pIndicator)
{
delete m_pIndicator;
m_pIndicator = nullptr;
}
std::wstring imagepath = m_sIndicatorImage;
if (!::PathFileExistsW(imagepath.c_str())) {
imagepath = GlobalManager::GetResourcePath() + m_pWindow->GetWindowResourcePath() + imagepath;
}
if (!::PathFileExistsW(imagepath.c_str())) {
return;
}
m_pIndicator = new Gdiplus::Image(imagepath.c_str());

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

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

Duilib的圆环形 进度条 实现(网易云信版本)的更多相关文章

  1. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  2. iOS 开发技巧-制作环形进度条

    有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...

  3. iOS一分钟学会环形进度条

    有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现.先看一下这篇博客,博客地址:htt ...

  4. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  5. 【CSS】环形进度条

    效果图 原理剖析 1.先完成这样一个半圆(这个很简单吧) 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接 源码 &l ...

  6. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  7. html5 canvas绘制环形进度条,环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  8. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

  9. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

随机推荐

  1. Spring Cloud Alibaba | Nacos集群部署

    目录 Spring Cloud Alibaba | Nacos集群部署 1. Nacos支持三种部署模式 2. 集群模式下部署Nacos 2.1 架构图 2.2 下载源码或者安装包 2.3 配置集群配 ...

  2. Bzoj 2733: [HNOI2012]永无乡 数组Splay+启发式合并

    2733: [HNOI2012]永无乡 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3955  Solved: 2112[Submit][Statu ...

  3. SSAS Tabular 表格模型建模(关系)及部署

    一.表格建模(SSAS 表格)   表格模型是 Analysis Services 中的内存中数据库. 使用最先进的压缩算法和多线程查询处理器,xVelocity 内存中分析引擎 (VertiPaq) ...

  4. 哈夫曼编码与解码的C++实现:建立哈夫曼树、进行哈夫曼编码与解码

    最近完成了数据结构课程设计,被分到的题目是<哈夫曼编码和解码>,现在在这篇博文里分享一下自己的成果. 我在设计时,在网上参考了很多老师和前辈的算法和代码,向他们表示感谢!他们的成果给了我很 ...

  5. 个人永久性免费-Excel催化剂功能第35波-Excel版最全单位换算,从此不用到处百度找答案

    全球化的今天,相信我们经常可以有机会接触到外国的产品,同时我们也有许多产品出口到外国,国与国之间的度量单位不一,经常需要做一些转换运算,一般网页提供这样的转换,但没有什么比在Excel上计算来得更为方 ...

  6. Error:Failed to resolve: com.android.support:support-annotations:26.0.2

    异常信息记录: Error:Failed to resolve: com.android.support:support-annotations:26.0.2 <a href="ins ...

  7. 【Demo 1】基于object_detection API的行人检测 2:数据制作

    项目文件结构 因为目录太多又太杂,而且数据格式对路径有要求,先把文件目录放出来.(博主目录结构并不规范) 1.根目录下的models为克隆下来的项目.2.pedestrian_data目录下的路径以及 ...

  8. 林大妈的JavaScript基础知识(三):JavaScript编程(1)对象

    1. 对象的简单介绍与一些注意事项 JavaScript中具有几个简单数据类型:数字.字符串.布尔值.null值以及undefined值.除此之外其余所有值(包括数组.函数,甚至正则表达式)都是对象. ...

  9. tornado并发性能测试

    1.带server2.0装饰器 接口访问数据库查询 并发100 平均每秒处理11.8次请求 平均响应时间6944ms 接口不做任何处理 并发100 平均每秒处理99.9次请求 平均响应时间3ms 并发 ...

  10. bootstrap datatable editor 扩展

    需求: a. 表单样式更改. b. 表单大小更改. 思路: a. 通过设置modal css更改样式和大小.缺点,全局性的更改. b. 更改bootstrap-editor,可以通过某种方式将参数传入 ...