UWP 的绘图视觉等效项答案

【问题标题】：DrawingVisual equivalent for UWPUWP 的绘图视觉等效项
【发布时间】：2015-11-27 22:14:14
【问题描述】：

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

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

【问题讨论】：

你检查过以下链接msdn.microsoft.com/en-us/library/windows/apps/dn894631.aspx
是的，我错过了什么吗？
通过阅读发布的链接，我了解到 UWP 使用了一些 System.* 命名空间，就像在 Windows 中一样，所以我假设它应该能够像在 Windows 系统中一样工作
我提到的 WPF 类来自 System.Windows.Media 命名空间，这在 UWP 中不可用。
在 Windows 运行时没有像 DrawingVisual 这样的东西。将 Rectangle 或带有 RectangleGeometry 的 Path 放在 Image 控件的顶部。

标签： c# wpf uwp

【解决方案1】：

我想出的解决方案是将图像包含在Grid 中，并在其顶部放置一个ItemsControl，该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>

由于 UWP 不支持样式设置器中的 Binding，因此我不得不使用绑定助手。更多相关信息可以在这里找到 UWP Binding in Style Setter not working

【讨论】：

您能否将您的绑定助手添加到这个问题中？我认为这会很有帮助！

【解决方案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;
}

【讨论】：