[英]Pinch-to-zoom on huge images?
我在http://forums.create.msdn.com找到了這個Pinch-to-zoom示例
這是xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Tap to center" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Tap and hold to reset" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Touch and move to drag" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Pinch (touch with two fingers) to scale and rotate" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/>
<TextBlock Text="Flick (drag and release the touch while still moving) will show flick data on bottom of screen." Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/>
</StackPanel>
<TextBlock x:Name="flickData" Text="Flick:" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Bottom"/>
<Image x:Name="image" Source="/map.jpg" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache">
<Image.RenderTransform>
<CompositeTransform x:Name="transform"/>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
Tap="OnTap" Hold="OnHold"
DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted"
Flick="OnFlick"
PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/>
</toolkit:GestureService.GestureListener>
</Image>
</Grid>
而cs來源:
public partial class GestureSample : PhoneApplicationPage
{
double initialAngle;
double initialScale;
public GestureSample()
{
InitializeComponent();
}
private void OnTap(object sender, GestureEventArgs e)
{
transform.TranslateX = transform.TranslateY = 0;
}
private void OnDoubleTap(object sender, GestureEventArgs e)
{
transform.ScaleX = transform.ScaleY = 1;
}
private void OnHold(object sender, GestureEventArgs e)
{
transform.TranslateX = transform.TranslateY = 0;
transform.ScaleX = transform.ScaleY = 1;
transform.Rotation = 0;
}
private void OnDragStarted(object sender, DragStartedGestureEventArgs e)
{
image.Opacity = 0.3;
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
transform.TranslateX += e.HorizontalChange;
transform.TranslateY += e.VerticalChange;
}
private void OnDragCompleted(object sender, DragCompletedGestureEventArgs e)
{
image.Opacity = 1.0;
}
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
Point point0 = e.GetPosition(image, 0);
Point point1 = e.GetPosition(image, 1);
Point midpoint = new Point((point0.X + point1.X) / 2, (point0.Y + point1.Y) / 2);
image.RenderTransformOrigin = new Point(midpoint.X / image.ActualWidth, midpoint.Y / image.ActualHeight);
initialAngle = transform.Rotation;
initialScale = transform.ScaleX;
image.Opacity = 0.8;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
transform.Rotation = initialAngle + e.TotalAngleDelta;
transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio;
}
private void OnPinchCompleted(object sender, PinchGestureEventArgs e)
{
image.Opacity = 1.0;
}
private void OnFlick(object sender, FlickGestureEventArgs e)
{
flickData.Text = string.Format("{0} Flick: Angle {1} Velocity {2},{3}",
e.Direction, Math.Round(e.Angle), e.HorizontalVelocity, e.VerticalVelocity);
}
}
它適用於小圖像(小於2000x2000像素)。 但在我的例子中,我有這張巨大的地鐵地圖( http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.png或矢量http://www.vasttrafik.se/upload /Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.pdf )。 如果用戶可以縮放矢量圖像,甚至導入這樣一個巨大的矢量是一個嚴重的性能問題,那就更好了。
也許我可以將圖像分成幾個“多尺度圖像”並使用這個http://dotnetbyexample.blogspot.com/2010/08/windows-phone-7-multi-touch-panzoom.html ,但我不知道真的知道如何使用他的班級:(
有任何想法嗎? 你們怎么解決這個問題?
謝謝
理查德
解決方案的理想方法是使用MultiScaleImage
,它專門用於顯示大型圖像數據。 但是,為了使用MultiScaleImage
您需要以正確的格式准備好您的iamge數據。 基本上,您需要將圖像切片並重新縮放等,以便用戶在放大和縮小圖像時盡可能少地加載信息。
DeepZoom文檔描述了該過程,並提供了指向DeepZoom Composer工具的鏈接,該工具用於准備圖像數據。
一旦你使MultiScaleImage
方法工作,你就可以看看使用Laurent的多點觸控行為(如果需要)來提供額外的用戶交互。
你聽說過Silverlight Deep-Zoom嗎?
http://msdn.microsoft.com/en-us/library/cc645050(v=vs.95).aspx
手機上的Silverlight UIElements有一個大小限制。 正如您所發現的,這是2000x2000像素。 沒有一個控件可以比這更大 - 因此你的問題。
如果必須使用大於此圖像,請查看MultiScaleImage
。
如果您使用非常大的圖像文件,也要注意內存問題的可能性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.