Scaling Canvas InkStrokes

Question

I am taking a photo with the camera, using it as the background for an InkCanvas, and letting the user draw overtop.

When the user saves their drawing, I am scaling the drawing to match the size of the image in the background. I can not resize the original image.

However, while the length and position of the strokes are being scaled, the widths are not. Scrolling through StackOverflow I have found people saying that you also need to set the scale on the InkStroke.DrawingAttributes.PenTipTransform as well as the InkStroke.PointTransform, but when I try to set the value to the scale, the value doesn't change.

Origional Values New Values

Any information on how I can set this value, or another way to o the same thing would be greatly appreciated.

Thanks

UI Code

 <!-- Canvas -->
    <Image Grid.Row="1" x:Name="imgImage" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" SizeChanged="imgImage_SizeChanged"/>

    <InkCanvas Grid.Row="1" x:Name="inkCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PointerExited="inkCanvas_PointerExited" Visibility="Collapsed">
        <InkCanvas.RenderTransform>
            <ScaleTransform x:Name="inkCanvasScaleTransform" />
        </InkCanvas.RenderTransform>
    </InkCanvas>

EDIT - More information

The image taken by the camera has the resolution 3264x244, the user can then draw on the image with the canvas, but I can't show the entire image on the screen, so it gets scaled down to fit the size of the canvas. The canvas (in this particular case), has a resolution of 1012x759.

When the image is saved, the location of the draw gets scaled up to match the full size of the image. but the width of the stroke does not.

P.S. the scale transform in the XAML is currently not used.

SAVE CODE

StorageFile inputFile = null;
        inputFile = await StorageFile.GetFileFromPathAsync(_image.fullPath);
        height = (int)inkCanvas.ActualHeight;
        width = (int)inkCanvas.ActualWidth;
        double scalex = 0;
        double scaley = 0;
        double offsety = 0;
        double offsetx = 0;
        double widthscale = 1;
        if (inputFile != null)
        {
            var prop = await inputFile.Properties.GetImagePropertiesAsync();
            offsetx = (double)prop.Width - width;
            offsety = (double)prop.Height - height;
            scalex = ((double)prop.Width - width) / width;
            scaley = ((double)prop.Height - height) / height;
            width = (int)prop.Width;
            height = (int)prop.Height;
            widthscale = 1 + ((scalex * scaley) / 2);
        }

        var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        List<InkStroke> ExpandedStrokes = new List<InkStroke>();
        foreach (var stroke in strokes)
        {
            InkStroke strk = stroke.Clone();
            Matrix3x2 scaleMatrix = Matrix3x2.CreateScale(1 + (float)scalex, 1 + (float)scaley);
            strk.PointTransform = scaleMatrix;
            strk.DrawingAttributes.PenTipTransform = scaleMatrix;
            ExpandedStrokes.Add(strk);
        }

        StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        CanvasDevice device = CanvasDevice.GetSharedDevice();
        CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, width, height, 96);
        using (var ds = renderTarget.CreateDrawingSession())
        {
            ds.Clear(Colors.White);
            if (inputFile != null)
            {
                using (CanvasBitmap image = await CanvasBitmap.LoadAsync(device, inputFile.Path, 96))
                {
                    ds.DrawImage(image);
                }
            }
            ds.DrawInk(ExpandedStrokes);
        }
        using (var fileStream = await inputFile.OpenAsync(FileAccessMode.ReadWrite))
        {
            await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f);
        }

The scale for the PenTip may not be correct, but was just trying to get it making a change.

EXAMPLE IMAGES

Before Scaling (1012x759)

After Scaling (3264x2448)

Could you provide more code behind and clarify what real effect you want to achieve? If the users draw the stroke on the image, they will want to make it there, why to scale again? So what is the mean of scaling the drawing to match the size of the image? It will be better if you can provide a minimum sample to help me understand your issue. — Breeze Liu - MSFT, May 07 '18 at 07:43

score 0 · Answer 1 · answered May 08 '18 at 08:41

The InkStroke.PointTransform is for resizing the length of the strokes, it will not scale the strokes's thickness. If you want to display the strokes with corresponding width, you can use the InkCanvas.RenderTransform and set it's ScaleX and ScaleY, But it will not affect the real effect of the Stroke's thickness, it just adjusts the InkCanvas's size to make the Strokes seem to be scaled. There seems no a property to change the real thickness of strokes that have be drawn on the images.

Actually, when you take a photo and put it in the Image control as a background image, then the users can draw on the image, you maybe give the user a choice to select the Pen with different configuration to draw. After users finished drawing, they will save the image with strokes, this should be the effect they want. That is to say, we use the pen to draw on a small image, we should just make sure the stroke on the right position, if the image become larger, the strokes should change automatically, I don't think we should change the stroke scale again.

Scaling Canvas InkStrokes

1 Answers1