winapi - 为什么带有渐变填充的 RoundRect 路径不能在右侧产生正确的角?
问题描述
我想出了一个创建渐变填充圆角矩形(按钮)的例程,但是如果我省略编写轮廓的代码,右下角看起来是方形的,而右上角似乎也不完全正确。这是为什么?
注意:所有者绘制按钮是 23x23 创建的。
//-------------------------------------------------------------------------
// Purpose: Draw a rounded rectangle for owner-draw button
//
// Input: dis - [i] owner-draw information structure
// undermouse - [i] flag if button is under mouse
//
// Output: na
//
// Notes: This creates a standard grey type rounded rectangle for owner
// drawn buttons.
//
// This routine does not currently use undermouse to change
// gradient
//
void DrawRoundedButtonRectangle(const DRAWITEMSTRUCT& dis, BOOL undermouse)
{
UNREFERENCED_PARAMETER(undermouse);
// save DC before we modify it.
SaveDC(dis.hDC);
// create a path for the round rectangle (right/bottom is RECT format of +1)
BeginPath(dis.hDC);
RoundRect(dis.hDC, dis.rcItem.left, dis.rcItem.top, dis.rcItem.right, dis.rcItem.bottom, 6, 6);
EndPath(dis.hDC);
// save DC before changing clipping region
SaveDC(dis.hDC);
// set clipping region to be the path
SelectClipPath(dis.hDC, RGN_COPY);
TRIVERTEX vertices[2];
// setup the starting location and color (light grey)
vertices[0].x = dis.rcItem.left;
vertices[0].y = dis.rcItem.top;
vertices[0].Red = MAKEWORDHL(211, 0);
vertices[0].Green = MAKEWORDHL(211, 0);
vertices[0].Blue = MAKEWORDHL(211, 0);
vertices[0].Alpha = 0xffff;
// setup the ending location and color (grey)
vertices[1].x = dis.rcItem.right; // should this be -1 ?
vertices[1].y = dis.rcItem.bottom; // should this be -1 ?
vertices[1].Red = MAKEWORDHL(150, 0);
vertices[1].Green = MAKEWORDHL(150, 0);
vertices[1].Blue = MAKEWORDHL(150, 0);
vertices[1].Alpha = 0xffff;
// setup index to use for left to right
GRADIENT_RECT r[1];
r[0].UpperLeft = 0;
r[0].LowerRight = 1;
// fill the DC with a vertical gradient
GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);
// go back to original clipping area
RestoreDC(dis.hDC, -1);
// change the path to be the outline border
if (WidenPath(dis.hDC)) {
// set clipping region to be the path
SelectClipPath(dis.hDC, RGN_COPY);
// create a gradient on the outline
GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);
}
// put back the DC as we received it
RestoreDC(dis.hDC, -1);
}
图片中的红色显示背景。
删除该WidenPath
部分时会生成错误按钮。
解决方案
根据你的描述,我想你说的可能是这种情况。
BeginPath(dis.hDC);
// RoundRect(dis.hDC, dis.rcItem.left, dis.rcItem.top, dis.rcItem.right, dis.rcItem.bottom, 6, 6);
EndPath(dis.hDC);
我先分析一下我得到这个形状的原因。
重绘按钮时,如果重绘按钮的长宽比按钮本身的小,则只会发生部分重绘。
case WM_CREATE:
{
//Button width:230 Button height:230
button = CreateRoundRectButton(hWnd, 500, 200, 230, 230, 30, 30, BTN_ID);
return 0;
}
break;
case WM_DRAWITEM:
{
DRAWITEMSTRUCT dis;
dis.CtlType = ODT_BUTTON;
dis.CtlID = BTN_ID;
dis.hDC = GetDC(button);
dis.rcItem.left = 0;
dis.rcItem.top = 0;
dis.rcItem.right = 200; //Width of redrawing
dis.rcItem.bottom = 200; //Height of redrawing
DrawRoundedButtonRectangle(dis, TRUE);
}
为了更清楚地看到效果,我将宽度和高度加宽。
如果我省略了写大纲的代码,它只执行下面的代码来实现渐变。
// fill the DC with a vertical gradient
GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);
如果我更改重绘的 XY 坐标。
实际上,当您禁用 时RoundRect
,唯一有效的是GradientFill
.
更新:
重绘区域基于rcItem
. 当您绘制路径时,仅考虑内部区域而不考虑轮廓,因此WidenPath
继续绘制轮廓并给出真正的布线rect
区域。
推荐阅读
- python - 为什么 Python 3.6 中的字符串索引比 NumPy 索引慢 10 倍?
- c++ - 当我平均整数时丢失了多少信息?
- ruby-on-rails - 如何在rails中运行和提取mysql查询数据
- javascript - ExpressJS 下面是什么?
- apache-spark - Pyspark - 如何处理源文件中的'^M'字符
- node.js - 我将如何通过我的不和谐机器人上的 1 个命令中的链接执行另一个命令?
- c++ - C++ 中模板类的部分特化方法中的 std::enable_if
- rest - 谷歌 Firestore REST API
- html - Selenium 中的 Web 表:使用条件从父元素访问子元素
- python-3.x - HyperParameterTuning 作业的 Sagemaker 错误