none
Wie diesen Farbverlauf erstellen? RRS feed

  • Frage

  • Hallo,
    Ich muss in einem rectangle einen speziellen Farbverlauf erstellen:

    Dieser verändert jedoch sehr oft die Farbe in der unteren rechten Ecken. Sodass es sehr rechenintensiv wird, ihn in in C# zu berechnen und als Bild anzuzeigen, das merkt man auch an der Leistung.

    Nun meine Frage: Gibt es eine möglichkeit einen Farbverlauf mit 4 Eckpunkten, direkt aus WPF heraus zu Zeichnen, also so ähnlich wie ein LinearGradientBrush?


    Koopakiller - http://koopakiller.ko.ohost.de/

    Montag, 16. April 2012 21:01
    Moderator

Antworten

  • Hallo,

    möglicherweise kannst du zwei schrag angeordnete Brushes übereinanderlegen und mittels Opacity die Farbverläufe austarrieren.

    Viele Grüße,

    MB


    Freitag, 20. April 2012 13:45
  • Das mit den Übernander liegenden Brushes war das was ich suchte :) Hier mal der Code für 2 Beispile:

            <Rectangle Width="150" Height="150"  Margin="12,12,341,149">
                <Rectangle.Fill>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid>
                                <Rectangle Width="25" Height="25" Fill="Black">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1" />
                                            <GradientStop Color="#00000000" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <Rectangle Width="25" Height="25">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#00000000" Offset="1" />
                                            <GradientStop Color="Black" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Red" Offset="1" />
                                            <GradientStop Color="White" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Height="150" Margin="341,12,12,149" Width="150">
                <Rectangle.Fill>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid>
                                <Rectangle Height="25" Width="25">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1" />
                                            <GradientStop Color="#00000000" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Lime" Offset="0" />
                                            <GradientStop Color="Blue" Offset="0.984" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle Height="25" Width="25">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Red" Offset="1" />
                                            <GradientStop Color="White" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#00000000" Offset="1" />
                                            <GradientStop Color="Black" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.Fill>
            </Rectangle>

    Aber auch der Adobe Gradient Picker Clone hat mich inspiriert.


    Koopakiller - http://koopakiller.ko.ohost.de/

    Sonntag, 22. April 2012 14:00
    Moderator
  • Donnerstag, 19. April 2012 14:01
    Moderator

Alle Antworten

  • Hallo Koopakiller,

    Übersicht über WPF-Pinsel finden Sie unter [1]. Unter Link [2] wird beschrieben, wie die Objekte SolidColorBrush, LinearGradientBrush und RadialGradientBrush verwendet werden, um mit Volltonfarben, linearen Farbverläufen und radialen Farbverläufen zu zeichnen.

    [1]http://msdn.microsoft.com/de-de/library/aa970904.aspx
    [2]http://msdn.microsoft.com/de-de/library/ms754083.aspx

    Ich hoffe die Informationen helfen Ihnen!

    Viele Grüße,
    Anna Koch
    MSDN Hotline für MSDN Online Deutschland

    Disclaimer:
    Bitte haben Sie Verständnis dafür, dass wir hier auf Rückfragen gar nicht oder nur sehr zeitverzögert antworten können.
    Bitte nutzen Sie für Rückfragen oder neue Fragen den telefonischen Weg über die MSDN Hotline:http://www.msdn-online.de/Hotline
    MSDN Hotline: Schnelle & kompetente Hilfe für Entwickler: kostenfrei!

    Es gelten für die MSDN Hotline und dieses Posting dieseNutzungsbedingungen, Hinweise zuMarkenzeichen sowie die allgemein gültigenInformationen zur Datensicherheit sowie die gesondertenNutzungsbedingungen für die MSDN Hotline.

    Dienstag, 17. April 2012 14:43
  • Danke für die Antwort, so wie es scheint gibt es kein Farbverlauf für ein solches Vorhaben.
    Eigentlich ging es mir nur darum es von der WPF über die gpu rendern zu lassen und das nicht selbst machen zu müssen, da man ganz kleine hänger im Programm bei der aktualisierung merkt.


    Koopakiller - http://koopakiller.ko.ohost.de/

    Mittwoch, 18. April 2012 15:24
    Moderator
  • Hi Koopakiller

    Mehr so als Idee, denn als erprobte Lösung:
    Vielleicht kannst Du ja eine RadialGradientBrush verwenden.
    Die ist zwar wie der Name sagt für kreisförmige Objekte gedacht
    Aber man kann den Kreis ja rechteckig Clippen....

    Gruß,
    Christoph

    Mittwoch, 18. April 2012 22:18
  • Nach meinem bisherigen wissen geht das leider nicht, da ein RadialGradientBrush nur eine Randfarbe bzw. eine Mittelpunktarbe (Dazwischen natürlich noch mehr) hat.
    Wenn ich als Randfarbe (Offset="1") Schwarz, und als Mittelpunktfarbe (Offset="0") Weiß nehme, und das dann verschiebe fehlt mir immernoch das Rot, Blau, ... was ich eben brauche.

    Koopakiller - http://koopakiller.ko.ohost.de/

    Donnerstag, 19. April 2012 13:12
    Moderator
  • Donnerstag, 19. April 2012 14:01
    Moderator
  • Hhm okay nimm gpu... :-)
    Donnerstag, 19. April 2012 14:01
  • Hallo,

    möglicherweise kannst du zwei schrag angeordnete Brushes übereinanderlegen und mittels Opacity die Farbverläufe austarrieren.

    Viele Grüße,

    MB


    Freitag, 20. April 2012 13:45
  • Das mit den Übernander liegenden Brushes war das was ich suchte :) Hier mal der Code für 2 Beispile:

            <Rectangle Width="150" Height="150"  Margin="12,12,341,149">
                <Rectangle.Fill>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid>
                                <Rectangle Width="25" Height="25" Fill="Black">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1" />
                                            <GradientStop Color="#00000000" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <Rectangle Width="25" Height="25">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#00000000" Offset="1" />
                                            <GradientStop Color="Black" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Red" Offset="1" />
                                            <GradientStop Color="White" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Height="150" Margin="341,12,12,149" Width="150">
                <Rectangle.Fill>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Grid>
                                <Rectangle Height="25" Width="25">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1" />
                                            <GradientStop Color="#00000000" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Lime" Offset="0" />
                                            <GradientStop Color="Blue" Offset="0.984" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle Height="25" Width="25">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="Red" Offset="1" />
                                            <GradientStop Color="White" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#00000000" Offset="1" />
                                            <GradientStop Color="Black" Offset="0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.Fill>
            </Rectangle>

    Aber auch der Adobe Gradient Picker Clone hat mich inspiriert.


    Koopakiller - http://koopakiller.ko.ohost.de/

    Sonntag, 22. April 2012 14:00
    Moderator