CODEWITHSUNDEEP
wpfcanvas
Harald
Harald

Reputation: 141

Clear pixels in WPF Canvas

I have a transparent canvas on which I can draw arbitrary polylines with the mouse. Most of the lines are semi-transparent.

Now I need some kind of an eraser tool, i.e. a polyline with an eraser brush, which allows to clear pixels along the mouse movement.

With an opaque canvas I would simply use the background brush but in this case it is Color.FromArgb(0,0,0,0) and drawing with that has no effect.

The canvas seems to be in some kind of alpha blend mode which blends anything I draw on it with what already exists, unless I set the alpha channel to 255 in which case whatever is on the canvas will be overwritten. That does not help me, as I simply want to clear the pixels, i.e. make them fully transparent.

Any ideas?

Here's the main part of the code I'm using:



    public class WPFWindow : Window
{

    private Canvas canvas = new Canvas();

    private bool LDown = false;
    private Polyline lines;
    private PointCollection points;

    public WPFWindow()
    {
        this.AllowsTransparency = true;
        this.WindowStyle = WindowStyle.None;
        this.Background = new SolidColorBrush( Color.FromArgb(50,0,0,0) );

        this.Width = 500;
        this.Height = 400;
        this.Top = this.Left = 0;
        canvas.Width = this.Width;
        canvas.Height = this.Height;
        canvas.Background = new SolidColorBrush( Color.FromArgb(0,0,0,0) );
        this.Content = canvas;

        this.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler( WPFWindow_MouseLeftButtonDown );
        this.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler( WPFWindow_MouseLeftButtonUp );
        this.MouseMove += new System.Windows.Input.MouseEventHandler( WPFWindow_MouseMove );
    }

    void WPFWindow_MouseMove( object sender, System.Windows.Input.MouseEventArgs e )
    {
        if( LDown )
        {
            points.Add( e.GetPosition(null) );
        }
    }

    void WPFWindow_MouseLeftButtonUp( object sender, System.Windows.Input.MouseButtonEventArgs e )
    {
        LDown = false;
    }

    void WPFWindow_MouseLeftButtonDown( object sender, System.Windows.Input.MouseButtonEventArgs e )
    {
        LDown = true;
        lines = new Polyline();
        points = new PointCollection();
        lines.Stroke = new SolidColorBrush( Color.FromArgb( 128, 180, 80, 80 ) );

        lines.StrokeThickness = 20;
        lines.Points = points;
        points.Add( e.GetPosition(null) );
        canvas.Children.Add( lines );
    }
}

Upvotes: 1

Views: 3479

Answers (2)

Lullaby
Lullaby

Reputation: 437

Use an InkCanvas instead of polylines. It has an eraser already implemented

Upvotes: 1

Nir
Nir

Reputation: 29584

The WPF Canvas control is not a drawing surface, it's a "Panel", a container that arranges multiple other controls.

Each Polyline you add to the Canvas is actually a FrameworkElement (a kind of lightweight control) and they are all drawn in order (it's like adding multiple labels or edit controls, there is no way a control can change the visual representation of another control on the window except for covering it up).

You may want to create an actual image draw the polylines on the image and display that image, then you can talk about clearing pixels.

Upvotes: 2

Related Questions