保存没有工作绘图 WinRT

Question

应用程序运行良好，但是当我要保存时，就像边缘移动图片和绘图一样，我也移动了。我做错了什么或我需要做些什么来解决这个问题。我认为是几何问题。

Xaml 代码：

<Page
x:Class="DrawingWithMe.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DrawingWithMe"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Viewbox>
    <Grid x:Name="Grid1" Height="768" Width="1366">
        <Canvas x:Name="funnyCanvas" Background="White" Margin="162,10,254,42">
            <Rectangle x:Name="Rectangle1" Fill="#FFF4F4F5" Stroke="Black"></Rectangle>
            <Image x:Name="image" Source="Assets/Test.gif" Stretch="UniformToFill"/>
        </Canvas>
    </Grid>
</Viewbox>

<Page.BottomAppBar>
    <AppBar x:Name="AppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Name="Save" Content="Save" VerticalAlignment="Top" Click="Save_Click_1" Grid.Column="1"></Button>
                <Button Name="Erase" Content="Erase All" VerticalAlignment="Top" Click="Erase_Click_1" Grid.Column="2"></Button>
                <Button x:Name="Copytoclipboard" Content="Copy To ClipBoard" VerticalAlignment="Top" Click="Copytoclipboard_Click_1"></Button>
                <Button x:Name="Pastefrom" Content="Paste From ClipBoard" VerticalAlignment="Top" Click="Pastefrom_Click_1"></Button>
                <Button x:Name="Recognizeword" Content="Recognize" VerticalAlignment="Top" Click="Recognizeword_Click_1"></Button>
            </StackPanel>
        </Grid>
    </AppBar>

</Page.BottomAppBar>

</Page>

C#代码：

  public async void TestingBlit()
    {

        var backgroundBmp = await BitmapFactory.New(1, 1).FromContent(new Uri(BaseUri,       @"///Assets/Test.gif"));

        //Image foreground
        WriteableBitmap foregroundBmp;
        using (InMemoryRandomAccessStream a = new InMemoryRandomAccessStream())
        {
            await _inkManager.SaveAsync(a);
            a.Seek(0);

            foregroundBmp = await new WriteableBitmap(1,1).FromStream(a);

        }

        // Combined
        backgroundBmp.Blit(new Rect(0, 0, foregroundBmp.PixelWidth, foregroundBmp.PixelHeight), foregroundBmp,new Rect(0, 0, foregroundBmp.PixelWidth, foregroundBmp.PixelHeight), WriteableBitmapExtensions.BlendMode.ColorKeying);

        // Save
        Windows.Storage.Pickers.FileSavePicker save = new Windows.Storage.Pickers.FileSavePicker();
        save.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.Desktop;
        save.DefaultFileExtension = ".gif";
        save.FileTypeChoices.Add("GIF", new string[] { ".gif" });
        StorageFile filesave = await save.PickSaveFileAsync();
        Guid encoderId = Windows.Graphics.Imaging.BitmapEncoder.PngEncoderId;
         await WinRTXamlToolkit.Imaging.WriteableBitmapSaveExtensions.SaveToFile(backgroundBmp, filesave, encoderId);
        //List<InkStroke> tmp = _inkManager.GetStrokes().ToList();
        //tmp.RemoveAt(0);
        //RenderStroke(tmp.ElementAt(0), Colors.SkyBlue, 10, 1);
         SurfaceImageSource surfaceImageSource = new SurfaceImageSource((int)Rectangle1.ActualWidth, (int)Rectangle1.ActualHeight, true);    
        ImageBrush brush = new ImageBrush();
        brush.ImageSource = image.Source;

        Rectangle1.Fill = brush;

    }

    private void RenderStroke(InkStroke stroke, Color color, double width, double opacity = 1)
    {
        // Each stroke might have more than one segments
        var renderingStrokes = stroke.GetRenderingSegments();

        //
        // Set up the Path to insert the segments
        var path = new Windows.UI.Xaml.Shapes.Path();
        path.Data = new PathGeometry();
        ((PathGeometry)path.Data).Figures = new PathFigureCollection();

        var pathFigure = new PathFigure();
        pathFigure.StartPoint = renderingStrokes.First().Position;
        ((PathGeometry)path.Data).Figures.Add(pathFigure);

        //
        // Foreach segment, we add a BezierSegment
        foreach (var renderStroke in renderingStrokes)
        {
            pathFigure.Segments.Add(new BezierSegment()
            {
                Point1 = renderStroke.BezierControlPoint1,
                Point2 = renderStroke.BezierControlPoint2,
                Point3 = renderStroke.Position
            });
        }

        // Set the general options (i.e. Width and Color)
        path.StrokeThickness = width;
        path.Stroke = new SolidColorBrush(color);

        // Opacity is used for highlighter
        path.Opacity = opacity;

        funnyCanvas.Children.Add(path);
    }

    }
}

Answer 1

您将内容放在Viewbox 中，这将拉伸它。您需要计算矩形的屏幕坐标。

试试这个。

var scalex = MyViewbox.GetScaleChildX();
var scaley = MyViewbox.GetScaleChildY();
SurfaceImageSource surfaceImageSource = new SurfaceImageSource((int)(scalex * Rectangle1.ActualWidth), (int)(scaley * Rectangle1.ActualHeight), true); 

public static double GetChildScaleX(this Viewbox viewbox)
{
    if (viewbox.Child == null)
        throw new InvalidOperationException("Can't tell effective scale of a Viewbox child for a Viewbox with no child.");

    var fe = viewbox.Child as FrameworkElement;

    if (fe == null)
        throw new InvalidOperationException("Can't tell effective scale of a Viewbox child for a Viewbox with a child that is not a FrameworkElement.");

    if (fe.ActualWidth == 0)
        throw new InvalidOperationException("Can't tell effective scale of a Viewbox child for a Viewbox with a child that is not laid out.");

    return viewbox.ActualWidth / fe.ActualWidth;
}   

GetChildScaleY 是一样的，但有高度（取自 here）。

（确保您命名为 Viewbox）

<Viewbox x:Name="MyViewbox">