2011-02-03 39 views
5

Tôi thấy điều này Pinch-to-zoom ví dụ tại http://forums.create.msdn.comPinch-để-zoom trên hình ảnh lớn?

Đây là 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> 

Và nguồn 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); 
     } 
    } 

Nó hoạt động khá tốt cho hình ảnh nhỏ (ít sau đó 2000x2000 pixel). Nhưng trong ví dụ của tôi, tôi có bản đồ tàu điện ngầm khổng lồ này (http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.png hoặc vector http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.pdf). Nó thậm chí sẽ đẹp hơn nếu người dùng có thể mở rộng một hình ảnh vector nhưng thậm chí việc nhập một vectơ khổng lồ như vậy là một vấn đề hiệu suất nghiêm trọng.

Có lẽ tôi có thể chia hình ảnh thành nhiều "hình ảnh đa quy mô" và sử dụng http://dotnetbyexample.blogspot.com/2010/08/windows-phone-7-multi-touch-panzoom.html này, nhưng tôi không thực sự biết làm thế nào để sử dụng lớp mình :(

Bất kỳ ý tưởng? Làm thế nào bạn sẽ giải quyết kẻ vấn đề này?

Cảm ơn

Richard

Trả lời

6

Cách tiếp cận lý tưởng cho giải pháp của bạn là sử dụng MultiScaleImage, được thiết kế đặc biệt để hiển thị dữ liệu hình ảnh lớn. Tuy nhiên, để làm việc với MultiScaleImage, bạn cần lấy dữ liệu iamge của mình được chuẩn bị trong định dạng đúng. Về cơ bản, bạn cần hình ảnh được cắt lát và thay đổi kích thước, v.v. để người dùng tải ít thông tin nhất có thể trong khi họ phóng to và thu nhỏ hình ảnh của bạn.

DeepZoom documentation mô tả quy trình và có liên kết đến công cụ Trình soạn thảo DeepZoom mà bạn sử dụng để chuẩn bị dữ liệu hình ảnh của mình.

Khi bạn đã có cách tiếp cận MultiScaleImage hoạt động, sau đó bạn có thể xem xét sử dụng hành vi Multitouch của Laurent (nếu cần) để cung cấp tương tác người dùng bổ sung.

+0

Cảm ơn bạn đã trả lời. Không thành công tho! Tôi đã quản lý để xem hình ảnh đa chức năng trên điện thoại của mình, nhưng phải mất nhiều thời gian để tải và tương tác sẽ không hoạt động. Dưới đây là các tập tin dpi: http://www50.zippyshare.com/v/82097441/file.html Và XAML của tôi: Richard

1

Có giới hạn kích thước trên Silverlight UIElements trên điện thoại. Như bạn đã phát hiện, đây là 2000x2000 pixel. Không một điều khiển nào có thể lớn hơn điều này - do đó vấn đề của bạn.

Nếu bạn phải sử dụng hình ảnh lớn hơn giao diện này tại MultiScaleImage.

Cũng cần lưu ý về khả năng xảy ra sự cố bộ nhớ nếu bạn đang sử dụng các tệp hình ảnh rất lớn.

Các vấn đề liên quan