Inking Support on a Canvas

Question

Hello,Do you have a control for supporting inking similar to that of Windows Ink?The requirements are, on a Canvas object:Able to draw horizontal and vertical line segments programmaticallyAble to use free hand writing using touch/mouse with several stroke options - ballpoint pen/pencil/highlighterAble to use ruler similar to that of Windows InkAble to erase drawn pathsAble to save the canvas for printingAble to retrieve individual objects drawn in the Canvas for later editing/processing instead of just processing the entire canvas as an image.Minimum supported version: Windows 10 Build 10240I've seen PDFViewer demo. Requirements could be similar but we won't be working on a PDF File but just generally on a Canvas object.Would appreciate your inputs :)Thanks!

Suresh Shanmugam · Answer

Hi May Giltendez, 
We have prepared the sample to achieve your requirement. Please refer the sample and video as below, 
Sample link : http://www.syncfusion.com/downloads/support/forum/135699/ze/SfDiagram_Sample233402011   
Video link : http://www.syncfusion.com/downloads/support/forum/135699/ze/SfDiagram_Video-584548137  
Please find the responses for your queries as below, 





S.No 

Query 

Response 


1 

Able to draw horizontal and vertical line segments programmatically 
 

 
Please find the code example as below to draw the line segment in Diagram Page. 
 




diagram.DefaultConnectorType = ConnectorType.Line; 
diagram.Tool = Tool.ContinuesDraw; 
diagram.DrawingTool = DrawingTool.Connector; 
 
Here, diagram is the instance of SfDiagram. 
 
Please refer the help documentation to know about Tools in below link : 
 
Link : https://help.syncfusion.com/uwp/sfdiagram/tools  
 


2 

Able to use free hand writing using touch/mouse with several stroke options - ballpoint pen/pencil/highlighter 
 

We can able to draw the free hand drawing in DiagramPage using FreeHand tool. Please refer the code example as below, 
 




 
diagram.DrawingTool = DrawingTool.FreeHand; 
 
 
Note : Freehand drawing support will include in our main release Volume 1, 2018. It will be included in our major Volume 1, 2018 release which will be available at the mid of february, 2018 
 


3 

Able to use ruler similar to that of Windows Ink 
 

We can able to enable the Rulers in SfDiagram. Please refer the help documentation to know about Rulers. 
 
Link : https://help.syncfusion.com/uwp/sfdiagram/rulers  
 
However, the Windows inkRuler is differ from SfDiagram. Please share the details and video to the requirement. It will help us to provide the solution on that requirement. 
 


4 

Able to erase drawn paths 
 

We can delete the Node and Connectors using ContextMenu.  Please refer the help documentation to know about ContectMenu. 
 
Link : https://help.syncfusion.com/uwp/sfdiagram/context-menu 
 
However, we have achieved in sample, to erase the object while select. 
 


5 

Able to save the canvas for printing 
 

We can print the Diagram Page in SfDiagram. Please refer the code example as below. 
 




 
diagram.PrintingService.RegisterForPrinting();  
await Windows.Graphics.Printing.PrintManager.ShowPrintUIAsync(); 
 
 


6 

Able to retrieve individual objects drawn in the Canvas for later editing/processing instead of just processing the entire canvas as an image. 
 

 
We can serialize (Save) and deserialize (Load) the Diagramming objects. While Loading the Diagram, we have created the Diagramming Objects based on deserialized content. After load the saved content, we can do the editing with objects. 
 
Regards, 
Suresh Shanmugam