Drehen Sie die Grafik in WPF Richtung Maus (wie eine analoge Wahl)

7
___ answer963108 ___

Um zu diesem Post hinzuzufügen, wird der Winkel zwischen dem Mauspunkt und dem Objektpunkt wie folgt berechnet:

%Vor%     
___ qstnhdr ___ Drehen Sie die Grafik in WPF Richtung Maus (wie eine analoge Wahl) ___ tag123wpf ___ Windows Presentation Foundation oder WPF ist ein Subsystem zum Rendern von Benutzeroberflächen in Windows-basierten Anwendungen. ___ tag123userinterface ___ Das System, über das Menschen mit einem Computer interagieren, wird "UI" genannt, was für "Benutzeroberfläche" steht. Dieses Tag kann für UI-bezogene Programmierfragen verwendet werden. Beachten Sie, dass es eine separate Stack Exchange-Site für Benutzeroberflächen, Interaktionen mit dem Computer und Benutzererlebnis gibt: http://ux.stackexchange.com. ___ tag123c ___ C # (sprich "Cis") ist eine objektorientierte Programmiersprache auf hohem Niveau, die zum Erstellen einer Vielzahl von Anwendungen entwickelt wurde, die auf dem .NET Framework (oder .NET Core) ausgeführt werden. C # ist einfach, leistungsfähig, typsicher und objektorientiert. ___ tag123controls ___ Verwenden Sie dieses Tag zum Programmieren von Szenarien in Bezug auf Steuerelemente (interaktive Elemente der Benutzeroberfläche). ___ answer32370520 ___

In meinem Fall habe ich dynamisch Formen erstellt, die sich in Richtung der Maus drehen sollen. Um das zu lösen, habe ich eine leichte Funktion verwendet. Alles was ich brauche ist folgendes:

  • Der Mittelpunkt der aktuell ausgewählten Form
  • Der Punkt vom letzten Mouseover-Schritt
  • Und der Punkt aus dem aktuellen Mouseover-Schritt

Es ist nicht notwendig, Methoden aus der Math-Bibliothek zu verwenden. Ich berechne den Winkel, der von der Differenz zwischen dem aktuellen Mausüberpunkt und dem vorherigen Mausüberpunkt und der Position in Bezug auf den Mittelpunkt abhängt. Schließlich füge ich den Winkel zum vorhandenen Winkel des aktuellen Objekts hinzu.

%Vor%     
___ answer963099 ___

Ich habe noch keine derartigen Steuerelemente gesehen (obwohl es eine Weile her ist, dass ich mir alle Steuerelemente angesehen habe, die WPF-Steuerungsanbieter anbieten), aber es ist relativ einfach, ein solches zu erstellen.

Sie müssen lediglich ein benutzerdefiniertes Steuerelement erstellen, das ein Bild (oder eine XAML-Zeichnung) enthält, das Sie drehen können, um der Maus zu folgen. Dann binden Sie eine RotateTransform an eine DependencyProperty "Angle" in Ihrem benutzerdefinierten Steuerelement, sodass bei der Aktualisierung von "angle" das Bild / die Zeichnung so gedreht wird, dass es übereinstimmt:

%Vor%

Wenn RenderTransformOrigin auf "0.5, 0.5" gesetzt wird, wird sichergestellt, dass sich das Steuerelement um seine Mitte dreht, anstatt sich um die obere linke Ecke zu drehen. das müssen wir auch bei der Winkelberechnung kompensieren.

Fügen Sie im Code hinter der Datei für Ihr Steuerelement Handler für die Maus und die Angle DependencyProperty hinzu:

%Vor%

Das Erfassen der Maus stellt sicher, dass Ihr Steuerelement auch dann weiterhin Mausaktualisierungen erhält, wenn der Benutzer das Steuerelement verlässt (bis er den Klick loslässt) und die Position der Maus relativ zum aktuellen Element (der Kontrolle), sollte Ihre Berechnung immer gleich sein, unabhängig davon, wo das Steuerelement tatsächlich auf dem Bildschirm rendert.

In diesem Beispiel berechnen wir, wenn die Maus bewegt wird, den Winkel zwischen ihr und der Mitte des Steuerelements und setzen dann diesen Winkel auf die Angle DependencyProperty, die wir erstellt haben. Da das angezeigte Bild an diese Winkeleigenschaft gebunden ist, wendet WPF automatisch den neuen Wert an, der dazu führt, dass der Knopf in Kombination mit der Mausbewegung gedreht wird.

Die Steuerung in Ihrer Lösung ist einfach; füge einfach hinzu:

%Vor%

Sie würden an die Eigenschaft "Angle" in VolumeControl binden, wenn Sie den Wert des Reglers an etwas in Ihrer Anwendung binden möchten. Dieser Wert ist derzeit in Grad angegeben, könnte jedoch eine zusätzliche Eigenschaft hinzufügen, die zwischen einem Winkel in Grad und einem für Sie sinnvollen Wert (z. B. einem Wert zwischen 0 und 10) konvertiert werden kann.

    
___
Adam Harte 07.06.2009, 22:45
quelle

3 Antworten

19

Ich habe noch keine derartigen Steuerelemente gesehen (obwohl es eine Weile her ist, dass ich mir alle Steuerelemente angesehen habe, die WPF-Steuerungsanbieter anbieten), aber es ist relativ einfach, ein solches zu erstellen.

Sie müssen lediglich ein benutzerdefiniertes Steuerelement erstellen, das ein Bild (oder eine XAML-Zeichnung) enthält, das Sie drehen können, um der Maus zu folgen. Dann binden Sie eine RotateTransform an eine DependencyProperty "Angle" in Ihrem benutzerdefinierten Steuerelement, sodass bei der Aktualisierung von "angle" das Bild / die Zeichnung so gedreht wird, dass es übereinstimmt:

%Vor%

Wenn RenderTransformOrigin auf "0.5, 0.5" gesetzt wird, wird sichergestellt, dass sich das Steuerelement um seine Mitte dreht, anstatt sich um die obere linke Ecke zu drehen. das müssen wir auch bei der Winkelberechnung kompensieren.

Fügen Sie im Code hinter der Datei für Ihr Steuerelement Handler für die Maus und die Angle DependencyProperty hinzu:

%Vor%

Das Erfassen der Maus stellt sicher, dass Ihr Steuerelement auch dann weiterhin Mausaktualisierungen erhält, wenn der Benutzer das Steuerelement verlässt (bis er den Klick loslässt) und die Position der Maus relativ zum aktuellen Element (der Kontrolle), sollte Ihre Berechnung immer gleich sein, unabhängig davon, wo das Steuerelement tatsächlich auf dem Bildschirm rendert.

In diesem Beispiel berechnen wir, wenn die Maus bewegt wird, den Winkel zwischen ihr und der Mitte des Steuerelements und setzen dann diesen Winkel auf die Angle DependencyProperty, die wir erstellt haben. Da das angezeigte Bild an diese Winkeleigenschaft gebunden ist, wendet WPF automatisch den neuen Wert an, der dazu führt, dass der Knopf in Kombination mit der Mausbewegung gedreht wird.

Die Steuerung in Ihrer Lösung ist einfach; füge einfach hinzu:

%Vor%

Sie würden an die Eigenschaft "Angle" in VolumeControl binden, wenn Sie den Wert des Reglers an etwas in Ihrer Anwendung binden möchten. Dieser Wert ist derzeit in Grad angegeben, könnte jedoch eine zusätzliche Eigenschaft hinzufügen, die zwischen einem Winkel in Grad und einem für Sie sinnvollen Wert (z. B. einem Wert zwischen 0 und 10) konvertiert werden kann.

    
Nicholas Armstrong 08.06.2009, 00:19
quelle
3

Um zu diesem Post hinzuzufügen, wird der Winkel zwischen dem Mauspunkt und dem Objektpunkt wie folgt berechnet:

%Vor%     
Ron Warholic 08.06.2009 00:30
quelle
0

In meinem Fall habe ich dynamisch Formen erstellt, die sich in Richtung der Maus drehen sollen. Um das zu lösen, habe ich eine leichte Funktion verwendet. Alles was ich brauche ist folgendes:

  • Der Mittelpunkt der aktuell ausgewählten Form
  • Der Punkt vom letzten Mouseover-Schritt
  • Und der Punkt aus dem aktuellen Mouseover-Schritt

Es ist nicht notwendig, Methoden aus der Math-Bibliothek zu verwenden. Ich berechne den Winkel, der von der Differenz zwischen dem aktuellen Mausüberpunkt und dem vorherigen Mausüberpunkt und der Position in Bezug auf den Mittelpunkt abhängt. Schließlich füge ich den Winkel zum vorhandenen Winkel des aktuellen Objekts hinzu.

%Vor%     
user3774669 03.09.2015 08:22
quelle

Tags und Links