WPF - WritablebitmapEx render a smooth line

Question

I need to render a "smooth" line using a WritableBitmap' i'm using WritableBitmapExtenstions.

Every 12 ms i get 12 points consisting of an (X,Y) where the Y is normalized to the center of the screen, and the X represents a pixel on the the image surface (Bitmap) .

Init :

 _wb =  new WriteableBitmap((int)mainGrid.ActualWidth, (int)mainGrid.ActualHeight, 96.0, 96.0, PixelFormats.Pbgra32, null);
 image.Source = _wb;

 CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

CompositionTarget_Rendering :

   Point [] points = null;
   if (blocks.TryDequeue(out points)) // blocks is a ConcurrentQueue which gets enqueued on a timer interval on another thread.
   {
       using (_wb.GetBitmapContext())
       {                    
           Draw(points);
       }
   }

Draw :

   private void Draw(Point[] points)
   {
        int x1, y1, x2, y2;

        if (lastX != 0 && lastY != 0)
        { // Draw connection to last line segment.
            x1 = lastX;
            y1 = lastY;
            x2 = (int)points[0].X;
            y2 = (int)points[0].Y;

            _wb.DrawLine(x1, y1, x2, y2, Colors.Red);
        }

        for (int i = 0; i < points.Count() - 1; i++)
        {// draw lines. [0],[0] - [1],[1]  ; [1],[1] - [2],[2]   .....and so on.
            x1 = (int)points[i].X;
            y1 = (int)points[i].Y;
            x2 = (int)points[i + 1].X;
            y2 = (int)points[i + 1].Y;

            _wb.DrawLine(x1, y1, x2, y2, Colors.Red);
        }

        lastX = (int)points[points.Count() - 1].X;
        lastY = (int)points[points.Count() - 1].Y;      
   }

The result :

enter image description here

Well the lines are exactly in place , but the way it was drawn was not smooth even tough i used a Writablebitmap and drew all the lines on the Rendering event , each segment was still rendered as a batch.

so to conclude should i draw one pixel at a time in order to make this smooth ? if you look as the WritablebitmapEx Curve sample the project named "WriteableBitmapExCurveSample.Wpf" (This will require you to download the samples from the link above)

you can see the kind of smoothness i wan't to achieve .

i can try , but i was hoping to use what i know and not go back to winforms — eran otzap, Feb 26 '14 at 14:32
If you dont find a simpler solution that might help you [DrawCurve](http://floris.briolas.nl/floris/2009/04/addcurve-for-wpf-cardinal-spline/) — γηράσκω δ' αεί πολλά διδασκόμε, Feb 26 '14 at 14:52
You should not draw lines but a curve of points `int[] pts = new int[] { 10, 5, 20, 40, 30, 30}; writeableBmp.DrawCurve(pts, 0.5, Colors.Yellow);` as in the example link. — γηράσκω δ' αεί πολλά διδασκόμε, Feb 26 '14 at 15:02
Could you just add a screenshot of what you are trying to get? Instead of requiring us to download and run a project? — klugerama, Feb 28 '14 at 19:43
@klugerama i did , it is the way it was rendered which which is the problem , think of of a line from (0,Height/2) - (Width,Height/2) which would be drawn point by point as if you where drawing it with a pencil , i really don't know what the problem is to understand that i want to render it in a "real time" way , the drawing is not the issue , telling me about curves and anti aliasing no body who commented here understood the problem. — eran otzap, Mar 01 '14 at 17:48
I forgot about this question , someone just up voted it. any ways the trick is using writablebitmap but only draw when CompostionTarget.Rendering is fired. then the line is rendered smoothly like it is being drawn. — eran otzap, May 26 '15 at 07:56

score 2 · Answer 1 · answered Feb 24 '14 at 02:23

2

Try using the DrawLineAa (Aa == Antialiased) extension method instead of DrawLine.

answered Feb 24 '14 at 02:23

Monroe Thomas

4,962
1
17
21

it looks better , but the rendering is exactly the same. +1 for effort. – eran otzap Feb 24 '14 at 08:09
@eranotzap your comment is contradictory. if it looks better then the rendering can't be the same. can you clarify or update your question with the use DrawLinaA? – Patrick Klug Mar 02 '14 at 01:26
what i mean by rendering is the "Smoothness" in which it was drawn right now you get like a flickering addition of segments , where i wan't it to be shown as if i drew it pixel by pixel, like drawing with a pencil , i don't care what i draw it is the way it is rendered onto the screen.( every body here is talking about the smoothness of the line). – eran otzap Mar 02 '14 at 06:32

score 2 · Answer 2 · answered Mar 02 '14 at 10:48

2

For the most proper result, you could apply a post-fx matrix filter. http://lodev.org/cgtutor/filtering.html

I don't remember well how to implement this with asp.net but i think there is something similar in CompositionTarget.

answered Mar 02 '14 at 10:48

Antoine C.

3,730
5
32
56

WPF - WritablebitmapEx render a smooth line

2 Answers2