[WPF] Making Materials in WPF-dispute over images and Vectors

If you want to make the following things as the background. What will you do?

Figure1.Target background Effect

Solution 1: UsePS. ThenPNGThe image as the background color. This solution is acceptable, but what if you want to make the color of this line configurable? How can I determine the line width? No matter what the problem is, pixel graphs are hard to solve.

Solution 2: UseWPF. This solution can easily solve the above two problems.

 

However, no matter which method we use, we will not draw the entire image size. Instead, draw the smallest element and repeat it.

Scalar graph Scheme

ForPSIn terms of the scalar value, you can use the following figure. Then there are infinite duplicates in the area to be drawn. This is especially true for the materials on Web pages. You must know that the image size is not similar to the text. If all the materials are drawn, the image may be very large. AndVisual designerIt will also be exhausting.

Figure2. PNGMaterial image (enlarged)

For example, this graph is calledTwill.png, The size is6*6. InWPFUsing this element to create a graph1Medium MaterialCodeAs follows.

<DrawingbrushX:Key= "Pictwillbrush"

Stretch= "Fill"Tilemode= "Tile"

Viewport= "0, 0, 6"Viewportunits= "Absolute">

<Drawingbrush. Drawing>

imagedrawing imagesource =" Textures \ twill.png " rect =, 6, 6 "/>

</Drawingbrush. Drawing>

</Drawingbrush>

 

By default, the material in solution 1 is perfect1Perfect. However, ifViewboxAfter you put the image down, the following phenomenon occurs.

Figure3.Rendering effect (ViewboxZoom in)

 

We can see that the image is already in blocks. You can think of thisWPFOfBug. If I amQAThat's what I think. Although I understand this is smooth processing+ TitlemodeRendering result-smoothAlgorithmThis large image is not treated as a whole graph, but is processed separately. But I also believe that this is not a difficult problem. So it isBugThere is nothing to say. It's just a small one.Bug, NoFixThat's enough (because there are other more seriousBugWaitingMSOfDev), There is a solution anyway.

 

An incomplete solution can weaken the visual effect of this block.50.00%. That is, to change the elements to this format.

Figure4.BetterPNGMaterial

 

Not necessarily a two-pixel array.4Pixels. However, the smaller the number, the better. So it is best to have two3Pixel line. Then the visual chart will look like the following.

Figure5.Display Effect (ViewboxZoom in)

 

It is better than before. As for the reason, let's analyze it by yourself. (Including50.00%How is it calculated)

 

Therefore, experienced material designers, even if they can use simple corner connections, will not be used, but only use edge connections. (Of course they are not mainly for this reason)

 

The bitmap method is discussed above. If your image does not need to be scaledPNGUsePNGThe picture is still a good solution.

 

Implementation Scheme of vector graph

 

Some people may think thatWPFIt is too easy to create a vector chart. Not just useExpression DesignPainting? Yes, no error, but what do you want to draw? This is because there are more ways to draw a vector image. One feature of vectors is that the image is no longer in pixels. It is a complete graph. This is my first thought. (Maybe you are not)

Figure6.Vector material graph (not feasible at all)

 

Some people may see the problem at a Glance. In this way, the two ends of the line are not square. When multiple small images are connected, the line does not seem to be continuous. The solution is the same as that of the scalar graph. EDGE connection is used. Divide a line in the graph into two parts. The following are two practices. Ask the reader to determine which one is better and explain the reason.

Figure7.Optional vector material Diagram

The Code is as follows:

<Streamgeometry X: Key="Simpletwill">M3, 0 L4, 0, 3 Z m3, 6 L4, 6, 4, 3 Z</Streamgeometry>

And

<Streamgeometry X: Key="Besttwill">M2.5, 0 l3.5, 0 0, 3.5 0, 2.5z m2.5, 6 l3.5, 6 6, 3.5 6, 2.5 Z</Streamgeometry>

 

If you useExpression DesignI believe the code will not be so concise.Expression DesignWhat is most intolerable is the generated data, which often has1.00001Such a thing.

 

CorrespondingBrushThe code is:

<Drawingbrush X: Key="Simpletwillbrush ">

stretch = " Fill " tilemode =" tile "

Viewport="0, 0, 6, 6"Viewportunits="Absolute">

<Drawingbrush. Drawing>

geometrydrawing brush = " Red " geometry =" {staticresource simpletwill} "/>

</Drawingbrush. Drawing>

</Drawingbrush>

 

However, no matter how smooth a vector graph is defined, unfortunately it is still rendered to a display in pixels. Unfortunately, because the definition of a vector chart is generally not consistent with the pixel lattice of the display, it is necessary to deal with the rendering process. The rendered result is the following bear-like.

Figure8.Vector material rendering Effect

 

The top one is the expected effect. The following two are the rendering effects defined by the two vector elements. If you cannot see it clearly, the following is an enlarged image of the two of them. (The reader is advised to determine the vector element based on which the above results are drawn)

Figure9.Vector material rendering effect (zoom in)

 

We can see that the final rendering result is not aligned to the pixel. Strictly speaking, the rendering result is incorrect. (By The Way, please do not mentionSnapstodevicepixelsIf you think this attribute can solve this problem, it only means that you have not figured out when it will play a role. In fact, even if I say this, I still feel someone will reply that I want to use this attribute because they didn't take it seriously.Article.)

Performance of vector Graphs

Furthermore, performance is another serious problem where vectors are not aligned to pixels. This performance difference can be seen with the naked eye. If you drag the window, the background rendered by the above two vectors will be published in the flash. (This test method is theoretically only available on the low-configuration system .) Why does it flash because it is calculated at least more than the method aligned to pixels?1And the color of each pixel must be re-calculated. This computation is very large.

 

Therefore, many applicationsWPFDevelopers will find thatDesignThe drawn complex vector graph is used as the wholeProgramBackground, the program will become very stuck, if first convertedPNGThe performance will be much better if you use images as the background. This is the reason. Using vectors, the information of each pixel must be re-calculated. When using images, if the image size is the same as the background size, you only need to move the pixel information on the image to the display in the original mode without computing anything.

 

However, this does not mean that vector graphs have poor performance. If vector graphs can be matched with pixels, vector graphs can also have good performance. For example, if the vector graph above is defined as below, it will not flash.

High-performance vector graph Solution

Figure10.Vector texture chart with Pixel alignment

The definition of this vector requires more code, as shown below:

<Streamgeometry X: Key="Pixeltwill">M0, 2 L1, 2, 3, 3 Z M1, 1 l2, 1, 2, 2 Z m2, 0 L3, 0, 1 Z m3, 5 L4, 5, 6 Z M4, 4 L5, 4, 5, 4, 5 Z M5, 3 L6, 3, 6, 4, 4 Z</Streamgeometry>

 

Although it seems that the code is more, the performance is better because it is aligned to the pixel. According to the eye observation, There is no blinking at all.

 

However, such a vector chart has lost its meaning. A key feature of a vector chart is stepless scaling. The enlarged image is still smooth. However, this vector graph is actually the same as a scalar graph. After amplification, the image will appear at the same time. However, if a vector graph is not enlarged, this method is still very good, which not only improves the performance, but also ensures that the image is clear and sharp. However, the cost of doing so is very high. It is not realistic to make a small image.

Blur Images

Whether it is a scalar image or a vector image, fuzzy conditions often occur in the implementation project. The next article will introduce several common fuzzy situations and solutions.