Нужно рисовать прямоугольники поверх изображения в FlipView, но FlipView загружает 3 изображения одновременно - PullRequest
Новая
       36

Нужно рисовать прямоугольники поверх изображения в FlipView, но FlipView загружает 3 изображения одновременно

0 голосов
/ 06 июня 2018

У меня есть коллекция изображений, которые я хочу показать с 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>

1 Ответ

0 голосов
/ 07 июня 2018

, но FlipView загружает 3 изображения одновременно

FlipView элемент управления поддерживает виртуализацию по умолчанию, загрузка трех элементов за один раз соответствует ожидаемой.Если виртуализация отключена, все элементы будут загружены в FlipView за один раз.

У вас есть несколько способов решения вашей проблемы.Поскольку рисование Rectangle требуется только при выборе одного FlipViewItem, вы можете поместить фрагмент относительного кода чертежа в SelectionChanged дескриптор события FlipView.При этом вы можете столкнуться с проблемой получения высоты и ширины Image.На самом деле вы должны быть в состоянии узнать метаданные изображения , получив StorageFile объект из uri изображения.Если вы просто хотите получить элемент управления Image для получения Height и Width, вы можете использовать VisualTreeHelper для получения элемента управления Image от FlipView.

Или вы можете каждый раз принудительно загружать только один элемент в FlipView.Для этого вы можете использовать ISupportIncrementalLoading для инкрементальной загрузки.

Я не уверен, для чего вы рисуете эти прямоугольники, подумайте о том, чтобы нарисовать эти прямоугольники на изображении, прежде чем связывать изображениядо FlipView, если это возможно.

...