WebView 上的 InkCanvas答案

【问题标题】：InkCanvas over WebViewWebView 上的 InkCanvas
【发布时间】：2015-12-01 18:52:23
【问题描述】：

如何像在通用应用程序中的 MS Edge 中那样在网页上写笔记？

如果您不熟悉 Edge：您可以激活“笔记面板”并写一些笔记，但您也可以在写笔记时滚动页面。

我该怎么做？

【问题讨论】：

标签： c# wpf win-universal-app microsoft-edge inkcanvas

【解决方案1】：

试试这个使用 InkCanvas 的实验室解决方案 - 它包含一个您可以下载的文件和示例代码。 https://github.com/Windows-Readiness/WinDevHOLs/tree/master/06B%20Inking

简短说明：您将在 XAML 中创建一个 InkCanvas

    <InkCanvas x:Name="InkCanvas" />

您可能希望在画布上接受鼠标和触摸输入：

public MainPage()
{
    this.InitializeComponent();

InkCanvas.InkPresenter.InputDeviceTypes = 
    Windows.UI.Core.CoreInputDeviceTypes.Mouse |    
    Windows.UI.Core.CoreInputDeviceTypes.Pen | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch;
}

【讨论】：

嘿阿曼达，谢谢你的回复，但我认为我们彼此不理解。该实验室仅用于创建类似 MS Paint 的应用程序，而我更需要类似 Edge 的应用程序。我在玩 Edge 一段时间，Edge 以这种方式工作：Edge 创建当前网络的捕获并将其保存为图像以驱动，然后将自己切换到 InkCanvas，我做了同样的事情......最终解决方案我可以放在 github 上并发布如果需要，请链接...
是的，我想我不明白其中的区别。您可以将 inkcanvas 作为控件添加到您制作的任何应用程序中。所以你还想在你的应用中创建一个截屏然后切换到 ink？

【解决方案2】：

嗯，最后并不太难。这里是代码 sn-ps，概念证明解决方案是 on GitHub。但首先要做的事情。

1) XAML - WebView 必须位于顶部； WebView 下隐藏了 InkCanvas 和 Rectangle，用于绘制最终的网络屏幕截图。

<ScrollViewer>
    <WebView Grid.Row="0" x:Name="WebView" />
</ScrollViewer>
<ScrollViewer Grid.Row="0" x:Name="ScrollPainter" Visibility="Collapsed" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1">
    <Grid>
        <Rectangle x:Name="Painter" />
        <InkCanvas x:Name="InkCanvas" />
    </Grid>
</ScrollViewer>

2) 代码背后（为简单起见） - 分为更多步骤，但主要思想很简单：当用户开始写/画笔记时，然后捕获网络屏幕截图并将其绘制成 Rectangle 并隐藏 WebView。

private async Task CaptureWebView()
{
    int width;
    int height;
    var originalWidth = WebView.ActualWidth;
    var originalHeight = WebView.ActualHeight;

    var widthString = await WebView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
    var heightString = await WebView.InvokeScriptAsync("eval", new[] { "document.body.scrollHeight.toString()" });

    if (!int.TryParse(widthString, out width))
    {
        throw new Exception("Unable to get page width");
    }
    if (!int.TryParse(heightString, out height))
    {
        throw new Exception("Unable to get page height");
    }

    // resize the webview to the content
    WebView.Width = width;
    WebView.Height = height;

    var brush = new WebViewBrush();
    brush.SetSource(WebView);

    Painter.Width = width;
    Painter.Height = height;
    Painter.Fill = brush;
}

【讨论】：