如何在Deep Zoom Composer中添加文本？

Question

我想在深度缩放编辑器中编写我自己的项目但是我想知道如何为每个图像添加文本放大,就像 硬岩纪念品一样

我想使用Silverlight 4.0来消费它

如您所见,在右窗格下,它有关于图像的描述.

谢谢.

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

Answer 1

这绝对可行.我做了类似的事情,效果很好.以下示例将显示特定于单击图像的信息.您可以根据您是否希望在鼠标悬停,单击或甚至缩放时显示信息来修改它.这完全取决于你.

首先,在画布上添加MultiScaleImage ...

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

...以及画布上的其他位置,添加一个用于显示信息的TextBlock:

<TextBlock X:Name="tbInfo" />

接下来,创建一个类来保存每个"tile"的信息,添加一些虚拟信息,并将一堆tile添加到List:

    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对象的内部的图像会导致图像信息的显示.