我想在深度缩放作曲家中编写我自己的项目,但是我想知道如何为每个放大的图像添加文本,就像 硬摇滚纪念品一样
我想使用它,使用 silverlight 4.0
如您所见,在右窗格下,它有关于图像的描述。
谢谢你。
我想在深度缩放作曲家中编写我自己的项目,但是我想知道如何为每个放大的图像添加文本,就像 硬摇滚纪念品一样
我想使用它,使用 silverlight 4.0
如您所见,在右窗格下,它有关于图像的描述。
谢谢你。
这绝对是可行的。我做过类似的事情,效果很好。以下示例将显示特定于单击图像的信息。您可以根据是否希望在鼠标悬停、单击甚至缩放时显示信息来修改它。这完全取决于你。
首先,将 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 对象内的图像将导致显示图像信息。
看起来它不是简单的 DeepZoom。他们在您刚才提到的项目中使用的是 Silverlight 的 MS Live Lab Pivot Control。http://www.getpivot.com/。这个网站有很好的教程,可以从 Pivot 开始,它的创建集合非常简单。
问候。
Vertigo
创建 Hardrock Cafe Memrobilia 示例的公司已将其源代码发布到 CodePlex。在这里查看:http: //bigpicture.codeplex.com/
为了简化太多事情,你必须听mouse movements
上面的 MultiScaleImage。
在每次鼠标移动时,您应该遍历MultiScaleImage
子图像集合并检查它们中的哪一个在您的鼠标指针下。
要识别不同的图像,DeepZoom
集合中的每个图像都应该有一个unique identifier
- 例如在 DeepZoomComposer 中,您可以tag
为每个图像添加一个值。例如,基于该标记,您可以从其他 XML 文件中找到要显示给用户的适当信息文本。