Как добавить текст в Deep Zoom Composer?

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

Я хочу потреблять его, используя silverlight 4.0

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

Спасибо.

http://www.freeimagehosting.net/uploads/43b14a3d53.png

Источник

3 ответа

Решение

Это определенно выполнимо. Я сделал что-то подобное, и это сработало отлично. В следующем примере будет отображена информация, относящаяся к кликаемому изображению. Вы можете изменить его в зависимости от того, хотите ли вы отображать информацию при наведении курсора, щелчке мышью или даже при увеличении. Это полностью зависит от вас.

Прежде всего, добавьте MultiScaleImage на ваш холст...

<MultiScaleImage  x:Name="deepZoomObject" Source="/GeneratedImages/dzc_output.xml" />

... и где-нибудь еще на холсте, добавьте TextBlock, который будет использоваться для отображения информации:

<TextBlock X:Name="tbInfo" />

Затем создайте класс для хранения информации для каждой "плитки", добавьте некоторую фиктивную информацию и добавьте несколько плиток в список:

    public class TileDetail {
       public int Index { get; set; } 
       public string TileName { get; set; }
    }
    //The Index is the zero based index of the images.  It depends on the index created by DeepZoomComposer.  This is the one piece of information that you absolutely need to know.  I believe the index is based on the order that the images are added to DeepZoomComposer but test to make sure.

   List<TileDetail> TileDetailsList = new List<TileDetail>();

   TitleDetail td1 = new TileDetail();
   td1.Index = 0;
   td1.TileName = "Tile #1";

   TileDetailsList.Add(td1);

   TitleDetail td21 = new TileDetail();
   td2.Index = 1;
   td2.TileName = "Tile #2";

   TileDetailsList.Add(td2);

   //Repeat the above for your remaining tiles always incrementing the Index.  If you're loading information from a DB then you'll need to make sure to have a way to connect the image to its index from DeepZoomComposer.

Теперь, когда список полон информации о плитках, нам нужно подключить обработчик событий MouseLeftButtonDown, чтобы определить, когда щелкнуло изображение, и, в конечном итоге, определить индекс щелчкового изображения. С индексом нам нужно только найти в нашем списке подходящие детали плитки и затем отобразить на холсте.

В своем коде позади разместите следующее:

   deepZoomObject.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
   {
      //Get the index of the image
      int index = GetIndexOfSubImage(e.GetPosition(deepZoomObject));
      //Find the image in the list of images
      TileDetail td = TileDetailsList.FirstOrDefault(t => t.Index == index);
      //Display image info
      tbInfo.Text = td.TileName;
   };

Ниже приводится "секретный соус". Он найдет индекс кликаемого изображения.

   private int GetIndexOfSubImage(Point point)
   {
      // Test each subimage to find the image where the mouse is within
      for (int i = deepZoomObject.SubImages.Count - 1; i >= 0; i--)
      {
        MultiScaleSubImage image = deepZoomObject.SubImages[i];
        double width = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth);
        double height = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth * image.AspectRatio);

        Point pos = deepZoomObject.LogicalToElementPoint(new Point(image.ViewportOrigin.X / image.ViewportWidth, -image.ViewportOrigin.Y / image.ViewportWidth));
        Rect rect = new Rect(pos.X, pos.Y, width, height);

        if (rect.Contains(point))
        {
           // Return the image index
           return i;
        }
      }    
      return -1; //if there is no corresponding subimage
    }

И это все. Если у ваших индексов изображений есть соответствующее изображение в вашем списке, то нажатие на изображение внутри объекта MultiScaleImage приведет к отображению информации об изображении.

Источник

Похоже, это не просто DeepZoom. В проекте, который вы только что упомянули, они использовали MS Live Lab Pivot Control для silverlight. http://www.getpivot.com/. На этом сайте есть хорошие учебники для начинающих с Pivot и его довольно простая коллекция.

С уважением.

Источник

VertigoКомпания, которая создала пример Hardrock Cafe Memrobilia, выпустила свой исходный код для CodePlex. Проверьте это здесь: http://bigpicture.codeplex.com/

  • Чтобы упростить вещи слишком, вы должны слушать mouse movements выше MultiScaleImage.

  • При каждом движении мыши вы должны перебирать MultiScaleImage Коллекция субизображений и проверьте, какой из них находится под указателем мыши.

  • Чтобы идентифицировать разные изображения, каждое изображение в DeepZoom коллекция должна иметь unique identifier - например, в DeepZoomComposer вы можете добавить tag значение для каждого изображения. На основе этого тега вы можете найти правильный информационный текст, который будет отображаться пользователю, например, из другого файла XML.

Источник
Другие вопросы по тегам