[英]DrawingVisual equivalent for UWP
I have a bitmap image of a person and I would like to draw a rectangle over the person's face. 我有一个人的位图图像,我想在该人的脸上绘制一个矩形。 I have the coordinates of the rectangle (x, y, width, height).
我有矩形的坐标(x,y,宽度,高度)。 Like this:
像这样:
If I were using WPF, then I could achieve this using the DrawingVisual
and DrawingContext
classes. 如果我使用的是WPF,则可以使用
DrawingVisual
和DrawingContext
类来实现。 Unfortunately they are not available in UWP. 不幸的是,它们在UWP中不可用。 Are there any equivalent API's available or maybe a NuGet package to achieve the same functionality?
是否有可用的等效API或NuGet软件包来实现相同的功能?
I am using the 'WriteableBitmapEx' Nuget Package solved this problem. 我正在使用'WriteableBitmapEx'Nuget包解决了此问题。 More information is http://kaki104.tistory.com/517
有关更多信息,请访问http://kaki104.tistory.com/517。
Sample code: 样例代码:
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;
}
A solution I have come up with is encompassing the image in a Grid
and placing an ItemsControl
on top of it which is bound to a set of rectangles and a Canvas
as a panel template: 我想出的一个解决方案是将图像包含在
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>
Since Binding
in a style setter is not supported in UWP I had to use a binding helper. 由于UWP不支持在样式设置器中进行
Binding
,因此我不得不使用绑定帮助器。 More about that can be found here UWP Binding in Style Setter not working 有关更多信息,请参见此处。样式设置程序中的UWP绑定不起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.