Blase programmgesteuert zeichnen

Erstellen Sie ein benutzerdefiniertes Drawable und verwenden Sie es als Hintergrund für den Container, in den Sie Ihren Text oder andere Ansichten einfügen.
Sie müssen das Padding des Hintergrunds ändern, um den Zeiger der Blase zu berücksichtigen.
Mit dem folgenden Code können Sie die Ausrichtung des Zeigers als LINKS, MITTE oder RECHTS festlegen.
Dies ist nur eine Basisversion, um Ihnen eine Idee zu geben. Sie können problemlos einen Setter für die Bubble-Farbe hinzufügen oder für zusätzliche Flexibilität Stricheigenschaften zu 'mPaint' hinzufügen.

Verwendung
Das folgende Beispiel zeigt, wie Sie BubbleDrawable verwenden können.

MainActivity.java

activity_main.xml

Offensichtlich ist es nie eine gute Idee, Code in Ihrer App zu haben, den Sie nicht verstehen, also schreibe ich nicht einfach einen Haufen Gleichungen in Java-Code für Sie aus. Wenn Sie jedoch die unten stehende Mathematik befolgen und verstehen, ist es für Sie relativ einfach, die beschriebenen Gleichungen in Ihrem Code zu verwenden und den Bogen zu zeichnen.

Um eine abgerundete Spitze auf dem Zeiger zu erreichen, müssen Sie updatePointerPath() ändern.
Im Moment verwendet es nur rLineTo (), um drei Linien zu zeichnen, die ein Dreieck bilden.
Es gibt eine andere Methode in der android Path -Klasse namens arcTo() , die das folgende Format annimmt:

Sie können diese Methode verwenden, um Ihren Bogen an der Spitze des Zeigers zu zeichnen, aber Sie müssen zuerst ein paar Dinge ausarbeiten.

Sie können bereits die Koordinaten der drei Ecken des Zeigerdreiecks berechnen. Das macht updatePointerPath() bereits. Sehen Sie sich nun das folgende Diagramm an. Um arcTo() zu verwenden, müssen Sie Folgendes berechnen:

1. Die Koordinaten des Punktes T , an der Ihr Bogen beginnt.
2. Die Koordinaten der oberen linken und unteren rechten Ecke des umgrenzenden RectF
3. Ihr Startwinkel ()
4. Ihr Pfeilwinkel (2 * )

Der Startwinkel kann leicht mit der grundlegenden Triggerung gefunden werden, wie in der Abbildung unten gezeigt.

Hinweis: Es wird am besten sein, wenn Sie bei allen Winkeln anstelle von Grad Radian verwenden, da dies alle trigonometrischen Funktionen in der android 'Math' Klasse erfordern.
In diesem Sinne:

• Es gibt 2 Radianer in einem Kreis
• Die drei Winkel in einem Dreieck addieren sich zu Radianten
• Ein rechter Winkel ist / 2 Radianer

Wenn Sie also die drei Winkel in dem Dreieck aus den Punkten C , T und P hinzufügen, erhalten Sie:

+ + < img src="https://i.stack.imgur.com/f81h3.png"> / 2 =

Deshalb

= / 2 -

Wir haben nun und .

Als nächstes ist d der Abstand zwischen dem Punkt P und dem unteren Rand der Begrenzungsbox.
Sie können es erhalten, indem Sie den Abstand vom Punkt C zum Punkt P berechnen und dann den Radius r subtrahieren.
Jetzt:

sin () = r / (Entfernung von C zu P )

Daher:

Entfernung von C zu P = r / sin ()

Und so ist der Abstand d der Abstand vom Punkt C zum Punkt P minus dem Radius r , wir bekommen:

d = ( r / sin ()) - < stark> r

Das gibt Ihnen alle Informationen, die Sie benötigen, um die Koordinaten der oberen linken und unteren rechten Ecke des umgebenden RectiF zu berechnen.

Jetzt müssen Sie nur noch die Koordinaten des Punktes T berechnen.

Berechnen Sie zuerst die Entfernung von P zu T .
Angesichts dessen:

tan () = r / (Entfernung von P zu T )

Wir bekommen:

Entfernung von P zu T = r / tan ()

Schließlich fügen Sie einen weiteren Punkt zum Diagramm hinzu ....

Das können wir sehen:

sin () = (Abstand von P zu A ) / (Abstand von P zu T )

Also:

Abstand von P zu A = (Abstand von P zu T ) * sin ()

Ähnlich:

cos () = (Abstand von T zu A ) / (Abstand von P zu T ) p>

Also:

Abstand von T zu A = (Abstand von P zu T ) * cos ()

Mit dieser Information können Sie nun die Koordinaten des Punktes T berechnen!

Wenn Sie das alles verstanden haben, dann ist die Codierung von hier aus einfach. Wenn Sie sich nicht sicher sind, fragen Sie einfach.

Im Folgenden finden Sie eine Idee, wie das aktualisierte updatePointerPath() aussehen könnte.