WebView 上的 InkCanvas

Question

如何在 Universal Apps 中像 MS Edge 一样在网页上写笔记？

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

我怎样才能这样做？

Answer 1

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

简短说明：您将在 XAML

中创建一个 InkCanvas

    <InkCanvas x:Name="InkCanvas" />

您可能想在 canvas:

上接受鼠标和触摸输入

public MainPage()
{
    this.InitializeComponent();

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

Answer 2

好吧，最后并不太难。以下是代码片段，概念证明解决方案是 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) 隐藏代码（为简单起见）- 分为更多步骤，但主要思想很简单：当用户开始 write/draw 注释时，捕获 Web 屏幕截图并将其绘制成矩形并隐藏 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;
}

WebView 上的 InkCanvas

InkCanvas over WebView

c#

wpf

inkcanvas

win-universal-app

microsoft-edge