Help with Canvas.Arc

 You will not be able to do that with a simple statement like Arc.  I am considering 4 arc statements and a couple of moveto lineto combinations for the top and bottom lines.  Many time there will be a bitmap or icon that is used to get the left side and right side the way you want (perhaps 4 corners) with connecting lines being handled to allow resizing.

  If you will provide a bitmap image then  I will know that I am not seeing compression loss and be able to accurately reproduce what you have.  I would also like to know if you need this to be able to resize.

Let me know

This is for a button style component so it needs to be resizable meaning I need to be able to pass it coords for drawing. If at all possible, I really just need the arc code, I can handle the rest.

Below is a resize that has no degradation.

The coords on the image are just examples that basically define the way the arc should be drawn.

You have another PNG... is there no way to get a bitmap on here?  I am seeing all the fuzziness around the edges and doubting it is actually that way.  It looks like the PNG compression is effectively doing an antialias operation.  If that is exactly how you want the pixels to look, I can accomodate... I just need to know.  The bitmap is the best way for me to see precisely what you want.  It should be all down hill from there.

A resized Bitmap was just as bad than PNG.

 I have a start on it.  I created a form with a paint box on it as this is very useful for initial testing.  I made the paint box your original size (78 x 32).  I started by filling in the background color (the one outside your area).  I then did the top and bottom bar.  Then I did the left and right side bar (they smoothly transition from the top to the bottom as in your example.  the only piece left is to set the individual pixels to the values that you have in the arc'ed areas (the 4 corners).  I also added a FillRect command to to an internal rect with the internal background color (this would change to a flood fill in the final version, after the corners have been drawn).  You may want to experiment using two arc commands on each corner (one within the other to produce a drop shadow like effect) instead of doing the pixel by pixel setting.  It would not look quite as good, but you have an idea of your options there now.  If you want I will provide more code to show corners.  I also made the paint box anchored right and bottom so it will expand if I expand the form.  That makes it easy to test what it will look like at different sizes.

  By the way I am using GIMP to help with color comparisons.  I am able to load your bitmap and have it identify individual colors for me.  Within the color tool in GIMP there is a web color ID which is hex.  This number need to be put into the Delphi code backwards (010203 would become 030201 to get the same color).    With an [Alt][Print Screen] I can move a screen shot  into GIMP, magnify, and compare.

  Let me know if you think this is enough to get you started.  The ColorTransition function is not optimized, just quick and dirty.  There are redundant calls to functions in there that could be assigned to local variables, etc.  I just wanted it to be as straight forward as I could.

unit frmMain;
 
interface
 
uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls;
 
type
  TForm1 = class(TForm)
    PaintBox1: TPaintBox;
    procedure PaintBox1Paint(Sender: TObject);
  private
    { Private declarations }
    function ColorTransition(Step, Total : integer; First,
      Last : TColor) : TColor;
  public
    { Public declarations }
  end;
 
var
  Form1: TForm1;
 
const
  InsideBackground : TColor = $b6bdc0; //c0bdb6
  OutsideBackground : TColor = $c8d0d4; //d4d0c8
  TopVertical : TColor = $b2babd; //bdbab2
  BottomVertical : TColor = $d6dbde; //dedbd6
  TopBar : TColor = $909598; //989590
  BottomBar : TColor = clWhite;
 
implementation
 
{$R *.dfm}
 
function TForm1.ColorTransition(Step, Total: integer; First,
  Last: TColor): TColor;
var
  Transition : single;
  RD, GD, BD : integer;
  RT, GT, BT : integer;
 
begin
  Transition := Step / Total;
  RD := GetRValue(Last) - GetRValue(First);
  GD := GetGValue(Last) - GetGValue(First);
  BD := GetBValue(Last) - GetBValue(First);
 
  RT := Trunc(RD * Transition);
  GT := Trunc(GD * Transition);
  BT := Trunc(BD * Transition);
 
  Result := RGB(GetRValue(First) + RT, GetGValue(First) + GT,
    GetBValue(First) + BT);
end;
 
procedure TForm1.PaintBox1Paint(Sender: TObject);
var
  TopBarY, BottomBarY : integer;
  HBarLeft, HBarRight : integer;
  VerticalBarTop, VerticalBarBottom : integer;
  VerticalBarLeft, VerticalBarRight : integer;
  I : integer;
 
begin
  with PaintBox1, Canvas do
    begin
      //get the math out of the way
      TopBarY := 2;
      BottomBarY := Height - 2;
      HBarLeft := 5;
      HBarRight := Width - 5;
      VerticalBarTop := 11;
      VerticalBarBottom := Height - 11;
      VerticalBarLeft := 0;
      VerticalBarRight := Width - 1;
 
      //background color
      Brush.Color := OutsideBackground;
      FillRect(Rect(0, 0, Width, Height));
 
      //top Bar
      Pen.Color := TopBar;
      MoveTo(HBarLeft, TopBarY);
      LineTo(HBarRight, TopBarY);
 
      //bottom bar
      Pen.Color := BottomBar;
      MoveTo(HBarLeft, BottomBarY);
      LineTo(HBarRight, BottomBarY);
 
      //left vertical
      for I := VerticalBarTop to VerticalBarBottom do
        Pixels[VerticalBarLeft, I] := ColorTransition(I - VerticalBarTop,
          VerticalBarBottom - VerticalBarTop + 1, TopVertical, BottomVertical);
 
      //right vertical
      for I := VerticalBarTop to VerticalBarBottom do
        Pixels[VerticalBarRight, I] := Pixels[VerticalBarLeft, I];
 
      //fill the interior
      Brush.Color := InsideBackground;
      FillRect(Rect(8, 8, Width - 8, Height - 8));
    end;
end;
 
end.
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:

It doesn't have to be pixel for pixel color-wise. I also didn't see any arc in this at all, even when I resized it.
The problem is that I don't know the coords I need to pass to the arc function to make the arc on the left and right sides of the image. I don't care what color they are or that they are anti-aliased.

I am really trying to create a buttno control like the Next/Prev buttons in FireFox3 at the top left.

Ok, the example I gave you did not do the arcs.  I wanted to emphasize what was needed overall (including the fade that was done on the sides) while clarifying if you wanted to see an exact reproduction.  The one remaining question is this: Do you want to have a good shadow effect like the one you showed me or do you want me to just add simple arc statements that will complete what I gave you (in a flat manner)?  Perhaps you will want me to show the arc statements, then make the choice?

Currently the Arc areas are a set size so you can use the precise pixels to reproduce what you showed me.  You would need to have a minimum size if you wanted a pixel by pixel (drawn) effect like you currently see.  If you want to use the Arc statement and allow the area used for the arc to change size, that will greatly change what is needed.

At the same time, if you do not need the fade on the sides then it could be removed and done in a flat manner.

Let me know.

It will be done in a manner to show a 3D effect, I just need the coords for drawing the 4 arcs. I know that they run in counter-clockwise path and need to do them correctly, however, I cannot compute the bounding rect or the ellipse that is needed to get the coords for the Arc calls.

Geometry and Calculus were not my strong points in school...

OK, I think I may have some of it now.

The bounding rectangle for the ellipse is 77X77 from 0,-25 to 77, 52, the center of the circle is at 39,14
The angle to the first point at top, left is 291.3° the angle to the second point at bottom, left is 248.2°
The angle to the third point at top, right is 68.7° and the angle to the fourth point at bottom, right is 111.3°

I still don't know what the values need to be for the arc. The first two sets of coords are easy, they define the bounding rect of the ellipse which would be 0,-25 and 77,52, however, these are what are confusing me:
"The starting point is defined by the intersection of the ellipse and a line defined by the center of the ellipse and (X3,Y3). The ending point is defined by the intersection of the ellipse and a line defined by the center of the ellipse and (X4, Y4)"

What would X3,Y3 and X4,Y4 be for this ellipse and the points 5,2 and 5,30? It doesn't look correct when I use
5,2 and 5,30.

Here is how I came about those values:

You will need to view it as 4 separate ellipses.  Each ellipse will have a bounding rectangle the width and height of the ellipse you want to create.  So, the bounding rectangle of the upper left corner would be based on two points, the left of the top bar and the top of the left bar.  The bounding rectangle would be from 0, 0 to twice the x of the top point and twice the y of the left point.  Then all you need to do is use the last 4 coordinates of the arc command to cut off the portion you do not want.

Part of the reason to do it this way is to make it scale easier if you want the corners to be bitmapped.  If you do not care about left and right side bars then you can do two ellipses one on the left and one on the right.  The bounding rectangles for these would be the full height of the area and the width would be twice the distance from the edge to the top of the ellipse.

I mention both views to give you the options.  Personally I would take the first option since it give you greater flexibility in making the drop shadow look right.  I strongly suspect the you will not be plesed with the drop shado look using the second aproach.  Using the first approach with the 4 separate ellipses (one arc statement for each plain and two each for drop shadow effects) will allow you to change the inner and outer colors per corner.

Sorry I will not have time to look into this for the next couple of days, but I should be able to put up an example then.

I got some code from Peter Below but it does not draw correctly and if I revise
it to use coords of a particular rectangle, it just doesn't work correctly.

  CV.Pen.Color := clRed;
  CV.Arc(0, -25, 77, 52, 0, 14, 5,30);
  CV.Pen.Color := clLime;
  CV.Arc(0, -25, 77, 52, 5, 2, 0,14);
  CV.Pen.Color := clAqua;
  CV.Arc(0, -25, 77, 52, 77, 14, 74,2);
  CV.Pen.Color := clBlack;
  CV.Arc(0, -25, 77, 52, 74, 30, 77,14);
                                              

1:
2:
3:
4:
5:
6:
7:
8:

I will say that he answered my questions of what do the x3,y3,x4,y4 mean in relation to x1,y1,x2,y2.