DIRECT2D Tutorial (iii) Simple geometry

Starting with this chapter, we introduce the d2d geometry.

D2D Graphic Classification

DIRECT2D supports multiple types of geometries, including
Simple Geometry (easy geometry)

• Rectangular
• Rounded Rectangle
• Elliptic

Path Geometry (route graph)
Composite Geometry (Composite graphics)

• Geometry Group (drawing groups)
• Transformed Geometry (transformed graphics)

The D2D interfaces for various graphs are as follows, and all interfaces inherit from ID2D1Geometry.

• Rectangular-id2d1rectanglegeometry
• Rectangular-id2d1roundedrectanglegeometry with rounded corners
• Oval-id2d1ellipsegeometry
• Path Graph-id2d1pathgeometry
• Graphics Group-id2d1geometrygroup
• Transformed Graphics-id2d1transformedgeometry

Today we take a look at the simple geometry, other types of graphics will be introduced in subsequent chapters, the above simple graphics there are three, in fact, there is one, is the straight line, so the D2D currently supported by the following four of the simple graphics.

• Line-Linear
• Rectangle-Rectangular
• Rounded Rectangle-Rounded rectangle
• Ellipse-Oval

The following describes the drawing method of each drawing, and drawing a graph is done by invoking the corresponding drawing function with the render target object, so the following code assumes that the render target object has been created.

Linear

Draw a straight line using the function DrawLine, first look at the function definition, the first two parameters are straight line starting point and end point, the third parameter is a brush. The fourth parameter is the width of the line, the last parameter is the style of the line, than the line of truth, dashed line or other style, you can use the style provided by D2D, you can also define your own style. Since the last two parameters have default values, we usually provide only the first three parameters. The last two parameters appear in the following drawing functions.

virtual void DrawLine (    d2d1_point_2f point0,    d2d1_point_2f point1,    [in] ID2D1Brush *brush,    FLOAT Strokewidth = 1.0f,    [in, optional] id2d1strokestyle *strokestyle = NULL) = 0;

The following code draws a black line with the starting point (100, 100), and the end point is (500, 500).

Prendertarget->drawline (
D2D1::P oint2f (100.F, 100.F),
D2D1::P oint2f (500.F, 500.F),
Pblackbrush); rectangle

The rectangle is represented by the following structural body.

struct D2d_rect_f {
FLOAT left;
FLOAT top;
FLOAT right;
FLOAT Bottom;
};

Draw a rectangle using the function DrawRectangle, as defined below. The first parameter is the D2D1_RECT_F structure, which represents the rectangle to be drawn, which has already been mentioned in the other parameters and is not described.

void DrawRectangle (
[ref] Const D2d1_rect_f &rect,
[In] ID2D1Brush *brush,
FLOAT Strokewidth =1.0f,
[In, optional] Id2d1strokestyle *strokestyle = NULL
);

The following code draws a rectangle with the upper-left coordinate of the rectangle (100, 100), and the lower-right coordinate is (500, 500).

Prendertarget->drawrectangle (
D2D1::RECTF (100.F, 100.F, 500.F, 500.F),
Pblackbrush
); Rounded Rectangle

D2D supports rounded rectangles, first look at what rounded rectangles are.

The visible rounded rectangle is the revision of the normal rectangle, and the sharp angle can be replaced by an arc. So a rounded rectangle can be constructed from a normal rectangle with two radii, each representing the x and y axes of the ellipse, which is used to replace the sharp corners of the rectangle. The rounded rectangle is defined as follows: The first parameter is a regular rectangle, as described above, and the last two parameters are the x-axis radius and the y-axis radius of the ellipse, respectively.

D2d1_rounded_rect Roundedrect (
__in Const D2d1_rect_f &rect,
FLOAT RadiusX,
FLOAT RadiusY
);

The function definition of the rounded rectangle is as follows, the first parameter is a rounded rectangle, and the parameters are no longer appended.

void Drawroundedrectangle (
[ref] Const D2d1_rounded_rect &roundedrect,
[In] ID2D1Brush *brush,
FLOAT Strokewidth =1.0f,
[In, optional] Id2d1strokestyle *strokestyle = NULL
);

The following code draws a rounded rectangle whose upper-left coordinate is (100, 100), and the lower-right coordinate is (500, 500). The x-axis radius of the fillet is the 30,y axis radius is 50.

D2d1_rounded_rect Roundedrect = D2d1::roundedrect (
D2D1::RECTF (100.F, 100.F, 500.F, 500.F),
30.0f,
50.0f);
Prendertarget->drawroundedrectangle (Roundedrect, Pblackbrush, 1.0f); ellipse

The ellipse is defined by the structure shown below, the first parameter is the center of the ellipse, and the second two parameters are the x-axis radius and the y-axis radius.

struct D2d1_ellipse {
D2D1_POINT_2F Point;
FLOAT RadiusX;
FLOAT RadiusY;
};

The function of the ellipse is defined as follows

void DrawEllipse (
[ref] Const D2d1_ellipse &ellipse,
[In] ID2D1Brush *brush,
FLOAT Strokewidth =1.0f,
[In, optional] Id2d1strokestyle *strokestyle = NULL
);

The following code draws an ellipse, centered at (100, 100), with a long axis radius of 100, and a short axis radius of 50.

D2d1_ellipse ELLIPSE = D2d1::ellipse (d2d1::P oint2f (100.0f, 100.0f), 100.0f, 50.0f);
Prendertarget->drawellipse (ellipse, pblackbrush); triangles

D2D does not provide a function to draw triangles, but we can use the DrawLine function to implement one yourself, the code is simple, for a given three vertices, the above drawline function is called between each of the two vertices.

void Drawtriangle (d2d1_point_2f p0, d2d1_point_2f p1, d2d1_point_2f p2,
Id2d1hwndrendertarget* Prendertarget,
id2d1brush* Brush,
FLOAT Strokewidth =1.0f,
Id2d1strokestyle *strokestyle = NULL)
{
Prendertarget->drawline (P0, p1, brush);
Prendertarget->drawline (P1, p2, brush);
Prendertarget->drawline (P2, p0, brush);
}Round

D2D also does not provide a function to draw a circle, because the circle is a special ellipse that can be achieved by drawing an ellipse's function, as long as the x-axis radius and the y-axis radius are equal.

void Drawcircle (d2d1_point_2f center, FLOAT radius,
Id2d1hwndrendertarget* Prendertarget,
id2d1brush* Brush,
FLOAT Strokewidth =1.0f,
Id2d1strokestyle *strokestyle = NULL)
{
D2d1_ellipse ELLIPSE = d2d1::ellipse (center, RADIUS, radius);
Prendertarget->drawellipse (ellipse, brush);
}The width of the line

Each drawxxx function has a parameter strokewidth, which represents the width of the line, This function has a default value of 1.0, so we usually do not need to specify this parameter, but if you want to make the line wider, then can be set to 10.0, 100.0 and so on, then how this width growth? Does it affect the size of the graph?

Through the actual drawing found that the width is outward growth, that is, the width of the line does not affect the shape of the fill area, such as a 10 x rectangle, when the line width is 1.0, its fill area is 100, when the line width is 10 o'clock, its fill area or 100. See, Black is the line color, yellow is the fill color, visible no matter how wide the line, the area of the yellow area is always the same. So strokewidth does not affect the fill area of the graph.

Happy Coding!!!

= = the END = =

DIRECT2D Tutorial (iii) Simple geometry