How can draw strokes over each other with opacity using a inkPresenter?

Question

I want to use an inkpresenter so that each new stroke is laid above the previous ones creating a darken effect.

I have tried creating a new inkpresenter each time and adding it to a canvas, but the opacity effect only appears after I release the mouse. I want it to immediatly show as you are drawing. If I set the inkpresenter diretly to the content of the target element (no blending), the strokes have opacity as you draw.

Please add some code how you are using `InkPresenter` inyour code. I wrote a simple test application and it seems to work correctly. — Lukasz M, May 30 '12 at 19:09

score 0 · Accepted Answer · edited May 23 '17 at 10:34

You haven't posted any code showing how you are currently handling InkPresenter in your application. I've made a quick test program in WPf and it seems to work correctly with opacity.

I placed InkPresenter control in xaml and added PreviewMouseDown, PreviewMouseMove and PreviewMouseUp methods' handler to the code behind. The code I used to handle those events looks like this:

System.Windows.Ink.Stroke newStroke = null;

    private void inkPresenterSample_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        inkPresenterSample.CaptureMouse();

        //get mouse position and add first point to a new line to be drawn
        var mousePosition = e.GetPosition(inkPresenterSample);
        var stylusStartPoint = new StylusPointCollection();
        stylusStartPoint.Add(new StylusPoint(mousePosition.X, mousePosition.Y));

        //set line's attributes, it real application this should be probably done outside this method
        var drawingAttributes = new System.Windows.Ink.DrawingAttributes();
        //IMPORTANT: semi-transparent color is used, so the opacity effect is visible
        drawingAttributes.Color = System.Windows.Media.Color.FromArgb(110, 0, 0, 0);
        drawingAttributes.Width = 10;

        //create a new stroke to be drawn
        newStroke = new System.Windows.Ink.Stroke(stylusStartPoint, drawingAttributes);
        newStroke.StylusPoints.Add(new StylusPoint(mousePosition.X, mousePosition.Y));

        //add reference to a new stroke to the InkPresenter control
        inkPresenterSample.Strokes.Add(newStroke);
    }

    private void inkPresenterSample_PreviewMouseUp(object sender, MouseButtonEventArgs e)
    {
        inkPresenterSample.ReleaseMouseCapture();

        if (newStroke != null)
        {
            newStroke = null;
        }
    }

    private void inkPresenterSample_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        //if a stroke is currently drawn in the InkPresenter
        if (newStroke != null)
        {
            //add a new point to the stroke
            var mousePosition = e.GetPosition(inkPresenterSample);
            newStroke.StylusPoints.Add(new StylusPoint(mousePosition.X, mousePosition.Y));
        }
    }

It seems to work as you described and I can see the darker parts of lines where few of them are overlapping.

Update

The overlapping effect in the suggested solution works for several overlapping lines, but does not work if a single line overlapps itself. If you want to make it work in this case as well, you can try to:

use Canvas and add Polyline elements on it (update: this seems to work like the first solution suggested, so one line overlapping does not give the opacity effect)
take a look at drawing on Image element using DrawingContext described here, it may help: Drawing with mouse causes gaps between pixels

thanks a ton! your code really works. The main differences I think are that I was adding the stroke on mouseup instead of mousedown and that I was setting drawingattributes on the inkpresenter instead of the stroke. — Occham, May 30 '12 at 19:56

How can draw strokes over each other with opacity using a inkPresenter?

1 Answers1