Drawing on Image

Question

I'm able to draw on the image using the below code. But my problem is, it is not a continuous line. It looks somehow broken. See below image for better understanding.

My XAML :

<Grid x:Name="Gridimage1" Grid.Column="0">
  <Image Name="image1" HorizontalAlignment="Left" VerticalAlignment="Top"  Stretch="Fill" >
  </Image>
</Grid>

My c# code :

  #region "Drawing on image"

    static WriteableBitmap writeableBitmap;
    static Image i;

    public void DrawingOnImage() // this function will be called after image load 
    {
        if (image1.Source != null)
        {
            i = new Image();
            RenderOptions.SetBitmapScalingMode(image1, BitmapScalingMode.NearestNeighbor);
            RenderOptions.SetEdgeMode(image1, EdgeMode.Aliased);
            BitmapSource BitmapSrc = new FormatConvertedBitmap(image1.Source as BitmapSource, PixelFormats.Default, null, 0);
            //writeableBitmap = new WriteableBitmap((int)image1.ActualWidth, (int)image1.ActualHeight, 96, 96, PixelFormats.Bgr32, null);
            writeableBitmap = new WriteableBitmap(BitmapSrc); 
            image1.Source = writeableBitmap;
            //image1.Stretch = Stretch.None;
            image1.HorizontalAlignment = HorizontalAlignment.Left;
            image1.VerticalAlignment = VerticalAlignment.Top;
            i = image1;
            image1.MouseMove += new MouseEventHandler(i_MouseMove);
            image1.MouseLeftButtonDown +=
            new MouseButtonEventHandler(i_MouseLeftButtonDown);
            image1.MouseRightButtonDown +=
            new MouseButtonEventHandler(i_MouseRightButtonDown);

        }
    }

    static void i_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        DrawPixel(e);
    }

    static void i_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            DrawPixel(e);
        }
    }

    static void DrawPixel(MouseEventArgs e)
    {
        double CR = i.Source.Height / i.ActualHeight;
        double RR = i.Source.Width / i.ActualWidth;
        int column = (int)(e.GetPosition(i).X * RR) ;
        int row = (int)(e.GetPosition(i).Y * CR);

        // Reserve the back buffer for updates.
        writeableBitmap.Lock();
        unsafe
        {
            // Get a pointer to the back buffer. 
            int pBackBuffer = (int)writeableBitmap.BackBuffer;

            // Fin d the address of the pixel to draw.
            pBackBuffer += row * writeableBitmap.BackBufferStride;
            pBackBuffer += column * 4;

            // Compute the pixel's color. 
            int color_data = 255 << 16; // R
            color_data |= 128 << 8;   // G
            color_data |= 255 << 0;   // B 

            // Assign the color data to the pixel.
            *((int*)pBackBuffer) = color_data;
        }

        // Specify the area of the bitmap that changed.
        writeableBitmap.AddDirtyRect(new Int32Rect(column, row, 1, 1));

        // Release the back buffer and make it available for display.
        writeableBitmap.Unlock();
    }

    #endregion

Image output :

You can see the line (pink color) I have drawn. It's not a continuous line. Where am I failing?

Update :
My findings after @loxxy's Inputs.Set oldx ,oldy to zero initialy.

   if (oldx == 0 && oldy == 0)
   {
     writeableBitmap.DrawLineAa(column, row, column, row, SelectedColor);              
   }
   else
   {
     if (Math.Abs(oldx - column) > 10 || Math.Abs(oldy - row) > 10)
      {
          writeableBitmap.DrawLineAa(column, row, column, row, SelectedColor);
      }
      else
      {
          writeableBitmap.DrawLineAa(column, row, oldx, oldy, SelectedColor);                
      }

    }
    oldx = column;
    oldy = row;

Answer 1

Since you are drawing it pixel by pixel, the mouse has to update the coordinates at a much faster rate.

And I believe it relates to the DPI of the mouse... And you can do nothing about that.

So instead try drawing a line. So something like this in WPF:

WriteableBitmapExtensions.DrawLine

Answer 2

The mouse events you receive will not return consecutive points. If you move the mouse fast, the points returned will not be next to each other. If you want to draw a line under the mouse cursor, you need to draw a line from the previous point drawn to the current point on every MouseMove or MouseButtonDown callback.