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

Question

我想在 deep zoom composer 中编写我自己的项目，但是我想知道如何像 hard rock memorabilia 一样为每个放大的图像添加文本

我想消费它，使用silverlight 4.0

如您所见，在右 Pane 下，它有关于图像的描述。

谢谢你。

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

Answer 1

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

首先，将 MultiScaleImage 添加到您的 Canvas ...

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

...在 Canvas 上的其他地方，添加一个用于显示信息的 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 事件处理程序来检测何时单击图像并最终确定单击图像的索引。有了索引，我们只需要在我们的列表中搜索合适的瓷砖细节，然后在 Canvas 上显示。

在您的代码隐藏中，放置以下内容:

   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 对象内的图像就会显示图像信息。