Wie mache ich TextBubbleBorder-Ecken außerhalb des Rechtecks ​​transparent?

Textblasenrand transparent außerhalb des Rechtecks

Mit der Klasse „TextBubbleBorder“ können Benutzer abgerundete Rechteckränder um Komponenten mit anpassbaren Dicken, Radien usw. erstellen. und Zeigergröße. Kürzlich wurde gefordert, die Ecken des Rahmens außerhalb des Rechtecks ​​transparent zu machen, um darunter liegende Komponenten anzuzeigen.

Das Problem

Zunächst wurde versucht, einen Ansatz zu finden Löschen Sie die Hintergrundfarbe einer Beschriftung außerhalb des Rahmens, indem Sie einen Clip verwenden und „clearRect()“ aufrufen. Während dieser Ansatz die Hintergrundfarbe innerhalb des Rahmens einschränkt, löst er das Problem in Fällen, in denen sich im übergeordneten Container eine nicht standardmäßige Farbe befindet, nicht vollständig.

Die Lösung

Um dieses Problem zu beheben, besteht die akzeptierte Lösung darin, die Hintergrundfarbe der übergeordneten Komponente überall außerhalb des Clips der Textblase zu malen. Dies wird mit den folgenden Schritten erreicht:

1. Ermitteln Sie die übergeordnete Komponente der Komponente mit dem Rand.
2. Erstellen Sie eine „Fläche“, die den Randbereich darstellt, indem Sie die Fläche der Textblase davon subtrahieren ein Rechteck, das die gesamte Fläche der Komponente darstellt.
3. Verwenden Sie diesen Randbereich als Clip, um die Hintergrundfarbe des übergeordneten Elements zu malen.

Durch diesen Ansatz werden die Ecken außerhalb des Rechtecks ​​transparent. Dadurch werden die darunter liegenden Komponenten sichtbar. Der bereitgestellte Beispielcode aktualisiert die Klasse „TextBubbleBorder“, um diese Lösung zu integrieren.

Hinweis:

Es ist wichtig hervorzuheben, dass der von Ihnen bereitgestellte Code einen Clipping-Fehler enthält , was in der akzeptierten Antwort auf eine andere verwandte Frage gelöst wird. Für optimale Ergebnisse sollte dieses Update zusammen mit der Transparenzlösung integriert werden.

Das obige ist der detaillierte Inhalt vonWie mache ich TextBubbleBorder-Ecken außerhalb des Rechtecks ​​transparent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!