Как центрировать изображение в MultiScaleImage - PullRequest
1 голос
/ 08 сентября 2010

Нашел функцию, которая позиционирует изображения в мультимасштабном изображении ... но я не уверен, как получить фактическую ширину изображения (для одного или нескольких) и изменить параметр _msi.ViewportOrigin x на основе этого.

Есть 2 строки, которые влияют на положение изображения ... одна из них

_msi.ViewportOrigin = new Point(0, 0);

, а другой:

//if (layout == ImageLayout.Vertical) //single column
//    X = ((_msi.ViewportWidth - subImages[i].Width) / 2);

Я могу изменить любой из них ... но мне нужна помощь с этим.

Код, из которого взяты вышеупомянутые фрагменты:

 private void ArrangeImagesTile(ImageLayout layout)
        {
            if (_msi.ActualWidth <= 0 || _msi.ActualHeight <= 0)
                return;

            _lastMousePos = new Point(0, 0);
            _msi.ViewportOrigin = new Point(0, 0);
            _msi.ViewportWidth = 1;


            Storyboard moveStoryboard = initStoryboard();

            double containerAspectRatio = this._msi.ActualWidth / this._msi.ActualHeight;
            double spaceBetweenImages = 0.005;

            List<SubImage> subImages = new List<SubImage>();
            _imagesToShow.ForEach(subImage => subImages.Add(new SubImage(subImage)));

            // Capture the total width of all images
            double totalImagesWidth = 0.0;
            subImages.ForEach(subImage => totalImagesWidth += subImage.Width);

            // Calculate the total number of rows required to display all the images
            int numRows = 1; // layout - horizontal
            if (layout == ImageLayout.One)
                numRows = 1; //(int)Math.Sqrt((totalImagesWidth / containerAspectRatio) + 1);
            else if (layout == ImageLayout.Four) //.Vertical)
                numRows = 2; // subImages.Count;

            // Assign images to each row
            List<Row> rows = new List<Row>(numRows);
            for (int i = 0; i < numRows; i++)
                rows.Add(new Row(spaceBetweenImages));

            double widthPerRow = totalImagesWidth / numRows;
            double imagesWidth = 0;

            // Separate the images into rows. The total width of all images in a row should not exceed widthPerRow
            for (int i = 0, j = 0; i < numRows; i++, imagesWidth = 0)
            {
                while (imagesWidth < widthPerRow && j < subImages.Count)
                {
                    rows[i].AddImage(subImages[j]);
                    subImages[j].RowNum = i;
                    imagesWidth += subImages[j++].Width;
                }
            }

            // At this point in time the subimage height is 1 
            // If we assume that the total height is also 1 we need to scale the subimages to fit within a total height of 1
            // If the total height is 1, the total width is aspectRatio. Hence (aspectRatio)/(total width of all images in a row) is the scaling factor.
            // Added later: take into account spacing between images
            rows.ForEach(Row => Row.Scale(containerAspectRatio));

            // Calculate the total height, with space between images, of the images across all rows
            // Also adjust the colNum for each image
            double totalImagesHeight = (numRows - 1) * spaceBetweenImages;
            rows.ForEach(Row => totalImagesHeight += Row.Height);

            // The totalImagesHeight should not exceed 1. 
            // if it does, we need to scale all images by a factor of (1 / totalImagesHeight)
            if (totalImagesHeight > 1)
            {
                subImages.ForEach(subImage => subImage.Scale(1 / (totalImagesHeight + spaceBetweenImages)));
                totalImagesHeight = (numRows - 1) * spaceBetweenImages;
                rows.ForEach(Row => totalImagesHeight += Row.Height);
            }

            // Calculate the top and bottom margin
            double margin = (1 - totalImagesHeight) / 2;

            if (_imagesToHide != null)
            {
                // First hide all the images that should not be displayed
                _imagesToHide.ForEach(subImage =>
                {
                    //Do not use opacity for this as it slows down the animation after a few arranges
                    subImage.ViewportWidth = 0;
                });
            }

            // Then display the displayable images to scale
            for (int i = 0; i < _imagesToShow.Count; i++)
            {
                double X = rows[subImages[i].RowNum].CalcX(subImages[i].ColNum);
                //if (layout == ImageLayout.Vertical) //single column
                //    X = ((_msi.ViewportWidth - subImages[i].Width) / 2);

                double Y = margin;
                for (int j = 0; j < subImages[i].RowNum; j++)
                    Y += spaceBetweenImages + rows[j].Height;

                _imagesToShow[i].ViewportWidth = containerAspectRatio / subImages[i].Width;
                animateImage(moveStoryboard, _imagesToShow[i], new Point(-(X / subImages[i].Width), -(Y / subImages[i].Width)));    // for animation, use this statement instead of the next one                
                _imagesToShow[i].Opacity = 1.0;
            }

            if (ImagesRearranged != null)
            {
                ImagesRearranged(this, EventArgs.Empty);
            }

            // Play Storyboard
            moveStoryboard.Begin();
        }

Предыдущая ссылка на код, которая относится к указанной выше функции при открытии изображения в msi:

Backend:

private void RootMultiScaleImage_Loaded(object sender, RoutedEventArgs e)
        {
            // Use the mid point of the image to zoom from    
            var xx = (MultiScaleImage) sender;
            xx.ZoomAboutLogicalPoint(1, 0.5, 0.5);
        }

Фронтальный:

 <ControlTemplate x:Key="DeepZoomerControlTemplate" TargetType="zoom:DeepZoomer">
            <Grid>
<MultiScaleImage x:Name="RootMultiScaleImage" Loaded="RootMultiScaleImage_Loaded" />

1 Ответ

2 голосов
/ 23 сентября 2010

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

  • Сначала вы должны проверить, является ли ViewPortWidth> 1 (это означает, что ваше изображение в настоящее время "более узкое" по сравнению с родительским. Если это не так, вы можете проверить, если ViewPortHeight> 1 (изображение короче и вы должны центрироваться вертикально).

  • Предполагая, что вы обнаружили, что ViewPortWidth> 1, т.е. у вас есть пустое пространство справа и вы хотите центрировать область просмотра по горизонтали, вы устанавливаете отрицательное значение ViewPortOrigin, чтобы переместить область просмотра вправо.

Пример : ViewPortWidth равен 3. Это означает, что ваше изображение заполняет 1/3 доступной ширины. Вы должны переместить его вправо один раз в ширину. ViewportOrigin становится (-1, 0).

Другой пример : ViewPortWidth равен 4. Ваше изображение заполняет 1/4 доступной ширины. Если для ViewPortOrigin установлено значение -1,5, область просмотра фактически смещается в 1,5 раза по ширине вправо и фактически переходит в центр.

Общая формула * должна иметь вид ViewPortOrigin.x = - (ViewPortWidth - 1) / 2

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

...