为什么带有渐变填充的RoundRect路径不能在右侧产生正确的角？

Question

我想出了一个例程来创建渐变填充的圆角矩形（按钮），但是，如果我省略编写轮廓的代码，则右下角看起来是正方形，而右上角看起来也不是很正确。这是为什么？

注意：所有者绘制按钮创建为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部分时会生成错误的按钮。

Answer 1

根据您的描述，我认为您可能正在谈论这种情况。

    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布线区域。