Copying ink strokes between inkcanvas with different sizes

Question

I'm trying to copy inkstrokes between different inkcanvas.

So far that's what I tried.

    ///Getting strokes from the first inkcanvas
    public StrokeCollection MyStrokes;
    MyStrokes = BigInkCanvas.Strokes;

    ///Trying to restore the strokes on the other inkcanvas
    SmallerInkCanvas.Strokes = MyStrokes

And that's what I get

Result

Is there a way to "resize" the ink strokes so it can fit on the smaller inkcanvas

Answer 1

You could apply a transform matrix to it to scale to the new canvas' bounding rectangle.

Consider you have a 500x250 px canvas. And you wish to scale to a 400x150 matrix.

That transform is 100px across the x axis and 100px across the y axis.

If we consider this a scale it would be instead 20% and 60% smaller.

If we turn that into a matrix we should then be able to apply that matrix to the strokes to scale them using their PointTransform property.(UWP) or it's .Transform() method (WPF)

(float x, float y) originalCanvas = (500f, 250f);
(float x, float y) desiredCanvas = (400f, 150f);

(float xScale, float yScale) GetScale((float x, float y) originalSize, (float x, float y) desiredSize)
{
    float xScale = (originalSize.x - desiredSize.x) / originalSize.x;

    float yScale = (originalSize.y - desiredSize.y) / originalSize.y;

    return (1f - xScale, 1f - yScale);
}

var scale = GetScale(originalCanvas, desiredCanvas);
// Should return (0.8, 0.6)

// uwp
var matrix = Matrix3x2.CreateScale(scale.xScale, scale.yScale, new Vector2(0, 0));
// Wpf
var matrix = Matrix.Identity.Scale(scale.xScale, scale.yScale);

// Transform the strokes
foreach(var stroke in MyStrokes)
{
    // Uwp
    stroke.PointTransform = matrix;

    // Wpf
    stroke.Transform(matrix, false);
}

SmallerInkCanvas.Strokes = MyStrokes

Disclaimer: Not tested, written on mobile