UWP 的 DrawingVisual 等价物

Question

我有一个人的位图图像，我想在这个人的脸上画一个矩形。我有矩形的坐标（x、y、宽度、高度）。像这样：

如果我使用的是 WPF，那么我可以使用 DrawingVisual 和 DrawingContext 类来实现这一点。不幸的是，它们在 UWP 中不可用。是否有任何等效的 API 可用或可能是 NuGet 包来实现相同的功能？

Answer 1

我想出的一个解决方案是将图像包含在 Grid 中，并在其顶部放置一个 ItemsControl，它绑定到一组矩形和一个 Canvas作为面板模板：

<Grid>
    <Image Source="{Binding Image}" />
    <ItemsControl ItemsSource="{Binding Rectangles}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Helper:BindingHelper.CanvasLeftBindingPath" Value="Left" />
                <Setter Property="Helper:BindingHelper.CanvasTopBindingPath" Value="Top" />
             </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="{Binding Width}"
                           Height="{Binding Height}"
                           Stroke="{Binding Color}"
                           StrokeThickness="6">
                </Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

由于 Binding 样式 setter 在 UWP 中不受支持，因此我不得不使用绑定助手。可以在这里找到更多相关信息

Answer 2

我正在使用 'WriteableBitmapEx' Nuget 包解决了这个问题。更多信息http://kaki104.tistory.com/517

示例代码：

private async void BrowseButton_Click(object sender, RoutedEventArgs e)
{
    //FileOpePicker
    var openDlg = new FileOpenPicker();
    openDlg.FileTypeFilter.Add(".jpg");
    openDlg.FileTypeFilter.Add(".jpeg");
    openDlg.FileTypeFilter.Add(".png");
    //Open file selection window
    var result = await openDlg.PickSingleFileAsync();
    if (result == null || !result.IsAvailable) return;
    var file = await StorageFile.GetFileFromPathAsync(result.Path);
    var property = await file.Properties.GetImagePropertiesAsync();
    //Create bitmap from image size
    var writeableBmp = BitmapFactory.New((int)property.Width, (int)property.Height);
    using (writeableBmp.GetBitmapContext())
    {
        //Load bitmap from image file
        using (var fileStream = await file.OpenAsync(FileAccessMode.Read))
        {
            writeableBmp = await BitmapFactory.New(1, 1).FromStream(fileStream, BitmapPixelFormat.Bgra8);
        }
    }

    //find face that DetectAsync Face API
    using (var imageFileStream = await file.OpenStreamForReadAsync())
    {
        var faces = await faceServiceClient.DetectAsync(imageFileStream);
        if (faces == null) return;
        //display rect
        foreach (var face in faces)
        {
            writeableBmp.DrawRectangle(face.FaceRectangle.Left, face.FaceRectangle.Top,
            face.FaceRectangle.Left + face.FaceRectangle.Width,
            face.FaceRectangle.Top + face.FaceRectangle.Height, Colors.Red);
        }
    }
    FacePhoto.Source = writeableBmp;
}

UWP 的 DrawingVisual 等价物

DrawingVisual equivalent for UWP

c#

wpf

uwp