切换PC时InkCanvas笔划没有正确的边界渲染

问题描述

我有一个使用UWP InkCanvas以及加载和保存墨水按钮的UWP应用程序.我在一台笔记本电脑上使用该应用程序进行了绘制，将墨水另存为gif(+嵌入式isf)，然后将gif文件发送到另一台屏幕较小的笔记本电脑上进行试用.

I have one UWP App using a UWP InkCanvas with a Load and Save Ink Buttons. I made a draw with the app on one laptop, saved the ink as a gif (+embedded isf) and sent the gif file to another laptop with a smaller screen to try it out.

当使用同一应用程序但在另一台笔记本电脑上打开墨水时，画图会被裁剪到边界处，好像它不适合屏幕一样，这可能是由于笔记本电脑的屏幕尺寸较小.

When opening the ink with the same app but on this other laptop, the draw is clipped at the boundaries, as if it does not fit the screen, which arguably is due to the laptop's smaller screen size.

我试图通过将其封装在Scrollviewer中来调整整个InkCanvas的大小，但是绘制遵循InkC​​anvas缩放，因此绘制仍被限制在边界处.与InkCanvas上的渲染转换相同.加载墨水时，我还尝试了StrokeContainer的复制粘贴方法.它不起作用，而且我发现它很笨重，因为需要遍历所有笔划以选择它们，然后复制粘贴.

I tried to resize the InkCanvas as a whole by encapsulating it in a Scrollviewer but the draw follows the InkCanvas zooming, hence the draw remains clipped at the boundaries. Same with a render transform on the InkCanvas. I also tried the copy paste methods of the StrokeContainer when loading the ink. It does not work and furthermore I find it bulky as one needs to loop through all strokes to get them selected and then copy pasted.

我正在寻找一种自动调整InkCanvas(首选)或Strokes大小的方法，以使绘图完全显示在InkCanvas上，而与笔记本电脑屏幕的大小无关.我原以为默认情况下会发生这种情况，但事实并非如此.

I am looking at a way to automatically resize the InkCanvas (preferred) or the Strokes such that the drawing appears entirely on the InkCanvas, regardless of the size of the laptop's screen. I was expecting this to happen by default but somewhat it does not.

尽管我使用的代码非常简单，但我还是以它作为开始:

Although the code I use is very simple, I provide it as a start:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid Background="White" Grid.Row="1">
         <InkCanvas x:Name="inkCanvas"/>
    </Grid>
    <StackPanel>
            <Button Content="Load" Click="LoadButton_Click"/>
            <Button Content="Save" Click="SaveButton_Click"/>
    </StackPanel>
</Grid>


    private async void LoadButton_Click(object sender, RoutedEventArgs e)
    {
        FileOpenPicker openPicker = new FileOpenPicker();
        openPicker.FileTypeFilter.Clear();
        openPicker.FileTypeFilter.Add(".isf");
        openPicker.FileTypeFilter.Add(".gif");

        openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

        StorageFile file = await openPicker.PickSingleFileAsync();

        if (file != null)
        {
            IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);

            using (var inputStream = stream.GetInputStreamAt(0))
            {
                await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(inputStream);
            }
            stream.Dispose();

     }
    }

推荐答案

StrokeContainer.SaveAsync()方法将创建一个GIF.我不确定它如何保存墨迹数据，但似乎是一点一点.由于您的InkCanvas是基于其父级Grid进行拉伸的，因此它的最终边界将在屏幕之间有所不同，甚至在调整大小的UWP窗口中也是如此.

The StrokeContainer.SaveAsync() method will create a GIF. I am not sure exactly how it preserves the ink stroke data, but it seems to be point for point. Since your InkCanvas is stretching based on its parent Grid, its final bounds will be different screen to screen, and even in resized UWP window.

因此，当您重新加载笔划数据时，它将把这些点精确地放置在生成它的位置.它不会为您带来任何改变.这是原始数据.

So, when you reload the stroke data, it will put the points exactly where it was generated. It will not transform anything for you. This is raw data.

如果希望数据显示在其他位置，则可以在这些点上应用变换.以下是如何将所有数据缩小50％的快速示例:

If you want the data to appear in a different location, you can apply a transformation on the points. Here's a quick sample of how to shrink all data by 50%:

var container = inkCanvas.InkPresenter.StrokeContainer;
var strokes = container.GetStrokes();
var bounds = container.BoundingRect;
var center = new Vector2((float)bounds.Left, (float)bounds.Top);
var transform = Matrix3x2.CreateScale(.5f, .5f, center);

foreach (var stroke in strokes)
{
    stroke.PointTransform *= transform;
}

您可以将该代码段放在await container.LoadAsync(inputStream)之后.

You could put that snippet of code after await container.LoadAsync(inputStream).

您需要决定如何处理输出.这将取决于您想要的用户体验.如果要缩放输出，请使用上面的代码段.如果要移动它，请使用Matrix3x2.CreateTranslation(...).

You need to decide what to do with your output. It will depend on the user experience you want. If you want to scale the output, use the snippet above. If you want to move it, then use Matrix3x2.CreateTranslation(...).

这篇关于切换PC时InkCanvas笔划没有正确的边界渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！