Search code examples
winapigdi

Why doesn't the RoundRect path with gradient fill produce the correct corners on right side?

I came up with a routine to create a gradient filled rounded rectangle (button), however if I omit the code that writes the outline, the lower-right corner looks square and the upper-right seems to be not quite right either . Why is that?

note: The owner-draw button was created 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);
}

The red in the pics show the background.

Good Button

Bad Button

The bad button is generated when the WidenPath section is removed.

Solution

  • According to your description, I think you may be talking about this situation.

        BeginPath(dis.hDC);
//  RoundRect(dis.hDC, dis.rcItem.left, dis.rcItem.top, dis.rcItem.right, dis.rcItem.bottom, 6, 6);
    EndPath(dis.hDC);

    1

    Let me first analyze the reason why I got this shape.

    When you redraw the button, if the length and width of the redrawn button are smaller than that of the button itself, only a part of the redrawn will occur.

    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);
}

    In order to see the effect more clearly, I will widen the width and height.

    If I omit the code that writes the outline, It only executes the following code to implement the gradient.

    // fill the DC with a vertical gradient 
    GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);

    If I change the XY coordinates of the redrawing.

    2

    Actually, when you disable RoundRect, the only thing that works is GradientFill.

    Updated:

    The redrawn area is based on rcItem. When you draw a path, it's only the inside area that is considered and the outline is not, so WidenPath then goes on the outline and that gives the true routed rect area.