Silverlight computer graphics 1 Basics

First: Line (the line is determined by two coordinates on the slope line)
Painting Slope 0 ≤ K ≤ 1 Straight line Bresenham Draw lineAlgorithmOf C LanguageProgram:
Void bresenhamline (INT x0, int y0, int X1, int Y1, long color)
{
Int X, Y, dx, Dy;
Float K, E;
DX = x1-x0;
DY = Y1-y0;
E =-0.5;
X = x0;
Y = y0;
If (dx = 0)
{
For (I = 0; I ≤ dy; I ++)
{
Drawpixel (X, Y + I, color); // draw pixels (X, Y + I)
}
Return;
}
K = Dy/dx;
For (I = 0; I ≤ DX; I ++)
{
Drawpixel (X, Y, color); // draw pixels (x, y)
X ++;
E + = K;
If (e ≥ 0)
{
Y ++;
E --;
}
}
}

First consider the slope k = Dy/dx ≤ 1 . 2.1 As shown in, set a straight line Equation: , Where, K = Dy/dx . Assume that the current Pixel X The coordinates have been determined XI , Its Y Coordinates are Yi , Because the coordinates ( XI , Yi )( I = 0, 1, ...) Only integers are allowed. X Coordinates , And Yi + 1 There are two possible coordinates:
1) Remain unchanged, that is Y I + 1 = Yi ; Or

2) Y Increasing coordinates 1, That is Y I + 1 = Yi + 1 .
Ling , Y Add coordinates? 1 Depends on the error item D I . Because the starting point of the straight line is in the pixel center, the initial error is D0 = 0 . X Each increase 1, Y The slope value of the corresponding increment straight line K , That is . Once Di + 1 ≥ 1 And then subtract it. 1 To ensure Di + 1 In 0 ~ 1 . When D I + 1 ≥ 0.5 Time, straight line And X= XI + 1 The vertical line intersection of is closest to the current pixel ( XI , Yi In the upper-right corner ( XI + 1 , Yi + 1 ). D I + 1 <0.5 The intersection is closer ( XI , Yi ) The right pixel ( XI + 1, Yi ). To facilitate computing E0 = - 0.5 , E I + 1 = Di + 1 - 0.5 , The increment is K . When EI + 1 ≥ 0 The current pixel ( XI , Yi In the upper-right corner ( XI + 1 , Yi + 1 ). E I + 1 <0 Is closer to the right pixel ( XI + 1 , Yi ).

Basic knowledge of the second circle

Without losing its universality, supposeThe center of the circle is located at the coordinate origin (if the center is not located at the origin, it can overlap with the origin through coordinate translation), the radius isR. Circle centered around the originCThere are four axes of symmetry:X = 0, y = 0, x = yAndX =-y. If the point above the arc is knownP1=C(X,YBy using its symmetry, you can obtain other information about the four symmetric axes.7Points, namely:
P2=C(X,-Y),

P3=C(-X,Y),

P4=C(-X,-Y),

P5=C(Y,X),

P6=C(-Y,X),

P7=C(Y,-X),

P8=C(-Y,-X).

This kind of property is called the eight symmetry. Therefore, the entire circle can be obtained through the eight symmetry of the arc as long as the scanning and conversion of the 1/8 arc.
For convenience, consider the 1/4 arc in the First quadrant. If (0,R) Generates a circle from the clockwise direction for the start point, which is within the first quadrant.YYesXMonotonic decreasing function.Assume that the center of the circle and the start point are precise on the pixel center.
If you already know a point on the arc(X, y)There are three possible options for selecting the next pixel: right-side pixel, right-side pixel, and right-side pixel.H, dAndVIndicates,2.2. The squared deviation of these three pixels is:

.

Ling
,
.

If, Indicating the arcDThe distance to the pixel is greaterHDistance to the pixel, so the next pixel should beHForward pixel (XI + 1,Yi); Otherwise, the next pixel should beDForward pixel (XI + 1,Yi-1). After further analysis, we can get:
For example, the left formula (2-2-1)
For example, the left formula (2-2-2)

We can select the next pixel as the best approximation point of the arc according to the following rules:

At that time, if so, it will be taken as the next pixel, otherwise D will be taken as the next pixel. WhenIfDIs the next pixel. OtherwiseVIs the next pixel; WhenTime AcquisitionDIs the next pixel.

To increase the computing speed, we canOnly adding, subtraction, and shift (that is, multiply2) The recursive formula for the operation is as follows:
A)
B)
C)
It can be seen that the bresenham circle algorithm can be fully realized by adding, subtraction, and shifting operations. And improved breLike senham, bresenham draws circles.AlgorithmIt is widely used because of its high speed and efficiency.

3. elliptic

 Draw an ellipse

The non-parametric equations of the oval center at the origin and axis are as follows:
.
The above formula can be expressed as an implicit equation:

Due to the symmetry of the elliptic, only the elliptical arc in the First quadrant can be considered. The formula for calculating the normal vectors of an elliptical arc is as follows:

A point with a slope of-1 on an elliptical arc is divided into the upper and lower parts, as shown in Figure 2.3. In the preceding section (area 2), the y direction component of the normal vector is large. When selecting a pixel, the increment △y is important. In the following section (area 1), the X component of the normal vector is large, when selecting a pixel, the increase of △x is important. Next we will discuss it separately.
In area 2, set the current position as a vertex, And the next possible vertex is pixel H.And DIn this case, the discriminant can be constructed:

If<0 indicates that the midpoint of the pixel h and D is in the elliptical area, and H is the next pixel.> = 0 indicates that the point of the H and D of the pixel is out of the elliptic. In this case, D should be taken as the next pixel. Therefore, for the elliptical arc in area 2, we can select the next pixel as the best approximation point of the elliptical arc according to the left rule:

Rules for drawing an elliptical arc:

IfHIs the next pixel.

The new discriminant is:

.

Otherwise, FetchDIs the next pixel, that is

The new discriminant is:

.

For regions1In the same way:

IfSelect the coordinates of the next pixel

The new discriminant is:

.

OtherwiseSelect the coordinates of the next pixel

The new discriminant is:

.

For itsIt has three imagesLimitations of the elliptical arc, can be obtained by using symmetry.

 

Other Curves

The general equation of the quadratic curve is

Ling
,
We can classify quadratic curves:

	Elliptical or circular arc;
	Parabolic;
	Hyperbolic.

The quadratic curve can also be expressed:

If so, r (t) is a parabolic curve; at that time, r (t) is a hyperbolic curve; at that time, r (t) is an elliptic.

We can use the preceding method to raster the oval and arc shapes. For the hyperbolic curve, we can use the difference method to display the grating image.
For Polynomial Curves f (x, y) of three or more times = 0, a recursive space sub-segmentation algorithm can be used to display grating images. The basic idea is: first establish a vertex (

,

) And (

,

). If f (x, y) = 0 is used to enclose the box, and the size of the box is greater than one pixel, subdivide the box, the color of the given curve is output until the box contains only one pixel. If the f (x, y) of the curve is 0, the box is displayed with the background color, and ignore the processing.
 

RegionFill

1) Polygon
A series of straight line segments connected at the beginning and end are called polygon. If two points are randomly selected in a polygon, all points on the link are within the polygon. Such polygon is called a convex polygon. Otherwise, it is called a concave polygon.

2) Seed Filling Algorithm
The seed filling algorithm is also called the boundary filling algorithm. The basic idea is: Starting from an interior point in the Polygon Area, draw the colored points from the inside to the outside until the border is reached. If the boundary is specified in a color, the seed filling algorithm can process the boundary pixel by Pixel until it encounters the boundary color.
The Seed Filling Algorithm is usually used to fill in the four-connected and eight-connected domains.
Starting from any point in the area, any pixel in the area is reached through four directions: top, bottom, left, and right. The area filled with this method is called a four-connected domain; This filling method is called a four-direction connection algorithm.
Start from any point in the area and reach any pixel in the area through the top, bottom, left, right, right, top right, top left, bottom left, and bottom right directions. The areas filled with this method are called the eight-connected domain. This filling method is called the eight-direction connection algorithm.
Generally, the eight-direction connection algorithm can fill the four-direction connection area, while the four-direction connection algorithm sometimes cannot fill the eight-direction connection area. For example, the eight-direction connection filling algorithm can correctly fill the interior of the area shown in 2.4a, while the four-direction connection filling algorithm can only partially fill 2.4b.

Figure 2.4 4-link Filling Algorithm

A) connected domain and its interior point	B) Fill in four connected Domains

Four-direction connection Filling Algorithm:
A) The seed pixels are pushed into the stack;
B) if the stack is empty, convert it to e); otherwise, convert it to C );
C) A pixel is displayed, and the pixel is set to fill color. Then, determine whether the adjacent four connected pixels of the pixel are boundary colors or have been filled with polygon colors. If not, this pixel is pushed into the stack;
D) To B );
E) end.
The following is a recursive function that can be used to fill a four-way connection:

Algorithm 2.3 Four-link recursive Filling Algorithm:
Void boundaryfill4 (int x, int y, long filledcolor, long boundarycolor)
{
Long currentcolor;
Currentcolor = getpixelcolor (x, y );
If (currentcolor! = Boundarycolor & currentcolor! = Filledcolor)
{
Setcolor (filledcolor );
Setpixel (x, y );
Boundaryfill4 (x + 1, Y, filledcolor, boundarycolor );
Boundaryfill4 (x-1, Y, filledcolor, boundarycolor );
Boundaryfill4 (X, Y + 1, filledcolor, boundarycolor );
Boundaryfill4 (x, Y-1, filledcolor, boundarycolor );
}
}

The advantage of the above algorithm is that it is very simple. The disadvantage is that it requires a lot of stack space to store adjacent points. An improved method is to fill the horizontal pixel segment along the scanning line to process four or eight connected adjacent points. In this way, only the starting position of each horizontal pixel segment needs to be pushed to the stack, it does not need to push adjacent pixels that have not been processed around the current position into the stack, thus saving a lot of stack space.

3) Other filling Algorithms
The scanning line Filling Algorithm is another common polygon filling algorithm. The basic idea is: for a given polygon, scan with a set of horizontal or vertical scanning lines to find the intersection between each scanning line and the polygon, the intersection points are split into lines that fall inside and outside the polygon, and will fall into all lines inside the polygon.EachThe pixels are colored with the given polygon. For more information about the algorithm, see Chapter 1 "hide and hide ".

Dot Matrix and vector

Lattice characters
In the dot matrix font, each character is represented by a bitmap (as shown in Figure 2.5) and expressed in a matrix called a character mask. Each element is a binary number, if this bit is 1, it indicates that the stroke of the character passes through this bit, And the pixel is set to the color of the character. If this bit is 0, it indicates that the stroke of the character does not pass this bit, set this pixel to the background color. The display of dot matrix characters is divided into two steps: first, retrieve the bitmap from the font library, and then write the retrieved bitmap to the frame buffer.
In practical applications, the same character has multiple fonts (such as and ), and each font has multiple sizes and models. Therefore, the storage space of the font is very large. Compression Technology is generally used to reduce storage space.

Figure 2.5-character Dot Matrix Representation and vector contour Representation

,
2) vector character
A vector character records the stroke information of a character rather than the entire bitmap. It has the advantages of small storage space, beautiful appearance, and convenient conversion. For example, in AutoCAD, a vector character is defined using a graphical entity-shape (SHAPE), where a straight line and an arc are used as the basic Pen Painting to describe vector characters.
for geometric transformations such as rotation, amplification, and reduction of characters, each pixel in the bitmap must be transformed for dot matrix characters, vector characters only need to transform their geometric elements. For example, to transform the two endpoints of a linear stroke, converts the starting point, endpoint, radius, and center of an arc.
vector characters are displayed in two steps. First, set the character information from the font. Then, the endpoint coordinates are taken out, and corresponding geometric transformations are performed on them. Then, characters are displayed based on the signs of each endpoint.
the contour method is one of the most popular character representation methods in the world. It has a high compression ratio and ensures character quality. The contour method uses a set of straight lines, B-spline, and bezr curves to describe the contour of a character. Outlines form one or more closed flat areas. Adding control information such as horizontal width, vertical width, baseline, and so on to the contour definition constitutes character compression data.

basic anti-sample of grating images

the straight line images generated by the bresenham linear algorithm are generally displayed in a step (see figure 2.1). In fact, this is a form of raster graphics. This walk-out is caused by the use of discrete numbers to represent continuous quantities. In general, we call the distortion caused by the discrete amount representing the continuous amount as a walk-through. The technology that reduces or overcomes the walk-through effect is called the anti-walk-through technology, or the Anti-walk-through technology for short.
the following types of raster images are displayed:
A. Generate a step or a saw tooth shape;
B. Distortion of details or textures;
C) small images are lost.
d) Real-time animations are flickering and jumping.
unexpected results may occur when the sample is serious. For example, consider the signals shown in Figure 2.6 A) and B. They are completely different sets of signals that sample them at the same frequency (see the black spots in Figure 2.6 ), the signal after reconstruction is the same. Figure 2.6 C) or D) is the sample of the signal in Figure 2.6 A, which is also the sample of the signal in Figure 2.6 B. The reason for this error is that the sampling frequency is too low. According to the sampling theorem, the sampling frequency should be at least twice the highest signal frequency to avoid sample walk. For a graphic object smaller than the pixel size, on the one hand, if it fails to overwrite the midpoint of the pixel used to calculate its attribute, the object will not be displayed; on the other hand, if it overwrites the point in the pixel that is used to calculate its attribute, it does not properly represent the attribute of the entire pixel. Figure 2.7 is an example. When a group of long polygon shown in Figure 2.7 A is displayed on the grating device, this pixel is displayed only when the pixel center is covered by these rectangles, as a result, small images are lost and the image details are distorted, as shown in result 2.7 B. In the animation sequence, this pattern can cause the image to appear and flash. Figure 2.8 shows three pictures in a small cartoon animation sequence. If the attribute of a pixel is determined by its center, the cartoon is invisible in the first frame, but invisible in the third frame. In this way, the cartoon people don't feel that they are moving slowly, but are flickering.
in order to improve the image quality, we must overcome or reduce the pattern. This is the focus of this study.
there are two main anti-Sample Methods for raster images:

The first type is supersampling or post-filtering. The basic idea of this type of algorithm is to improve the resolution. Although the use of high-resolution grating graphics display is also an option, it is subject to objective conditions and economic. Therefore, we often adopt the software implementation method, that is, dividing low-resolution image pixels into many sub-pixels, calculate the color value or gray value of each sub-pixel at a high resolution, and then use an average algorithm, the color value or average gray value of each sub-pixel in the original pixel is used as the color value or gray value displayed in the pixel and displayed on the grating graphics device with a lower resolution.

The second method is pre-filtering. That is, the pixel is treated as a finite area rather than a point with zero area.