"Win 10 App development" UI composition Notes (iv): Drawing graphics

With the Win components, you can easily draw a variety of graphics, even if you do not d2d the relevant foundation, you do not have to write very complex C + + code.

First, how to get the Win components. Quite simply, after you create a UWP app project, you open the Solution Explorer window, then right-click on the References node, choose Manage Nuget Packages from the shortcut menu, search for "Win 2D" in the window that opens, and then install the one with the UWP logo.

By the way, the NuGet package is cached under your user folder, that is, the \users\xxx,xxx under the system disk is the user name of the system you are logged into, and there is a. nuget directory under the folder, the \packages subdirectory is the cached package, size depends on the components you install, big time 4, 5 g is also available.

In your application project, VS just created a JSON file to describe the component you are referencing, the win 2D Add reference succeeds, your reference list should be like this.

If you see WIN2D.UWP this project, then there is no problem.

However, you have to note that simply double-clicking on it cannot be viewed in the Object Browser, you can: Open the Object Browser window and then change the subset of the browse to "my solution" so that you can see the type structure of all the referenced components in your current project.

Now you can see the basic contents of the WIN2D library.

The Microsoft.Graphics.Canvas and its sub-namespaces are all types in the win2d component.

In fact, using the win2d component, you can easily draw a variety of things, because in the Microsoft.Graphics.Canvas.UI.Xaml namespace, there are some controls directly, you can directly use the Xaml document, Then you draw what you want and you can draw it with the code. For example, I introduce two more typical.

* canvascontrol--can draw all kinds of things you want, it is equivalent to a canvas, draw with the code when you need to handle the draw event, and then in the event processing code to draw randomly.

* canvasanimatedcontrol--is similar to the guy above, but it can animate the content you draw.

As you can see, both controls have a createresources event for what to do with birds? It works like this, you can instantiate some resources in the code that handles this event, which is usually not changed frequently during the drawing process, such as loading a picture, a brush, etc.

Here's a quick demonstration of the use of the Canvascontrol control.

In a XAML document, you first introduce namespaces.

< Page     ...
    xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml"     ...    Xmlns:canvas  = "Using:Microsoft.Graphics.Canvas.UI.Xaml" > </ Page >

And then you can use it.

    <Background= "{ThemeResource Applicationpagebackgroundthemebrush} " >         <Draw= "OnDraw"/>     </ Grid >

We then dealt with the draw event, and we drew a few written hackers. To draw the east, we need to use another class--canvasdrawingsession under the Microsoft.Graphics.Canvas namespace, which exposes a lot of draw and fill methods, draw is to draw something, fill is filled with an area.

        Private voidOnDraw (Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args) {using(Canvasdrawingsession DSS =args. Drawingsession) {//Draw LineDss. DrawLine (12f, 15f, 335f, 408f, Colors.darkblue,5.5f); //Draw a rectangleDSS.                DrawRectangle (55f, 190f, 465f, 369f, Colors.gold, 8f); //Draw a circleDSS.            DrawEllipse (350f, 350f, 200f, 260f, Colors.orange, 5f); }        }

It is purely scribblings to draw a few random pictures. The effect is as shown.

However, our topic today is related to UI composition, although the above drawing method is very different directions, but it is not our topic today. The next thing we want to do is use the composition API to render what we're drawing.

Big partners can think about what it takes to draw something on a composition assembled object. As we said before, you have to have a brush, in the composition API, only one brush can render its own content, that is, Compositionsurfacebrush.

To create an Compositionsurfacebrush instance, it is easy to call the Compositor.createsurfacebrush method. But the core of the problem is not here, but in that, Compositionsurfacebrush paint brush created is empty, to be able to render content, but also need to assign a value to Surface properties, it is a type that implements the Icompositionsurface interface, In the composition API, there is only one class that implements the interface: Compositiondrawingsurface. However, as you can see, this class is not exposed by constructors, it is created by the Createdrawingsurface method of the Compositiongraphicsdevice class.

OK, now we can take a look at the idea.

1, you must try to get a Compositiongraphicsdevice instance, the class does not expose the constructor, what to do? So we have to use win2d, and later on, Win2d will have a way to get this example.

2. Call the Createdrawingsurface or CreateDrawingSurface2 method of the Compositiongraphicsdevice instance to create the Compositiondrawingsurface

Instance.

3. Draw something on the newly created Compositiondrawingsurface instance. This also needs to use the win2d.

4. Use Compositor's static method to create the Compositionsurfacebrush object directly and associate it with the compositiondrawingsurface of the picture above.

5. Associate this brush (Compositionsurfacebrush) with a visual element, for example, the Spritevisual class has a brush property.

As a result, we found two difficulties: A, how to create Compositiongraphicsdevice, B, how to draw something on surface (this surface is not surface).

With the help of win2d, these two problems can be solved. We do not talk about the theory, the following examples to illustrate.

First, simply declare an element in a XAML document, as long as it is a subclass of UIElement.

    <Background= "{ThemeResource Applicationpagebackgroundthemebrush} " >        <  Name= "Mycvs"/>    </Grid> 

Remember to assign a name and wait for it to be accessed in the code.

Then we can start painting.

        voiddrawsomething () {//gets the Visual on the XAML elementVisual canvasvisual =elementcompositionpreview.getelementvisual (MYCVS); //Get Compositor ObjectCompositor compos =Canvasvisual.compositor; //Create GraphicsDeviceCompositiongraphicsdevice GraphicsDevice =Canvascomposition.createcompositiongraphicsdevice (Compos, Canvasdevice.getshareddevice ()); //Create Surface//size of CanvasSizeInt32 cvsize =NewSizeInt32 {Width= -, Height= -            }; Compositiondrawingsurface surface=Graphicsdevice.createdrawingsurface2 (Cvsize, Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized,            Windows.Graphics.DirectX.DirectXAlphaMode.Premultiplied); //Start Painting            using(Canvasdrawingsession DSS =canvascomposition.createdrawingsession (surface)) {                //Brush the walls and paint the walls blackDSS.                Clear (Colors.black); //Draw a circleDSS.                DrawEllipse (210f, 190f, 80f, 80f, Colors.yellow, 4f); //and draw an ellipse .Dss. DrawEllipse (230f, 200f, 160f, 95f, Colors.skyblue,3.5f); //fill a piece of areaDSS.            FillRectangle (400f, 250f, 150f, 100f, Colors.pink); }            //Create a surface paint brushCompositionsurfacebrush Sfbrush =Compos.            Createsurfacebrush (surface); //create a visual object that supports paint brushesSpritevisual newvisual =Compos.            Createspritevisual (); //setting up a paint brushNewvisual.brush =Sfbrush; //Note To set the size of the visual objectExpressionanimation Anim =Compos.            Createexpressionanimation (); Anim. Expression="Parn. Size"; Anim. Setreferenceparameter ("Parn", canvasvisual); Newvisual.startanimation ("Size", Anim); //Finally, don't forget to insert the new visual object into the object treeelementcompositionpreview.setelementchildvisual (Mycvs, newvisual); }

As we said in the previous article, interacting with XAML, using the Elementcompositionpreview helper class to get the Visual instance that corresponds to a XAML element, we can also get the relevant Compositor object.

Note To create an Compositiongraphicsdevice instance with the help of the Win2d Canvascomposition class (located in the Microsoft.Graphics.Canvas.UI.Composition namespace), call the When you createcompositiongraphicsdevice a method, you have to have a compatible Canvasdevice object in addition to the associated Compositor object. This Canvasdevice object has a very TMD simple fetch method, which is the Getshareddevice static method that calls it directly.

Well, with Compositiongraphicsdevice instances, it's good to create Compositiondrawingsurface objects, just like this.

Compositiondrawingsurface surface = Graphicsdevice.createdrawingsurface2 (cvsize, Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized, Windows.Graphics.DirectX.DirectXAlphaMode.Premultiplied);

Both Createdrawingsurface and CreateDrawingSurface2, with "2", use integers to represent pixel values.

Calling this method is the most troublesome of the next two parameters, they are enumerated values, if the value is not properly set will be an exception, so if something goes wrong, you have to adjust. In general, on the screen display of East, we will choose the order of BGRA, because this order is not biased color, especially the image, if using RGBA will be biased color. B8g8r8a8 says that all use a 8-bit value, that is, a byte, which we usually handle the general figure is enough (that is, 32-bit color).

The next step is to use canvasdrawingsession to draw all the things you want to paint, and then create a Compositionsurfacebrush object and associate it with the surface object you just painted.

Finally, use this brush to fill a visual object that supports the brush, such as spritevisual. Remember, be sure to set the object's Size property , because the default value is 0, otherwise it will not be displayed, here, I directly with an expression animation, let its size follow the size of the Canvas.

This method is encapsulated so that it can be called in the appropriate place to draw the content, such as in the constructor of the page class.

         Public MainPage ()        {            this. InitializeComponent ();            drawsomething ();        }

Well, look at the effect.

OK, today's content is here.

"Win 10 App development" UI composition Notes (iv): Drawing graphics