Làm cách nào để thêm văn bản trong Trình chỉnh sửa thu phóng sâu?

Question

Tôi muốn soạn dự án của riêng tôi trong nhà soạn nhạc zoom sâu Tuy nhiên tôi muốn biết làm thế nào để thêm văn bản cho mỗi hình ảnh phóng to giống như hard rock memorabilia

Tôi muốn tiêu thụ nó, sử dụng Silverlight 4.0

Như bạn nhận thấy, dưới khung bên phải, nó có mô tả của nó về hình ảnh.

Cảm ơn bạn.

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

Answer 1

Điều này chắc chắn có thể thực hiện được. Tôi đã làm một cái gì đó tương tự và nó làm việc tuyệt vời. Ví dụ sau sẽ hiển thị thông tin cụ thể cho hình ảnh được nhấp. Bạn có thể sửa đổi nó tùy thuộc vào nếu bạn muốn thông tin được phân tán khi di chuột qua, nhấp hoặc thậm chí khi được thu phóng. Nó hoàn toàn tùy thuộc vào bạn.

Trước hết, thêm một MultiScaleImage trên canvas của bạn ...

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

... và ở một nơi khác trên vải, thêm một TextBlock được sử dụng để hiển thị thông tin:

<TextBlock X:Name="tbInfo" /> 

Tiếp theo, tạo một lớp để giữ thông tin cho từng "hình xếp", thêm một số thông tin giả và thêm một loạt các ô vào Danh sách:

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. 

Bây giờ danh sách có đầy đủ thông tin về khối, chúng ta cần kết nối trình xử lý sự kiện MouseLeftButtonDown để phát hiện khi một hình ảnh được nhấp và cuối cùng để xác định chỉ mục của hình ảnh được nhấp. Với chỉ mục sau đó chúng tôi chỉ cần tìm kiếm danh sách của chúng tôi để biết chi tiết lát thích hợp và sau đó hiển thị trên canvas.

Trong bạn code-behind, đặt như sau:

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

Sau đây là "nước sốt bí mật". Nó sẽ tìm thấy chỉ mục của hình ảnh được nhấp.

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 
    } 

Và đó là nó. Miễn là các chỉ mục hình ảnh của bạn có một hình ảnh tương ứng trong danh sách của bạn thì việc nhấp vào một hình ảnh bên trong đối tượng MultiScaleImage sẽ dẫn đến thông tin hình ảnh được hiển thị.

Answer 2

Dường như DeepZoom không đơn giản của nó. Những gì họ đã sử dụng trong dự án mà bạn vừa đề cập là MS Live Lab Pivot Control của Silverlight. http://www.getpivot.com/. Trang web này có hướng dẫn tốt để bắt đầu với Pivot và nó khá đơn giản để tạo bộ sưu tập.

Trân trọng.

Answer 3

Vertigo, công ty đã tạo ví dụ về Hardrock Cafe Memrobilia, đã phát hành mã nguồn của nó cho CodePlex. Kiểm tra nó ra ở đây: http://bigpicture.codeplex.com/

• Để đơn giản hóa mọi thứ theo cách quá nhiều, bạn phải lắng nghe để mouse movements trên MultiScaleImage.

• Trên mỗi lần di chuyển chuột, bạn nên lặp lại trên MultiScaleImage thu thập phụ đề và kiểm tra xem trong số đó là con trỏ chuột của bạn.

• Để xác định các hình ảnh khác nhau, mỗi hình ảnh trong bộ sưu tập DeepZoom phải có unique identifier - ví dụ trong DeepZoomComposer bạn có thể thêm giá trị tag cho mỗi hình ảnh. Dựa trên thẻ đó, bạn có thể tìm thấy văn bản thông tin thích hợp được hiển thị cho người dùng từ một tệp XML khác chẳng hạn.