ViewportControl Pinch Zoom Center

Question

Hej Ich spiele mit einer App für Windows Phone 8, mit MVVM.

Ich habe ein Problem mit dem Ermitteln der Mitte eines Pinch Zoom und Verständnis der Grenzen vollständig auf dem Viewportcontroller. Und schließlich die Konfiguration des Viewportscontrollers, um das gesamte Bild zu scrollen. Mein XAML-Code ist:

<Grid> 
    <StackPanel> 
     <ViewportControl Bounds="0,0,1271,1381.5" Height="480" Width="800" CacheMode="BitmapCache" RenderTransformOrigin="{Binding KontaktPunkter}" Canvas.ZIndex="1"> 
      <ViewportControl.RenderTransform> 
       <CompositeTransform x:Name="myTransform" ScaleX="1" ScaleY="1" TranslateX="0" TranslateY="0" /> 
      </ViewportControl.RenderTransform> 

      <View:Picture/> 

     </ViewportControl> 


    </StackPanel> 
    <View:PopUpUC DataContext="{Binding PopUp}"/> 
</Grid> 

Soweit ich das Bounds ist der Bereich, ich will verstehen können, blättern, und die Höhe und Breite ist die Fenstergröße der Steuerung ist das richtig?

Antwort Ja, es ist korrekt.

Auf den zweiten Teil :) Holen Sie sich die Mitte der Prise Zoom-Bewegung.

public void ZoomDelta(ManipulationDeltaEventArgs e) 
    { 

     FrameworkElement Element = (FrameworkElement)e.OriginalSource; 
     ViewportControl Picture; 
     Grid PictureGrid; 
     double MainWidth = Application.Current.RootVisual.RenderSize.Height; 
     double MainHeight = Application.Current.RootVisual.RenderSize.Width; 

     if (Element is ViewportControl) 
     { 
      Picture = Element as ViewportControl; 
     } 
     else 
     { 
      Picture = FindParentOfType<ViewportControl>(Element); 
     } 

     if (Element is Grid) 
     { 
      PictueGrid = Element as Grid; 
     } 
     else 
     { 
      PictureGrid = FindParentOfType<Grid>(Element); 
     } 

     Grid ScreenGrid = FindParentOfType<Grid>(PictureGrid); 

     if (e.PinchManipulation != null) 
     { 

      var newScale = e.PinchManipulation.DeltaScale * Map.previousScale; 


      if (!IsZooming) 
      { 
       Point FingerOne = e.PinchManipulation.Current.PrimaryContact; 
       Point FingerTwo = e.PinchManipulation.Current.SecondaryContact; 
       Point center = new Point((FingerOne.X + FingerTwo.X)/2, (FingerOne.Y + FingerTwo.Y)/2); 
       KontaktPunkter = new Point(center.X/Picture.Bounds.Width, center.Y/Picture.Bounds.Height); 

       IsZooming = true; 
      } 


      var newscale = Map.imageScale * newScale; 
      var transform = (CompositeTransform)Picture.RenderTransform; 

      if (newscale > 1) 
      { 
       Map.imageScale *= newScale; 

       transform.ScaleX = Map.imageScale; 
       transform.ScaleY = Map.imageScale; 

       } 
      else 
      { 

       transform.ScaleX = transform.ScaleY = 1; 
      } 


     } 

     e.Handled = true; 
    } 

In dem Fall, wenn (! IsZooming), ich versuche, das Zentrum zu berechnen. Ich habe auch versucht mit den verschiedenen Zentren, die in der Veranstaltung e gefunden werden können. ohne Erfolg. Was mache ich falsch mit der Berechnung des Zentrums?

Endlich, nachdem ich gezoomt habe, kann ich nicht mehr das gesamte Bild schwenken. Ich muss daher einige Variablen ändern, bin aber nicht in der Lage gewesen, sie beim Debuggen oder Durchsuchen des Webs genau zu lokalisieren. Irgendeine Idee dafür?

Antwort Das Bild sollte, der Größe verändert werden und die Grenzen des Darstellungs sollte auf die neue Größe des skalierte Bild eingestellt werden.

bearbeiten Abschluss Problem in die Mitte findet, und das Problem ist, wenn diese Situation eintritt: da das e.PinchManipulation.Current auf hell Platz relativ gibt, und ich möchte es den großen Platz relativ, dh die Grenzen. Wie macht man das?

Answer 1

Um dieses Problem zu beheben, würde ich Folgendes tun. Der Viewportscontroller verfügt über einen Scrollviewer und ein Ansichtsfenster. diese

Die Grundlagen sind:

Während das Bild, das Sie haben, ist „ungezoomten“, die Scroll hat die volle Kontrolle und die ViewportControl tut nichts. Wenn Sie mit dem Pinching beginnen, sperren Sie den Scrollviewer, indem Sie die vertikaleScrollleiste deaktivieren UND das viewport.height = scrollviewer.height festlegen. Dies neutralisiert den Scollviewer. Sie können einen temporären Zoom mithilfe der Image ScaleTransform ausführen. Wenn Sie fertig sind, ändern Sie die Größe Ihres tatsächlichen Bildes, so dass es innerhalb des ViewportControls Platz beansprucht. Mit dem viewportControl können Sie nun das gezoomte Bild mit einem schönen Rücksprung bewegen. Wenn Sie wieder herauszoomen, aktivieren Sie den Scrollviewer erneut. (Stellen Sie die Höhe auf die Bildschirmhöhe ein und schalten Sie die Bildlaufleiste ein.) FYI, ich vergesse komplett, warum da eine Leinwand ist, aber ich fühle, dass es wichtig ist. Siehe unten:

Während die Probe unter nicht tut, was Sie tun wollen, basiert ich meinen Code auf der MEDIA VIEWER innerhalb dieser Probe und modifiziert es: Grundlinsenprobe

Allerdings ist zu beachten, dass es für Bild zoomen.