mượt pinch-phóng to và panning trên Windows Phone 8

Question

tôi đã quản lý để thực hiện zoom nhúm và panning bởi hooking đến các sự kiện ManipulationDelta và ManipulationStarted (trên một điều khiển hình ảnh):

private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
    { 
     var transform = (CompositeTransform)image.RenderTransform; 

     // pan 
     transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X; 
     transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y; 

     // zoom 
     if (e.PinchManipulation != null) 
     { 
      transform.CenterX = e.PinchManipulation.Original.Center.X; 
      transform.CenterY = e.PinchManipulation.Original.Center.Y; 

      transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale; 
      transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale; 
     } 
    } 

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e) 
    { 
     // the user has started manipulating the screen, set starting points 
     var transform = (CompositeTransform)image.RenderTransform; 
     _scaleX = transform.ScaleX; 
     _scaleY = transform.ScaleY; 
     _translationX = transform.TranslateX; 
     _translationY = transform.TranslateY; 
    } 

Nhưng so với sự êm ái của phần còn lại của cửa sổ điện thoại giao diện người dùng nó cảm thấy rất placid và cứng. Không có quán tính trong phong trào.

Có cách nào giúp chuyển động mượt mà hơn không? Có sử dụng hoạt ảnh và bảng phân cảnh để tìm hiểu về nó không? Tôi đã thử bằng cách sử dụng ScrollView cho ít nhất nhận được panning mịn nhưng sau đó các sự kiện ManipulationDelta không bắn chính xác.

Answer 1

Tôi biết bạn đang nói về 8 và tôi sẽ đăng một liên kết đến một bài viết liên quan đến 7, nhưng nó đã rất hữu ích khi chơi xung quanh với Windows Phone vì vậy đây nó đi:

http://www.wintellect.com/cs/blogs/jprosise/archive/2011/01/19/building-touch-interfaces-for-windows-phones-part-3.aspx

Tôi không tưởng tượng rằng nhiều thay đổi kể từ đó ...

Answer 2

Tôi muốn nhận điều này ngay từ quan điểm toán học. Kết quả là một cái gì đó tương tự như đúng với PanAndZoomImage của Telerik. Nếu bạn không quan tâm, hãy chuyển thẳng đến đây gist (Nó hoạt động với WP7.1 +). Bạn sẽ cần tham khảo System.Windows.Interactivity và bộ công cụ Windows Phone.

Cách sử dụng:

<Image Source="http://i.imgur.com/ZbKlRzK.jpg"> 
    <i:Interaction.Behaviors> 
     <phoneApp1:PanAndZoomBehavior MaxZoom="10" /> 
    </i:Interaction.Behaviors> 
</Image> 

Math

Panning và zoom sử dụng 2 trong số 4 biến đổi của CompositeTransform, cụ thể là dịch và Scaling. Điểm mấu chốt là tìm hiểu cách soạn hai trong số các tỷ lệ đó + dịch chuyển đổi. Tôi sẽ sử dụng ký hiệu haskellish, bởi vì nó là ít gánh nặng để gõ và đọc. 'Nguyên thủy' của chúng tôi là

1. scale s = quy mô xung quanh (sx, sy) với sx yếu tố trong x hướng và sy theo hướng y
2. translate t = bù đắp tất cả các điểm của tx trong x hướng và ty trong y hướng

CompositeTransform quy mô xung quanh một điểm trung tâm, được thể hiện như

scaleAround c s = translate c . scale s . translate -c 

các quy tắc sau giữ (làm toán nếu bạn không tin tôi, tất cả các nhà khai thác được componentwise):

1. translate a . translate b = translate (a+b)
2. scale a . scale b = scale (a*b)
3. translate t . scale s = scale s . translate (t/s)

Một CompositeTransform là như

transform s c t = translate t . scaleAround c s 
       = translate (t+c) . scale s . translate -c 

Khi soạn hai trong số những biến đổi , chúng ta phải di chuyển xung quanh nguyên thủy cho đến khi chúng ta uch một mẫu ở trên.Hãy để a và b là hai CompositeTransform đó. Vì vậy, chúng tôi nhận được:

transform' = b . a 
      = translate bt . scaleAround bc bs . translate at . scaleAround ac as 
      = translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac 
      = translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac 
      = translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac 
      = translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac 
      = translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs) 
      = translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs) 

Điều này chỉ vì tôi đã thất vọng với số lượng tài liệu sâu sắc về lý do một số người nhất định làm những việc nhất định.

Đối với các mã thành phần thực tế, looko here

Answer 3

Tôi biết đó là một câu trả lời cuối nhưng đây là một dự án mẫu mà có thể giúp giải quyết vấn đề này http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7