Как добавить текст в Глубоком Компоновщике Масштабирования?

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

Я хочу использовать его, с помощью silverlight 4.0

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

Спасибо.

этот http://www.freeimagehosting.net/uploads/43b14a3d53.png

7
задан xscape 9 August 2010 в 06:40
поделиться

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 приведет к отображению информации об изображении.

5
ответ дан 7 December 2019 в 09:55
поделиться

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

С уважением.

1
ответ дан 7 December 2019 в 09:55
поделиться

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

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

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

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

0
ответ дан 7 December 2019 в 09:55
поделиться
Другие вопросы по тегам:

Похожие вопросы: