Question

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

Answer 2

好像它不是简单的DeepZoom。他们刚刚提到的项目中使用的是Silver Live的MS Live Lab Pivot控件。 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文件向用户显示。

3 个答案: