Databases
StackOverflow2013
Postsdbo
POPinch-to-zoom on huge images?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPinch-to-zoom on huge images?
    text
    copied!<p>I found this Pinch-to-zoom example at <a href="http://forums.create.msdn.com" rel="noreferrer">http://forums.create.msdn.com</a></p> <p>Here is the xaml:</p> <pre><code>&lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt; &lt;StackPanel&gt; &lt;TextBlock Text="Tap to center" Style="{StaticResource PhoneTextNormalStyle}"/&gt; &lt;TextBlock Text="Tap and hold to reset" Style="{StaticResource PhoneTextNormalStyle}"/&gt; &lt;TextBlock Text="Touch and move to drag" Style="{StaticResource PhoneTextNormalStyle}"/&gt; &lt;TextBlock Text="Pinch (touch with two fingers) to scale and rotate" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/&gt; &lt;TextBlock Text="Flick (drag and release the touch while still moving) will show flick data on bottom of screen." Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/&gt; &lt;/StackPanel&gt; &lt;TextBlock x:Name="flickData" Text="Flick:" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Bottom"/&gt; &lt;Image x:Name="image" Source="/map.jpg" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"&gt; &lt;Image.RenderTransform&gt; &lt;CompositeTransform x:Name="transform"/&gt; &lt;/Image.RenderTransform&gt; &lt;toolkit:GestureService.GestureListener&gt; &lt;toolkit:GestureListener Tap="OnTap" Hold="OnHold" DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted" Flick="OnFlick" PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/&gt; &lt;/toolkit:GestureService.GestureListener&gt; &lt;/Image&gt; &lt;/Grid&gt; </code></pre> <p>And the cs source:</p> <pre><code>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); } } </code></pre> <p>It works pretty well for small images (less then 2000x2000 pixels). But in my example, i have this huge metro map (<a href="http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.png" rel="noreferrer">http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.png</a> or vector <a href="http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.pdf" rel="noreferrer">http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.pdf</a>). It would be even nicer if the user could scale a vector image but even importing such a huge vector is a serious performance issue.</p> <p>Maybe i could split the image up into several "multi-scale images" and use this <a href="http://dotnetbyexample.blogspot.com/2010/08/windows-phone-7-multi-touch-panzoom.html" rel="noreferrer">http://dotnetbyexample.blogspot.com/2010/08/windows-phone-7-multi-touch-panzoom.html</a>, but i don't really know how to use his class :(</p> <p>Any ideas? How would you guys solve this problem? </p> <p>Thanks</p> <p>Richard</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload