Drawing with mouse causes gaps between pixels

If you want to draw a line, you shouldn't just change colors of one pixel at a time, but rather save position of the mouse in each MouseMove event handling method.

Then, you should draw a line between previous position (the one saved from the previous event occurrence) and draw a Line between those two points. This will make the line to be continuous. Information about drawing lines on WriteableBitmap can be found here: Drawing line using WPF WriteableBitmap.BackBuffer.

After drawing the line, don't forget to update the previous position saved to the current one :).

UPDATE

I've also found another solution.

Define XAML with Image you want to draw on:

<Window x:Class="SampleWPFApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="500" Width="520" Loaded="Window_Loaded" PreviewMouseDown="Window_PreviewMouseDown">
<Grid x:Name="layoutRoot" Background="Transparent">
    <Image x:Name="image" />
</Grid>

And then, add code behind with the events handled:

//set width and height of your choice
RenderTargetBitmap bmp = null;
//...
private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        //initialize RenderTargetBitmap object
        bmp = new RenderTargetBitmap((int)this.ActualWidth, (int)this.ActualHeight, 90, 90, PixelFormats.Default);

        //set initialized bmp as image's source
        image.Source = bmp;
    }

    /// <summary>
    /// Helper method drawing a line.
    /// </summary>
    /// <param name="p1">Start point of the line to draw.</param>
    /// <param name="p2">End point of the line to draw.</param>
    /// <param name="pen">Pen to use to draw the line.</param>
    /// <param name="thickness">Thickness of the line to draw.</param>
    private void DrawLine(Point p1, Point p2, Pen pen, double thickness)
    {
        DrawingVisual drawingVisual = new DrawingVisual();

        using (DrawingContext drawingContext = drawingVisual.RenderOpen())
        {
            //set properties of the Pen object to make the line more smooth
            pen.Thickness = thickness;
            pen.StartLineCap = PenLineCap.Round;
            pen.EndLineCap = PenLineCap.Round;

            //write your drawing code here
            drawingContext.DrawLine(pen, p1, p2);
        }
    }

I realize that you have already had your question answered, but wanted to post for the sake of anyone else who has this problem. I am one of those people.

I had a situation where my drawings looked exactly like the UPDATE section in the original question. The way I fixed this was by drawing overlapping lines by keeping track of not only the start and end points, but also a midpoint. When I draw, I draw using all three points, and then update start point -> midpoint, midpoint -> end point, end point -> new position relative to whatever you're drawing on. This made my lines look much, much better.

Hopefully this is helpful to someone who had the same issue as me.


Comments

  1. Byron

    • 2018/9/24

    If you want to draw a line, you shouldn't just change colors of one pixel at a time, but rather save position of the mouse in each MouseMove 

  2. Josue

    • 2020/3/17

    Drawing with mouse causes gaps between pixels. Ask Question Asked 9 years, 8 months ago. Active 9 years, 1 month ago. Viewed 2k times 5 2. I have been creating a

  3. Keanu

    • 2019/4/5

    As the title of this Thread says, I get gaps in the line. This happens if I move the mouse fast. Following screenshot does show what I mean.

  4. Jaziel

    • 2017/7/8

    Your best bet is to somehow draw a line of pixels between the last pixel and the current pixel. Probably the best way to do that is by creating a for loop that starts at the last pixel’s X position and stops at the current X, and just lerp between Y's -- in a server script local lastPixel = Vector2.new() local function DrawLine(currentX, currentY) local currentPixel = Vector2.new(currentX

  5. Oscar

    • 2016/4/28

    When moving the mouse cursor across a drawing, it pauses repeatedly Causes: Status Bar Auto-wrap is on. Grid snap enabled in AutoCAD.

  6. Caiden

    • 2018/10/22

    Environment Windows build number: Win32NT, 10.0.19042.0 Microsoft Windows NT 10.0.19042.0 Windows Terminal version (if applicable): 1.1.2233.0 Steps to reproduce Maximize the window. Move the mouse

  7. Ruiz

    • 2017/2/13

    Following are the buttons in the Drawing Tools Palette. In Flood Fill mode, clicked on a pixel with the mouse, causes every square of 

  8. Jacob

    • 2017/1/25

    So when I am drawing in a PDF with my Wacom Bamboo tablet, I noticed that after I start drawing the lines don't come out, and after a split second it comes o

  9. Zion

    • 2015/3/29

    However, I am using a while loop to detect if the mouse is currently down. Your best bet is to somehow draw a line of pixels between the 

  10. Wesley

    • 2021/6/26

    2. As the name implies, a liquid-crystal display uses a thin layer of liquid between the electrodes, which is where the change in light transmission occurs. The liquid for each (sub-)pixel must be physically isolated from the neighboring pixels in order to maintain the spatial resolution of the display. There is a spacer between the two layers

  11. Luka

    • 2019/8/9

    Mouse.Move fires too slow to simulate drawing (gaps appear when bet is to somehow draw a line of pixels between the last pixel and the 

  12. Asher

    • 2021/6/11

    As other users noted, some Pixel 5 devices have a gap between display and frame. My own Pixel seen second has only a small gap, but the Pixel 5 on display in

  13. Joaquin

    • 2021/4/18

    It provides a programming interface for drawing shapes onto the space taken up by the node. The main difference between a canvas and an SVG picture is that 

  14. Jax

    • 2019/3/7

    A digital image is nothing more than data. —numbers indicating variations of red, green, and blue at a particular location on a grid of pixels.. Most of the time, we view these pixels as miniature rectangles sandwiched together on a computer screen.

  15. Matthew

    • 2021/3/29

    To save even more space , delete the Imagewriter driver from MacPaint Version Drawing a circle while holding down the Shift key makes a perfect circle .

  16. Odin

    • 2016/10/29

    Birds and Ants Set off to Draw In the experiment setup of this work, a sketch is made on a screen with a mouse. Once the swarm (birds and ants) are 

Comments are closed.

Recent Posts