¿Cómo agregar texto en Deep Zoom Composer?

Question

Quiero componer mi propio proyecto en el compositor profundidad de zoom sin embargo me gustaría saber acerca de cómo añadir texto por imagen zoom al igual que el hard rock memorabilia

quiero que consumirla, usando Silverlight 4.0

Como usted nota, bajo el panel derecho, tiene su descripción sobre la imagen.

Gracias.

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

Answer 1

Esto es definitivamente factible. He hecho algo similar y funcionó muy bien. El siguiente ejemplo mostrará información específica de una imagen clicada. Puede modificarlo dependiendo de si desea que se muestre la información al pasar el mouse, hacer clic, o incluso cuando se amplía. Depende enteramente de ti.

En primer lugar, añadir un MultiScaleImage a su lienzo ...

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

... y en otro lugar en el lienzo, añadir un TextBlock que se utilizará para mostrar la información:

<TextBlock X:Name="tbInfo" /> 

a continuación, crear una clase para contener la información para cada "baldosas", añadir un poco de información ficticia, y añadir un montón de baldosas a una lista:

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. 

Ahora que la lista está llena de información, debemos conectar el controlador de eventos MouseLeftButtonDown para detectar cuándo se hace clic en una imagen y, finalmente, para determinar el índice de la imagen en la que se hizo clic. Con el índice, solo tenemos que buscar en nuestra lista los detalles del mosaico correspondiente y luego mostrarlo en el lienzo.

En su código subyacente, coloque el siguiente:

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; 
    }; 

La siguiente es la "salsa secreta". Encontrará el índice de la imagen clicada.

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 
    } 

Y eso es todo. Siempre que sus índices de imagen tengan una imagen correspondiente en su lista, al hacer clic en una imagen dentro del objeto MultiScaleImage se mostrará la información de la imagen.

Answer 2

parece que no es sencilla DeepZoom. Lo que han utilizado en el proyecto que acaba de mencionar es MS Live Lab Pivot Control of silverlight. http://www.getpivot.com/. Este sitio tiene buenos tutoriales para comenzar con Pivot y es bastante simple para crear colecciones.

Atentamente.

Answer 3

Vertigo, la compañía que creó el ejemplo Hardrock Cafe Memrobilia, ha lanzado su código fuente para CodePlex. Échale un vistazo aquí: http://bigpicture.codeplex.com/

• Para simplificar las cosas demasiado, hay que escuchar a mouse movements por encima de la MultiScaleImage.

• En cada movimiento del mouse debe iterar sobre la colección de subimágenes MultiScaleImage y verificar cuál de ellas está debajo del puntero del mouse.

• Identificar diferentes imágenes, cada imagen en DeepZoom colección debe tener un unique identifier - por ejemplo en DeepZoomComposer se puede añadir un valor tag a cada imagen. En función de esa etiqueta, puede encontrar el texto de información adecuado para que se muestre al usuario desde otro archivo XML, por ejemplo.