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

Question

我想在深度缩放作曲家中编写自己的项目，但是我想知道如何为每个放大的图像添加文本，就像 hard rock memorabilia

我想使用它，使用 silverlight 4.0

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

谢谢。

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

Answer 1

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

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

Answer 2

看起来它不是简单的 DeepZoom。他们在您刚才提到的项目中使用的是 Silverlight 的 MS Live Lab Pivot Control。 http://www.getpivot.com/。 这个网站有很好的教程来开始使用 Pivot 并且创建集合非常简单。

问候。

Answer 3

创建 Hardrock Cafe Memrobilia 示例的公司Vertigo 已将其源代码发布到 CodePlex。在这里查看：http://bigpicture.codeplex.com/

• 为了简化太多，您必须在 MultiScaleImage 上方收听 mouse movements。

• 在每次鼠标移动时，您都应该遍历 MultiScaleImage 子图像集合并检查其中哪些在您的鼠标指针下。

• 要识别不同的图像，DeepZoom 集合中的每个图像都应该有一个 unique identifier - 例如，在 DeepZoomComposer 中，您可以为每个图像添加一个 tag 值。例如，基于该标记，您可以从其他 XML 文件中找到要显示给用户的适当信息文本。