Add docs for CircleProgress

Signed-off-by: jiajia_deng <2894220@gmail.com>
This commit is contained in:
jiajia_deng 2019-09-10 10:35:20 +08:00
parent 45c5104ce0
commit 6e359091b4
4 changed files with 352 additions and 241 deletions

View File

@ -0,0 +1,111 @@
# CircleProgress环形进度条
`CircleProgress` 继承了 `Progress` 控件属性和方法,更多可用属性和方法请参考:[Progress](Progress.md) 控件
## 可用属性
| 属性名称 | 默认值 | 参数类型 | 用途 |
| :--- | :--- | :--- | :--- |
| circlewidth | 1 | INT | 环形进度条的宽度,如(10) |
| indicator | | STRING | 设置进度指示移动图标 |
| clockwise | true | BOOL |设置递增方向 |
| bgcolor | | STRING | 设置进度条背景颜色 |
| fgcolor | | STRING | 设置进度条背前景色 |
| gradientcolor | | STRING | 设置进度条前景渐变颜色,与 fgcolor 同时使用,可以不设置则无渐变效果 |
## 可用接口
| 接口名称 | 用途 |
| :--- | :--- |
| [SetCircular](#SetCircular) | 设置圆形滚动条样式,默认为普通进度条 |
| [SetClockwiseRotation](#SetClockwiseRotation) | 设置递增方向 |
| [SetCircleWidth](#SetCircleWidth) | 设置圆环宽度 |
| [SetBackgroudColor](#SetBackgroudColor) | 设置进度条背景颜色 |
| [SetForegroudColor](#SetForegroudColor) | 设置进度条前景颜色 |
| [SetCircleGradientColor](#SetCircleGradientColor) | 设置进度条前景渐变颜色,与 SetForegroudColor 同时使用,可以不设置则无渐变效果 |
| [SetIndicator](#SetIndicator) | 设置进度指示移动图标 |
### SetCircular
设置圆形滚动条,默认为普通进度条
```cpp
void SetCircular(bool bCircular = true)
```
- 参&emsp;数:
- `bCircular` bCircular 为 true 时设置为圆形滚动条false 时设置为父级滚动条,默认为 true
- 返回值:无
### SetClockwiseRotation
设置递增方向
```cpp
void SetClockwiseRotation(bool bClockwise = true)
```
- 参&emsp;数:
- `bClockwise` bClockwise 为 true 时设置为顺时针false 时设置为逆时针,默认为 true
- 返回值:无
### SetCircleWidth
设置圆环宽度
```cpp
void SetCircleWidth(int nCircleWidth)
```
- 参&emsp;数:
- `nCircleWidth` nCircleWidth 宽度数值
- 返回值:无
### SetBackgroudColor
设置进度条背景颜色
```cpp
void SetBackgroudColor(const std::wstring& strColor)
```
- 参&emsp;数:
- `strColor` strColor要设置的背景颜色字符串该字符串必须在 global.xml 中存在
- 返回值:无
### SetForegroudColor
设置进度条前景颜色
```cpp
void SetForegroudColor(const std::wstring& strColor)
```
- 参&emsp;数:
- `strColor` strColor要设置的前景颜色字符串该字符串必须在 global.xml 中存在
- 返回值:无
### SetCircleGradientColor
设置进度条前景渐变颜色,与 SetForegroudColor 同时使用,可以不设置,则无渐变效果
```cpp
void SetCircleGradientColor(const std::wstring& strColor)
```
- 参&emsp;数:
- `strColor` strColor要设置的前景渐变颜色字符串该字符串必须在 global.xml 中存在
- 返回值:无
### SetIndicator
设置进度指示移动图标
```cpp
void SetIndicator(const std::wstring& sIndicatorImage);
```
- 参&emsp;数:
- `sIndicatorImage` sIndicatorImage 要设置的图片
- 返回值:无

View File

@ -9,6 +9,7 @@
- [Option](Option.md) 单选框 - [Option](Option.md) 单选框
- [Label](Label.md) 文本 - [Label](Label.md) 文本
- [Progress](Progress.md) 进度条 - [Progress](Progress.md) 进度条
- [CircleProgress](CircleProgress.md) »·Ðνø¶ÈÌõ
- [Slider](Slider.md) 滑动条 - [Slider](Slider.md) 滑动条
- [RichEdit](RichEdit.md) 富文本 - [RichEdit](RichEdit.md) 富文本
- [ScrollBar](ScrollBar.md) 滚动条 - [ScrollBar](ScrollBar.md) 滚动条

View File

@ -4,203 +4,202 @@
namespace ui 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) 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)
{ {
if (srName == _T("circular")) SetCircular(strValue == _T("true")); //目前IRenderContext还有很多GDI+接口未实现暂时直接用gdi+画图了
else if (srName == _T("circlewidth")) SetCircleWidth(_ttoi(strValue.c_str())); //以后可能会调整需实现1、DrawArc 2、Pen增加brush(渐变)入参 3、可以自由设置Graphics属性
else if (srName == _T("indicator")) SetIndicator(strValue); int direction = m_bClockwise ? 1 : -1; //旋转方向
else if (srName == _T("clockwise")) SetClockwiseRotation(strValue == _T("true")); int bordersize = 1; //弧度宽度目前使用1像素
else if (srName == _T("bgcolor")) {
LPCTSTR pValue = strValue.c_str(); Gdiplus::Graphics graphics(pRender->GetDC());
while (*pValue > _T('\0') && *pValue <= _T(' ')) pValue = ::CharNext(pValue); graphics.SetSmoothingMode(Gdiplus::SmoothingModeAntiAlias);
SetBackgroudColor(pValue); Gdiplus::Pen bgPen(m_dwBackgroundColor, m_nCircleWidth);
} // 圆形中心
else if (srName == _T("fgcolor")) { CPoint center;
LPCTSTR pValue = strValue.c_str(); center.x = m_rcItem.left + (m_rcItem.right - m_rcItem.left) / 2;
while (*pValue > _T('\0') && *pValue <= _T(' ')) pValue = ::CharNext(pValue); center.y = m_rcItem.top + (m_rcItem.bottom - m_rcItem.top) / 2;
SetForegroudColor(pValue);
// 控件矩形内的最大正方形的边界
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 if (srName == _T("gradientcolor")) { else
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+画图了 outer.Inflate(-0.5 * m_nCircleWidth, -0.5 * m_nCircleWidth);
//以后可能会调整需实现1、DrawArc 2、Pen增加brush(渐变)入参 3、可以自由设置Graphics属性 }
int direction = m_bClockwise ? 1 : -1; //旋转方向 outer.Inflate(-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) if (m_dwGradientColor == 0)
{ {
//不使用渐变色,直接用前景色铺满 //不使用渐变色,直接用前景色铺满
Gdiplus::Pen fgPen(m_dwForegroundColor, m_nCircleWidth); Gdiplus::Pen fgPen(m_dwForegroundColor, m_nCircleWidth);
graphics.DrawArc(&bgPen, outer, 270, 360); //270从最上面开始递增设为0的话是最右边开始 graphics.DrawArc(&bgPen, outer, 270, 360); //270从最上面开始递增设为0的话是最右边开始
graphics.DrawArc(&fgPen, outer, 270, direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin)); graphics.DrawArc(&fgPen, outer, 270, direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin));
} }
else else
{ {
Gdiplus::REAL factors[4] = { 0.0f, 0.4f, 0.6f, 1.0f }; 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::REAL positions[4] = { 0.0f, 0.2f, 0.8f, 1.0f };
Gdiplus::LinearGradientBrush lgbrush(rcBorder, m_dwForegroundColor, m_dwGradientColor, Gdiplus::LinearGradientModeVertical); Gdiplus::LinearGradientBrush lgbrush(rcBorder, m_dwForegroundColor, m_dwGradientColor, Gdiplus::LinearGradientModeVertical);
lgbrush.SetBlend(factors, positions, 4); lgbrush.SetBlend(factors, positions, 4);
graphics.DrawArc(&bgPen, outer, 270, 360); graphics.DrawArc(&bgPen, outer, 270, 360);
Gdiplus::Pen fgPen(&lgbrush, m_nCircleWidth); Gdiplus::Pen fgPen(&lgbrush, m_nCircleWidth);
graphics.DrawArc(&fgPen, outer, 270, direction * 360 * (m_nValue - m_nMin) / (m_nMax - m_nMin)); 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() //画旋转指示器图标,需要用到矩阵
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)
{ {
__super::ClearImageCache(); 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) if (m_pIndicator)
{ {
delete m_pIndicator; delete m_pIndicator;
m_pIndicator = nullptr; m_pIndicator = nullptr;
} }
} std::wstring imagepath = m_sIndicatorImage;
if (!::PathFileExistsW(imagepath.c_str())) {
imagepath = GlobalManager::GetResourcePath() + m_pWindow->GetWindowResourcePath() + imagepath;
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);
}
} }
} if (!::PathFileExistsW(imagepath.c_str())) {
return;
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();
}
} }
} m_pIndicator = new Gdiplus::Image(imagepath.c_str());
void CircleProgress::SetCircleGradientColor(const std::wstring& strColor) Gdiplus::Status state = m_pIndicator->GetLastStatus();
{ if (Gdiplus::Ok == state)
m_dwGradientColor = GlobalManager::GetTextColor(strColor); {
ASSERT(m_dwGradientColor != 0); // 假定图片指向上
Invalidate(); 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();
}
}

View File

@ -13,71 +13,71 @@
namespace ui namespace ui
{ {
class UILIB_API CircleProgress : public Progress class UILIB_API CircleProgress : public Progress
{ {
public: public:
CircleProgress(); CircleProgress();
/// 重写父类方法,提供个性化功能,请参考父类声明 /// 重写父类方法,提供个性化功能,请参考父类声明
virtual void SetAttribute(const std::wstring& strName, const std::wstring& strValue) override; virtual void SetAttribute(const std::wstring& strName, const std::wstring& strValue) override;
virtual void PaintStatusImage(IRenderContext* pRender) override; virtual void PaintStatusImage(IRenderContext* pRender) override;
virtual void ClearImageCache() override; virtual void ClearImageCache() override;
/** /**
* @brief * @brief
* @param[in] bCircular true false true * @param[in] bCircular true false true
* @return * @return
*/ */
void SetCircular(bool bCircular = true); void SetCircular(bool bCircular = true);
/** /**
* @brief * @brief
* @param[in] bClockwise true false true * @param[in] bClockwise true false true
* @return * @return
*/ */
void SetClockwiseRotation(bool bClockwise = true); void SetClockwiseRotation(bool bClockwise = true);
/** /**
* @brief * @brief
* @param[in] nCircleWidth * @param[in] nCircleWidth
* @return * @return
*/ */
void SetCircleWidth(int nCircleWidth); void SetCircleWidth(int nCircleWidth);
/** /**
* @brief * @brief
* @param[in] strColor要设置的背景颜色字符串 global.xml * @param[in] strColor要设置的背景颜色字符串 global.xml
* @return * @return
*/ */
void SetBackgroudColor(const std::wstring& strColor); void SetBackgroudColor(const std::wstring& strColor);
/** /**
* @brief * @brief
* @param[in] strColor要设置的前景颜色字符串 global.xml * @param[in] strColor要设置的前景颜色字符串 global.xml
* @return * @return
*/ */
void SetForegroudColor(const std::wstring& strColor); void SetForegroudColor(const std::wstring& strColor);
/** /**
* @brief ForegroudColor同时使用, * @brief SetForegroudColor 使,
* @param[in] strColor要设置的前景渐变颜色字符串 global.xml * @param[in] strColor要设置的前景渐变颜色字符串 global.xml
* @return * @return
*/ */
void SetCircleGradientColor(const std::wstring& strColor); void SetCircleGradientColor(const std::wstring& strColor);
/** /**
* @brief * @brief
* @param[in] sIndicatorImage要设置的图片 * @param[in] sIndicatorImage
* @return * @return
*/ */
void SetIndicator(const std::wstring& sIndicatorImage); 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;
}; 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 } // namespace ui