荧光笔墨水笔触未渲染到画布控件上

Question

我正在尝试使用“InkToolbar”和“InkCanvas”来实现墨迹书写功能。我也希望能够访问墨水笔触，因此我还激活了 InkCanvas 上的自定义干燥功能。

钢笔墨迹和铅笔墨迹在画布控件上正确呈现，但荧光笔描边未在画布控件上呈现（不可见）。

我也尝试了这些解决方案，但问题仍然存在， Save Windows Ink as transparent PNG image - missing highlighter strokes

XAML 代码

<Grid x:Name="container" Background="#FF282828">
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <InkToolbar x:Name="inkToolbar" InitialControls="None" Grid.Row="0">
        <InkToolbarBallpointPenButton />
        <InkToolbarPencilButton />
        <InkToolbarHighlighterButton />
        <InkToolbarEraserButton />
    </InkToolbar>
    <ScrollViewer ZoomMode="Enabled" Background="DarkGray" Grid.Row="1" x:Name="scrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" MinZoomFactor="0.5" Height="Auto">
        <Grid x:Name="viewport" VerticalAlignment="Top">
            <Border x:Name="viewportBorder" Background="White" BorderThickness="15, 15, 15, 15" BorderBrush="#FF353334" />
        </Grid>
    </ScrollViewer>
</Grid>

代码背后

public sealed partial class MainPage : Page
{
    private Canvas SelectCanvas;
    private InkCanvas InkCanvas;
    private CanvasControl CanvasControl;
    private InkSynchronizer InkSynchronizer;
    private List<InkStrokeContainer> InkStrokeContainers = new List<InkStrokeContainer>();

    public MainPage()
    {
        this.InitializeComponent();
        InitViweport().GetAwaiter();
    }

    private async Task InitViweport()
    {
        FileOpenPicker openPicker = new FileOpenPicker
        {
            SuggestedStartLocation = PickerLocationId.PicturesLibrary,
            ViewMode = PickerViewMode.Thumbnail
        };

        // Filter to include a sample subset of file types.
        openPicker.FileTypeFilter.Clear();
        openPicker.FileTypeFilter.Add(".bmp");
        openPicker.FileTypeFilter.Add(".png");
        openPicker.FileTypeFilter.Add(".jpeg");
        openPicker.FileTypeFilter.Add(".jpg");

        var file = await openPicker.PickSingleFileAsync();

        if (file != null)
        {
            // Open a stream for the selected file.
            IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);

            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(fileStream);

            viewport.Width = bitmapImage.PixelWidth;
            viewport.Height = bitmapImage.PixelHeight;

            using (var stream = await file.OpenReadAsync())
            {
                WriteableBitmap bitmap = new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
                await bitmap.SetSourceAsync(stream);

                var image = new Image();
                image.Source = bitmap;

                viewport.Children.Add(image);
            }
        }

        AddCanvases();
    }

    private void AddCanvases()
    {
        SelectCanvas = new Canvas
        {
            Height = viewport.Height,
            Width = viewport.Width
        };

        InkCanvas = new InkCanvas
        {
            Width = viewport.Width,
            Height = viewport.Height
        };
        inkToolbar.TargetInkCanvas = InkCanvas;

        CanvasControl = new CanvasControl()
        {
            Height = viewport.Height,
            Width = viewport.Width,
            Background = new SolidColorBrush(Colors.Transparent)
        };
        CanvasControl.Draw += CanvasControlDraw;

        InkSynchronizer = InkCanvas.InkPresenter.ActivateCustomDrying();
        InkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

        InkCanvas.InkPresenter.StrokesCollected += InkPresenter_StrokesCollected;

        Canvas.SetZIndex(InkCanvas, 5);
        Canvas.SetZIndex(SelectCanvas, 2);

        viewport.Children.Add(SelectCanvas);
        viewport.Children.Add(CanvasControl);
        viewport.Children.Add(InkCanvas);
    }

    private void CanvasControlDraw(CanvasControl sender, CanvasDrawEventArgs args) => DrawInk(args.DrawingSession);

    private void DrawInk(CanvasDrawingSession session)
    {
        foreach (var container in InkStrokeContainers)
        {
            var strokes = container.GetStrokes();

            using (var list = new CanvasCommandList(session))
            {
                using (var listSession = list.CreateDrawingSession())
                    listSession.DrawInk(strokes);

                using (var shadowEffect = new ShadowEffect { ShadowColor = Colors.DarkGray, Source = list })
                    session.DrawImage(shadowEffect, new Vector2(2, 2));
            }

            session.DrawInk(strokes);
        }
    }

    private void InkPresenter_StrokesCollected(InkPresenter sender, InkStrokesCollectedEventArgs args)
    {
        var strokeContainer = new InkStrokeContainer();
        strokeContainer.AddStrokes(from stroke in args.Strokes select stroke.Clone());
        InkStrokeContainers.Add(strokeContainer);
        InkSynchronizer.EndDry();

        CanvasControl.Invalidate();
    }
}

我不确定这里有什么问题。有人可以指出我正确的方向吗？非常感谢任何帮助。

谢谢

Answer 1

我注意到您在代码中使用了InkSynchronizer.EndDry 方法，但没有使用InkSynchronizer.BeginDry 方法。通过测试，在代码InkSynchronizer.EndDry();处有一个System.InvalidOperationException。然后我对这行代码进行注释，应用程序可以按照您的预期正常运行。而且我还尝试在InkSynchronizer.EndDry 方法之前添加InkSynchronizer.BeginDry 方法，它也可以。因此，您可能需要在您的应用中删除InkSynchronizer.EndDry 方法的使用，或添加InkSynchronizer.BeginDry 方法的使用。