如何在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

Vertigo，創建Hardrock Cafe Memrobilia示例的公司已經向CodePlex發佈了其源代碼。看看這裏：http://bigpicture.codeplex.com/

• 爲了簡化事情太多，你要聽mouse movements的MultiScaleImage以上。

• 在每次移動鼠標時，您應該遍歷MultiScaleImage子圖像集合並檢查它們中的哪一個在您的鼠標指針下。

• 識別不同的圖像，DeepZoom收集每個圖像應該有一個unique identifier - 例如在DeepZoomComposer您可以將tag值添加到每個圖像。基於該標籤，您可以找到適當的信息文本，例如從其他XML文件顯示給用戶。