Silverlight Snippet: Freihand zeichnen

In Silverlight ist es mit der InkPresenter-Klasse möglich, mit der Maus auf einer virtuellen Leinwand freihand zu zeichnen. Wir müssen dazu lediglich einige Maus-Events des InkPresenters abfangen und entsprechend verarbeiten. Dazu definieren wir ersteinmal einen InkPresenter im XAML:

<Grid x:Name="LayoutRoot">

        <InkPresenter x:Name="inkPresenter"
                      Background="Beige"
                      MouseLeftButtonDown="OnMouseDown"
                      MouseLeftButtonUp="OnMouseUp"
                      MouseMove="OnMouseMove" />

</Grid>

Im Code-Behind definieren wir folgende private Variablen:

private DrawingAttributes attributes;
private Stroke currentStroke;

Die DrawingAttributes-Klasse repräsentiert die Eigenschaften unseres virtuellen Pinsels wie Farbe oder Strichstärke.
Ein Stroke stellt die aktuell gezeichnete Figur (bzw. den gezeichneten Strich) dar, die aus einer Sammlung von Punkten besteht.

Im Konstruktor der MainPage legen wir die Eigenschaften unseres Pinsels fest:

public MainPage()
        {
            InitializeComponent();

            attributes = new DrawingAttributes();
            attributes.Color = Colors.Blue;
            attributes.Height = 10;
            attributes.Width = 2;
        }

Neben der Farbe legen wir auch die Größe des Pinsels fest. Dabei wählen wir in diesem Beispiel eine unterschiedliche Höhe und Breite, um einen kalligrafischen Effekt ähnlich eines Füllfederhalters zu erzielen.

Wenn der Benutzer die Maustaste drückt, erzeugen wir einen neuen (bisher aus keinen Punkten bestehenden) Strich, geben ihm die gewünschten Pinseleigenschaften mit und fügen ihn der Liste von Strichen des InkPresenters hinzu:

 private void OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            currentStroke = new Stroke();
            currentStroke.DrawingAttributes = attributes;;
            inkPresenter.Strokes.Add(currentStroke);
        }

Lässt der Benutzer die Maustaste wieder los, setzen wir den aktuellen Strich auf null, um im nächsten Event zu merken, dass gerade nicht gezeichnet werden soll:

private void OnMouseUp(object sender, MouseButtonEventArgs e)
        {
            currentStroke = null;
        }

Im MouseMove-Event schließlich fügen wir alle Punkte, die seit der letzten Mausbewegung gezeichnet wurden, unserem Strich hinzu. Dies tun wir aber nur, wenn die Maus noch immer gedrückt wird (currentStroke also nicht null ist). Die seit dem letzten Event hinzugekommenen Punkte erhalten wir aus einem der Argumente (MouseEventArgs) des Event-Handlers:

private void OnMouseMove(object sender, MouseEventArgs e)
        {
            if (currentStroke == null)
                return;

            foreach (StylusPoint point in e.StylusDevice.GetStylusPoints(inkPresenter))
                    currentStroke.StylusPoints.Add(point);
        }

Wenn ihr das Programm jetzt ausführt, solltet ihr wie gewünscht mit der Maus auf der Silverlight-Page zeichnen können.

Kommentare

3 Nachrichten zu “Silverlight Snippet: Freihand zeichnen”

  1. Hechtsuppe on 23. September 2010 18:59

    Hey, danke für dieses tolle Beispiel, ich versuche gerade, ein Feeling für Silverlight zu erlangen, das Beispiel hat mir schon einen schönen Grundstein gelegt.
    Vielleicht solltest du nur noch die using Direktive Windows.Ink erwähnen 🙂

  2. Catarina Turnbull on 15. Februar 2011 06:00

    extended listing you’ve procure

  3. Kris Albright on 16. Februar 2011 07:03

    I’d be inclined to settle with you on this. Which is not something I usually do! I really like reading a post that will make people think. Also, thanks for allowing me to comment!