Windows Community Toolkit 3.0-infinitecanvas

Overview

Infinitecanvas is a canvas control that supports scrolling of infinite canvases, supports INK, text, format text, canvas scaling, undo redo operations, import and export data.

This is a very useful control, in the "to draw video" UWP app painting function, also used in this control, it is the choice of different brushes, eraser, ruler and circle ruler, text input and font selection, etc. have provided very convenient support, and support import and export data, can be very convenient to create painting works, and can be exported and shared to others.

The following is an example and Code/doc address for the Windows Community Toolkit sample App:

Windows Community Toolkit Doc-infinitecanvas

Windows Community Toolkit Source Code-infinitecanvas

Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls;

Development process

Code Structure Analysis

First look at the code structure of Infinitecanvas, which consists of the following:

• The Commands-infinitecanvas corresponds to all commands, including Redo/undo,ink,text, as shown in the above example figure Toolbar;
• The main controls for Controls-infinitecanvas are in this folder;
• Drawables-text and Ink are the main drawing functions in this folder;
• Jsonconverters-The main functions of serialization and deserialization, as well as the custom Ink properties, etc.;
• The main event processing logic of Infinitecanvas.events.cs-infinitecanvas;
• Infinitecanvas.textbox.cs-infinitecanvas text box control to add text to the processing logic;
• The main processing logic of Infinitecanvas.cs-infinitecanvas control;
• The XAML style file for the Infinitecanvas.xaml-infinitecanvas control;

Infinitecanvas The overall class structure is very clear, each class function is also very clear, below we select several important classes to do the analysis.

1. Infinitecanvascreateinkcommand

Command folder each class is relatively simple, we look for a create INK command to see, this class implements the Iinfinitecanvascommand interface, implementation of Execute () and Undo () two methods; Command initialization is also simple, Creates a Inkdrawable object, initializes the Drawablelist object, joins the drawable when it is created, and removes it from drawablelist when it is revoked.

Internal classinfinitecanvascreateinkcommand:iinfinitecanvascommand{Private ReadOnlyList<idrawable>_drawablelist; Private ReadOnlyinkdrawable _drawable;  PublicInfinitecanvascreateinkcommand (list<idrawable> drawablelist, ireadonlylist<inkstroke>strokes) {_drawable=Newinkdrawable (strokes); _drawablelist=drawablelist; }     Public voidExecute () {_drawablelist.add (_drawable); }     Public voidUndo () {_drawablelist.remove (_drawable); }}

2. Infinitecanvastextbox

A text box control for Infinitecanvas, from which you can see the complete text Box property definition method, including setting the text, setting the editing area size, processing the text changes, and limiting the cursor position.

Take a look at the Cannotgodown () method that the cursor can move down one line, cut the line of text according to the newline character, and not move down if it is the only row, or the end of the current selection, or the last row, or move down;

Internal BOOLCannotgodown () {varLines = _editzone.text.split ('\ r'); if(lines. Count () = =1)    {        return true; }    varLastLine = lines. ElementAt (lines. Length-1); if((_editzone.text.length-lastline.length) <= (_editzone.selectionstart +_editzone.selectionlength)) {        return true; }    return false;}

3. Infinitecanvasvirtualdrawingsurface

Virtual drawing surface for rendering Ink and Text, which consists of several parts of the class:

The main processing logic is to use Commands to manipulate the rendering execution and undo operations of Ink and Text, calculate the size space of the rendering, and organize the rendered content.

4. Inkdrawable and Textdrawable

Ink and Text can draw elements of the painting logic, take a look at the composition of the two classes:

Let's take a look at the Draw method for two classes:

Draw ()-inkdrawable:

Get each point of each line in the Strokes, add to the collection, create a line from the point collection, and finally generate a new stroke list; After the traversal is completed, the new stroke list is used for the Drawingsession Drawink method to achieve the drawing;

 Public voidDraw (canvasdrawingsession drawingsession, Rect sessionbounds) {varFinalstrokelist =NewList<inkstroke>(Strokes.count); foreach(varStrokeinchStrokes) {        varPoints =stroke.        Getinkpoints (); varFinalpointlist =NewList<inkpoint>(points.        Count); foreach(varPointinchpoints)        {Finalpointlist.add (Mappointtotosessionbounds (Point, sessionbounds)); } strokebuilder.setdefaultdrawingattributes (stroke.        DrawingAttributes); varNewstroke =strokebuilder.createstrokefrominkpoints (finalpointlist, stroke.        Pointtransform);    Finalstrokelist.add (Newstroke); } drawingsession.drawink (Finalstrokelist);}

Draw ()-textdrawble:

Set the format of the Chinese text in Canvas, use the textlayout of texts and formatting to draw the Drawtextlayout method for drawingsession; Set the horizontal offset based on the font size Horizontalmarginbasedonfont, fixed longitudinal offset verticalmargin;

 Public voidDraw (canvasdrawingsession drawingsession, Rect sessionbounds) {Const intVerticalMargin =3; Canvastextformat format=NewCanvastextformat {FontSize=FontSize, wordwrapping=Canvaswordwrapping.nowrap, FontWeight= IsBold?FontWeights.Bold:FontWeights.Normal, FontStyle= Isitalic?FontStyle.Italic:FontStyle.Normal}; Canvastextlayout TextLayout=NewCanvastextlayout (drawingsession, Text, format,0.0f,0.0f); Drawingsession.drawtextlayout (TextLayout, (float) (Bounds.x-sessionbounds.x + Horizontalmarginbasedonfont), (float) (Bounds.y-sessionbounds.y +verticalmargin), textcolor);}

5. Infinitecanvas

Infinitecanvas is the primary logical processing, consisting of three parts of the Infinitecanvas.cs,infinitecanvas.events.cs,infinitecanvas.textbox.cs class.

• Among them InfiniteCanvas.cs This class is mainly implemented OnApplyTemplate (), DependencyProperty processing, control definition, event registration, Canvas base event handling, etc., Infinitecanvas In the realization of a InkCanvas so can achieve a variety of strokes of the handwriting drawing;
• InfiniteCanvas.Events.cs is mainly a variety of button clicks in the Canvas, such as event processing;
• InfiniteCanvas.TextBox.cs is mainly the control definition and event handling of TextBox control in Canvas;

Invoke Example

The call to the Infinitecanvas control is very simple, and here's a look at the calls in XAML:

<Pagexmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"Xmlns:controls= "Using:Microsoft.Toolkit.Uwp.UI.Controls"xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"XMLNS:MC= "http://schemas.openxmlformats.org/markup-compatibility/2006"mc:ignorable= "D">  <Grid>    <Controls:infinitecanvasName= "Canvas"istoolbarvisible= "True"/>  </Grid></Page>

Summarize

Here we will be the Windows Community Toolkit 3.0 in the source code realization of the implementation of the process, I hope we can better understand and use this feature to help. Infinitecanvas control has a lot of applications in the painting class scene, the control by default implements a variety of strokes of the painting, eraser, text, redo undo and other important functions, developers can also be customized according to Infinitecanvas implementation Toolbar Style and more painting strokes, different ways to save strokes and so on.

Finally, with everyone Amway Windowscommunitytoolkit official micro-blog:https://weibo.com/u/6506046490, You can follow the latest news through Weibo.

Heartfelt thanks to Windowscommunitytoolkit for the outstanding work of the authors, thanks to each contributor, Thank much, all Windowscommunitytoolkit AUTHORS!!!

Windows Community Toolkit 3.0-infinitecanvas