Question

我想用FlipView显示一系列图像。在每个图像上我想绘制多个矩形，但要做到这一点，我需要渲染后的图像的当前尺寸。我有与我的图像相同列表中的矩形坐标。我通过ImageOpened事件从图像中获取尺寸，但问题是FlipView事件同时加载三个图像，导致在第一个图像上绘制不同的矩形。有什么建议吗？

    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        itemList = e.Parameter as List<TableData>;

        foreach (var blobImage in itemList)
        {
            var request = (HttpWebRequest)WebRequest.Create($"http://localhost:58941/api/image?id={blobImage.ImageBlobName}");
            request.Method = "GET";
            request.ContentType = "application/json";
            WebResponse response = await request.GetResponseAsync();

            if (response != null)
            {
                string responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();

                var myDict = JsonConvert.DeserializeObject<BlobImage>(responseString);

                var jj = new MyImage(blobImage.ImageDescription, myDict.Uri, blobImage.GpsLatitude, blobImage.GpsLongitude, blobImage.GpsAltitude, blobImage.DateTime, blobImage.ObjectsDetected);

                MyImages.Add(jj);

            }
        }

        MyFlipView.ItemsSource = MyImages;

    }

    private void Image_ImageOpened(object sender, RoutedEventArgs e)
    {
        Image currentImageDimensions = sender as Image;

        currentWidth = currentImageDimensions.ActualWidth;
        currentHeight = currentImageDimensions.ActualHeight;

        foreach (var imageRectangle in itemList)
        {
            for (int i = 0; i < imageRectangle.ObjectsDetected.Count; i++)
            {
                rectangle = new Rectangle();

                var xMinConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].xMin);
                var yMinConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].yMin);
                var xMaxConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].xMax);
                var yMaxConvert = Convert.ToDouble(imageRectangle.ObjectsDetected[i].yMax);

                var xMin = xMinConvert * currentWidth;
                var yMin = yMinConvert * currentHeight;
                var xMax = xMaxConvert * currentWidth;
                var yMax = yMaxConvert * currentHeight;

                rectangle.Height = yMax - yMin;
                rectangle.Width = xMax - xMin;

                var left = ((bgWidth - currentWidth) / 2) + xMin;
                var top = ((bgHeight - currentHeight) / 2) + yMin;

                rectangle.Margin = new Thickness(left, top, 0, 0);
                rectangle.Stroke = new SolidColorBrush(Windows.UI.Colors.Red);
                rectangle.StrokeThickness = 1;

                layoutRoot.Children.Add(rectangle);
            }

        }

    }

的Xaml：

        <ScrollViewer DoubleTapped="scrollViewer_DoubleTapped" MinZoomFactor="1" ZoomMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

            <Grid x:Name="cGrid" Width="{Binding ElementName=gridbg, Path=ActualWidth}" Height="{Binding ElementName=gridbg, Path=ActualHeight}">

                    <FlipView SelectionChanged="MyFlipView_SelectionChanged" Name="MyFlipView" Width="{Binding ElementName=gridbg, Path=ActualWidth}" Height="{Binding ElementName=gridbg, Path=ActualHeight}">

                        <FlipView.ItemTemplate>
                            <DataTemplate x:DataType="local:MyImage">

                                    <Image Source="{Binding Image}" Stretch="Uniform" Height="{Binding ElementName=gridbg, Path=ActualHeight}"  ImageOpened="Image_ImageOpened" />

                            </DataTemplate>
                        </FlipView.ItemTemplate>
                    </FlipView>

                </Border>

                    <Canvas x:Name="layoutRoot">
                    </Canvas>

            </Grid>

        </ScrollViewer>

Answer 1

但FlipView一次加载3张图片

FlipView控件默认支持虚拟化，一次加载三个项目符合预期。如果禁用虚拟化，则所有项目将一次加载到FlipView。

您有多种方法可以解决您的问题。由于您在选择Rectangle时只需要FlipViewItem绘图，因此您可以将绘图相对代码段放在SelectionChanged FlipView事件句柄中。通过这样做，您可能会遇到获取Image高度和宽度的问题。实际上，您应该能够通过从图片的StorageFile获取uri对象来了解image metadata。如果您只想获得Image控件以获取Height和Width，则可以使用VisualTreeHelper从Image获取FlipView控件}。

或者您可以考虑每次仅强制加载一个项目到FlipView。为此，您可以使用ISupportIncrementalLoading进行增量加载。

我不确定您要绘制这些矩形的内容，考虑在将图像绑定到FlipView之前将这些矩形绘制到图像中。

需要在FlipView中在图像顶部绘制矩形，但FlipView一次加载3个图像

1 个答案: