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; 
}