InkCanvas over WebView

Question

如何在Universal Apps中的MS Edge中通过网页书写笔记？

如果你不熟悉Edge：你可以激活'笔记面板'并写一些笔记，但是你也可以在写笔记的时候在页面上滚动。

我该怎么办？

Answer 1

好了，在结束它并不难。这里是代码片段和概念验证解决方案是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）后面的代码（为简单起见） - 被分离到更多的步骤，但THA主要的想法很简单：当用户开始写/画笔记，然后捕获网页的截图，并将其绘制成矩形和隐藏的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; 
} 

Answer 2

尝试使用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; 
}