How should I do the Scale operation in the process of saving and loading the InkCanvas Stroke?

Question

How should I do the Scale operation in the process of saving and loading the InkCanvas Stroke?

HoneyBee 186

<InkCanvas x:Name="CurrentPage" PreviewMouseDown="CurrentPage_PreviewMouseDown" PreviewMouseUp="CurrentPage_PreviewMouseUp">
<InkCanvas.Background>
    <ImageBrush x:Name="CurrentPageImage" Stretch="Uniform" ImageSource="{Binding CurrentTextBook}" />
</InkCanvas.Background>
<InkCanvas.RenderTransform>
    <TransformGroup>
        <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
        <TranslateTransform x:Name="CurrentPageTranslateTransform" X="0" Y="0"/>
    </TransformGroup>
</InkCanvas.RenderTransform>

I am working with InkCanvas in C# WPF.

I am using a specific image for the Background Image property of my InkCanvas, and the Stretch of this image is Uniform.

As a result, I am working on drawing a Stroke on the image.

But now a problem arose.

After working the program in window mode, save the stroke If you call Stroke in full screen mode The location and size do not match.

Even with a simple scale calculation method, the position and size of the stroke do not match.

How should I solve it?

I have the total size at the time of saving and the size at the time of loading.

I am also working on the same image. I am working with InkCanvas in C# WPF.

I am using a specific image for the Background Image property of my InkCanvas, and the Stretch of this image is Uniform.

As a result, I am working on drawing a Stroke on the image.

But now a problem arose.

After working the program in window mode, save the stroke If you call Stroke in full screen mode The location and size do not match.

Even with a simple scale calculation method, the position and size of the stroke do not match.

How should I solve it?

I have the total size at the time of saving and the size at the time of loading.

I am also working on the same image.

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-08-24T08:27:40.6+00:00

Hi,@HoneyBee. Welcome Microsoft Q&A. What is your code for CurrentPage_PreviewMouseDown and CurrentPage_PreviewMouseUp? Is it possible to show the animation of the problem result and describe the expected result

HoneyBee 186

Hi, @Hui Liu-MSFT .
CurrentPage_PreviewMouseDown and CurrentPage_PreviewMouseUp

The event has no effect on my problem now.

I have an InkCanvas with size equal to the size of the entire screen.

And the Background of the InkCanvas has an image set to Uniform.

I draw a Stroke and save it. And when you run the program again, the saved Stroke is loaded and drawn on the InkCanvas.

Save and Load work normally.

the problem is

The window size at the time of saving was 1280 * 800

If the window size is 2560 * 1440 when loading

It means that the position of applied stroke is not accurate.

Please understand that this problem cannot be provided as a video because it has a complicated relationship with the project code.

Attaching the Scale code I simply access.

//Stroke: This is the loaded Stroke Collection information.
//originalWidth: This is the window size at the time of saving. It is 1280 when testing.
//originalHeight: This is the window size at the time of saving. It is 800 when testing.
//currentWidth : This is the size of the window when it is called, and it is 2560 when testing.
//currentHeight: This is the size of windows when loaded, and is 1440 when testing.
public void SetFullPageStrokes(StrokeCollection[] strokes, double originalWidth, double originalHeight, double currentWidth, double currentHeight)
        {
            if (strokes == null)
                return;
           
            double scaleX = currentWidth / originalWidth;
            double scaleY = currentHeight / originalHeight;


            foreach (var loadedStrokes in strokes)
            {
                if (loadedStrokes != null)
                {
                    
                    foreach (Stroke stroke in loadedStrokes)
                    {
                        for (int i = 0; i < stroke.StylusPoints.Count; i++)
                        {
                            var point = stroke.StylusPoints[i];
                            double newX = point.X * scaleX;
                            double newY = point.Y * scaleY;
                            stroke.StylusPoints[i] = new StylusPoint(newX, newY);
                        }
                    }
                }
            }

            PageStrokes = strokes;
        }

Hui Liu-MSFT 48,681 Microsoft External Staff

Hi,@HoneyBee. I can't reproduce your problem; you could try the following to see if it works.

You could adjust the scaling of the Stroke points based on both the scaling factor and the translate transformation.

Please let me know if there is a problem.

public void SetFullPageStrokes(StrokeCollection[] strokes, double originalWidth, double originalHeight, double currentWidth, double currentHeight)
{
    if (strokes == null)
        return;

    double scaleX = currentWidth / originalWidth;
    double scaleY = currentHeight / originalHeight;

    double translateX = CurrentPageTranslateTransform.X;
    double translateY = CurrentPageTranslateTransform.Y;

    foreach (var loadedStrokes in strokes)
    {
        if (loadedStrokes != null)
        {
            foreach (Stroke stroke in loadedStrokes)
            {
                for (int i = 0; i < stroke.StylusPoints.Count; i++)
                {
                    var point = stroke.StylusPoints[i];
                    double newX = (point.X - translateX) * scaleX;
                    double newY = (point.Y - translateY) * scaleY;
                    stroke.StylusPoints[i] = new StylusPoint(newX, newY);
                }
            }
        }
    }

    PageStrokes = strokes;
}

1 answer

Your answer

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-08-24T08:27:40.6+00:00

Hi,@HoneyBee. Welcome Microsoft Q&A. What is your code for CurrentPage_PreviewMouseDown and CurrentPage_PreviewMouseUp? Is it possible to show the animation of the problem result and describe the expected result
HoneyBee 186 Reputation points

2023-08-24T09:15:34.9933333+00:00

Hi, @Hui Liu-MSFT .
CurrentPage_PreviewMouseDown and CurrentPage_PreviewMouseUp

The event has no effect on my problem now.

I have an InkCanvas with size equal to the size of the entire screen.

And the Background of the InkCanvas has an image set to Uniform.

I draw a Stroke and save it. And when you run the program again, the saved Stroke is loaded and drawn on the InkCanvas.

Save and Load work normally.

the problem is

The window size at the time of saving was 1280 * 800

If the window size is 2560 * 1440 when loading

It means that the position of applied stroke is not accurate.

Please understand that this problem cannot be provided as a video because it has a complicated relationship with the project code.

Attaching the Scale code I simply access.

//Stroke: This is the loaded Stroke Collection information. //originalWidth: This is the window size at the time of saving. It is 1280 when testing. //originalHeight: This is the window size at the time of saving. It is 800 when testing. //currentWidth : This is the size of the window when it is called, and it is 2560 when testing. //currentHeight: This is the size of windows when loaded, and is 1440 when testing. public void SetFullPageStrokes(StrokeCollection[] strokes, double originalWidth, double originalHeight, double currentWidth, double currentHeight) { if (strokes == null) return; double scaleX = currentWidth / originalWidth; double scaleY = currentHeight / originalHeight; foreach (var loadedStrokes in strokes) { if (loadedStrokes != null) { foreach (Stroke stroke in loadedStrokes) { for (int i = 0; i < stroke.StylusPoints.Count; i++) { var point = stroke.StylusPoints[i]; double newX = point.X * scaleX; double newY = point.Y * scaleY; stroke.StylusPoints[i] = new StylusPoint(newX, newY); } } } } PageStrokes = strokes; }
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-08-24T09:51:30.64+00:00

Hi,@HoneyBee. I can't reproduce your problem; you could try the following to see if it works.

You could adjust the scaling of the Stroke points based on both the scaling factor and the translate transformation.

Please let me know if there is a problem.

public void SetFullPageStrokes(StrokeCollection[] strokes, double originalWidth, double originalHeight, double currentWidth, double currentHeight) { if (strokes == null) return; double scaleX = currentWidth / originalWidth; double scaleY = currentHeight / originalHeight; double translateX = CurrentPageTranslateTransform.X; double translateY = CurrentPageTranslateTransform.Y; foreach (var loadedStrokes in strokes) { if (loadedStrokes != null) { foreach (Stroke stroke in loadedStrokes) { for (int i = 0; i < stroke.StylusPoints.Count; i++) { var point = stroke.StylusPoints[i]; double newX = (point.X - translateX) * scaleX; double newY = (point.Y - translateY) * scaleY; stroke.StylusPoints[i] = new StylusPoint(newX, newY); } } } } PageStrokes = strokes; }

Answer 1

Hi, @Hui Liu-MSFT .

I've solved the problem.

We modified the way Scale is calculated, so it works fine in any case.

I share the code I used.

public void SetFullPageStrokes(StrokeCollection[] strokes, double originalWidth, double originalHeight, double currentWidth, double currentHeight)
        {
            if (strokes == null)
                return;

            double scaleX = currentWidth / originalWidth;
            double scaleY = currentHeight / originalHeight;

            double scale = originalWidth > currentWidth ? Math.Max(scaleX, scaleY) : Math.Min(scaleX, scaleY);

            double displayedImageWidth = originalWidth * scale;
            double displayedImageHeight = originalHeight * scale;
            double offsetX = (currentWidth - displayedImageWidth) / 2;
            double offsetY = (currentHeight - displayedImageHeight) / 2;

            var matrix = Matrix.Identity;
            matrix.Scale(scale, scale);
            matrix.Translate(offsetX, offsetY);

            foreach (var loadedStrokes in strokes)
            {
                if (loadedStrokes != null)
                {
                    foreach (Stroke stroke in loadedStrokes)
                    {
                        stroke.Transform(matrix, false);
                    }
                }
            }

            PageStrokes = strokes;
        }

Share via

How should I do the Scale operation in the process of saving and loading the InkCanvas Stroke?

1 answer

Your answer