在UWP墨水画布上显示背景图像 [英] Displaying a background image on a UWP ink canvas

问题描述

我的UWP应用中有一个InkCanvas，并且想要显示一个图像(理想情况下是Canvas的一部分，但否则，请以某种方式覆盖它(想法是我可以将更改后的图像保存回该图像文件).WPF似乎允许InkCanvas拥有子对象，但是在UWP中似乎无法实现.我尝试了以下方法:

I have an InkCanvas in my UWP app, and would like to display an image (ideally as part of the Canvas, but otherwise, overlay it in some way (the idea being that I can save the changed image back to the image file). WPF seems to allow the InkCanvas to have children, but in UWP that doesn't seem to be possible. I've tried the following:

        <InkCanvas x:Name="drawInkCanvas">
            <Image Source="{Binding DrawingImage}"/>

        </InkCanvas>

但这是行不通的；我也尝试过:

But that doesn't work; I've also tried this:

        <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
            <InkCanvas x:Name="drawInkCanvas" Opacity=".5"/>
            <Image Source="{Binding DrawingImage}" Opacity=".5"/>

        </Canvas>

老实说，我对此没有很高的期望.无论如何，尽管确实可以，但是它使图像和InkCanvas看起来都错了，而且显然不允许我保存生成的图像.

Which, to be fair, I didn't have very high hopes for; anyway, although it does, kind of work, it makes both the image and the InkCanvas look wrong and, obviously, doesn't allow me to save the resulting image.

理想情况下，会有背景图片或类似图片.我有什么可以用来实现这一目标的?我认为我可能必须用标准画布替换InkCanvas，然后重新编写所有InkCanvas功能！

Ideally, there would be a background image or something similar. Is there anything that I can use to achieve this; I'm approaching the opinion that I may have to replace the InkCanvas with a standard canvas and then re-write all the InkCanvas functionality!

推荐答案

因此，您有几个问题:

1. 如何在Image控件上使用InkCanvas进行绘制.
2. 如何将结果保存到文件中.

1. How to draw using InkCanvas over Image control.
2. How to save the results into a file.

在此示例中，我将使用简单的UWP应用，该应用假定您的Assets文件夹中具有"sample.jpg"文件，并且清单中具有图片库"功能.

I'll use simple UWP app in this example, which assumes that you have "sample.jpg" file in your Assets folder, and you have "Pictures Library" capability in your manifest.

要解决第一个问题，只需将InkCanvas和Image都放入同一容器中(例如Grid)，但请记住顺序很重要:

To solve first problem, just put both InkCanvas and Image into same container (like Grid), but remember that order matters:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Image Source="/Assets/sample.jpg"></Image>
        <InkCanvas x:Name="ink"></InkCanvas>
    </Grid>
    <Button Content="Save"
            Width="100"
            Height="25"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" Click="BtnSave_Click"/>
</StackPanel>

如果您将InkCanvas放在第一位(就像您在问题示例中所做的那样)-它将无法工作.但是，如果将InkCanvas放在最后，则一切正常，您可以绘制图像.

If you put InkCanvas first (like you did in question example) - it won't work. However if put InkCanvas last - all works fine and you can draw over your image.

现在要解决第二个问题，您需要使用Win2D(安装nuget Win2D.uwp软件包)，因为标准的RenderTargetBitmap不会呈现InkCanvas内容.首先绘制原始图像(直接从原始来源获取图像，例如从原始文件中获取图像)，然后在其上绘制墨水画布的内容. MainPage的完整代码(如果在上面添加xaml，则将具有完整的工作示例):

Now to solve second problem you need to use Win2D (install nuget Win2D.uwp package), because standard RenderTargetBitmap won't render InkCanvas contents. First draw your original image (take image from original source directly, that is from original file for example), then draw contents of your ink canvas over it. Full code of MainPage (if you add xaml above you will have complete working sample):

public sealed partial class MainPage : Page {
    public MainPage() {
        this.InitializeComponent();
        // just set some properties of ink canvas, not directly relevant to your question
        ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
        var attr = new InkDrawingAttributes();
        attr.Color = Colors.Red;
        attr.IgnorePressure = true;
        attr.PenTip = PenTipShape.Circle;
        attr.Size = new Size(4, 10);
        ink.InkPresenter.UpdateDefaultDrawingAttributes(attr);
    }

    private async void BtnSave_Click(object sender, RoutedEventArgs e) {
        // grab output file
        StorageFolder storageFolder = KnownFolders.SavedPictures;
        var file = await storageFolder.CreateFileAsync("output.jpg", CreationCollisionOption.ReplaceExisting);

        CanvasDevice device = CanvasDevice.GetSharedDevice();
        CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int) ink.ActualWidth, (int) ink.ActualHeight, 96);

        // grab your input file from Assets folder
        StorageFolder appInstalledFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
        StorageFolder assets = await appInstalledFolder.GetFolderAsync("Assets");
        var inputFile = await assets.GetFileAsync("sample.jpg");            
        using (var ds = renderTarget.CreateDrawingSession()) {
            ds.Clear(Colors.White);                
            var image = await CanvasBitmap.LoadAsync(device, inputFile.Path);
            // draw your image first
            ds.DrawImage(image);
            // then draw contents of your ink canvas over it
            ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes());
        }

        // save results
        using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) {
            await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f);
        }
    }
}

这篇关于在UWP墨水画布上显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！