Crop stroked region as Bitmap from InkCanvas Container

Question

I am just started working in WPF application. Here, I need to get the signature from user. I am using Inkcanvas control to implement this feature.

I am curious on knowing is there a way in Inkcanvas control to crop the stroked region alone with some outer margin. I don't want the empty space of the Inkcanvas container in the output bitmap image. if the signature in too small, I want to crop the region and stretch that into particular size(300x200).

It is easier to restrict the aspect ratio of `InkCanvas` to the preset size (300 x 200) yet make it comfortable for the user to input. I mean, set this `InkCanvas` as 600x400, and save the entire InkCanvas as an Image and then resize it to 300x200. Because it could be hard to detect the "stroked region". — kennyzx, Apr 01 '15 at 07:08
@kennyzx . Say I have `InkCanvas` with 600x400. If the user uses only 50x50 of that container for signature. Then, there will be lot of empty space will be there in output if I save the entire `InkCanvas` . . I don't want that. I want the used space alone. — Gopichandar, Apr 01 '15 at 07:19

kennyzx · Accepted Answer · 2015-04-01T08:35:51.950

3

OK, first you need to determine the rectangle to crop (the "stroked region"), then save it to an image.

InkCanvas has a Strokes property that is the collection of ink strokes, you can get the bounds of each Stroke by calling Stroke.GetBound method. Then you can get the Left property of the "stroked region", which is the Left property of the leftmost bounds. And you also get the Right, Top and Bottom in the same way. I hope you can understand my explanation.

Resizing the cropped image to 300x200 should be quite easy, you can find plenty of answers on Stackoverflow.

edited Apr 01 '15 at 08:35

answered Apr 01 '15 at 07:40

kennyzx

12,845
6
39
83

Thanks. Let me try this. – Gopichandar Apr 01 '15 at 08:45
1

Finally, got it! `GetBound` did the trick for me. However, takes some time to implement the feature :). – Gopichandar Apr 01 '15 at 14:59

score 0 · Answer 2 · answered Nov 29 '16 at 17:59

I think this changed for Windows 10 Universal. In some ways, while different, it may be a bit easier.

With your InkCanvas, you have InkPresenter.StrokeContainer and from there you can get the BoundingRect property, which will give you a ton of details about the bounding rectangle of your strokes (ie x, y, width, height, left, right, etc...)

So, here is what I did:

 var bounds = myCanvas.InkPresenter.StrokeContainer.BoundingRect;
 var left = bounds.Left;
 var right = bounds.Right;
 //and so on...

Once you have the bounding rectangle data, it is very easy to crop.

Hope this helps!

Crop stroked region as Bitmap from InkCanvas Container

2 Answers2