鼠标绘制导致像素间的间隙 [英] Drawing with mouse causes gaps between pixels

问题描述

我一直在创造绘图应用为WPF的测试，并已顺利。我碰到的问题是，如果我在每次移动时绘制的像素的鼠标下一个位图，我只得到更新每一个像素。当鼠标周围快速移动它不会在之间绘制的像素。我需要知道什么是最好的方式来画一条线之间的像素是在使用WPF WriteableBitmap的

I have been creating a drawing app as a test for WPF, and have been going well. The problem I've run into is that if I draw the pixel under the mouse to a bitmap each time it moves, I only get one pixel per update. When the mouse moves around fast it doesn't draw the pixels in between. I need to know what the best way to draw a line between to pixels is in WPF using WriteableBitmap

编辑：现在我有这样的：

Now I have this:

推荐答案

如果你想画一条线，你不应该只是改变一个像素颜色的时间，而是保存在每个鼠标的位置的MouseMove 事件处理方法。

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.

然后，您应该借鉴的行之间previous位置（一个来自previous事件发生保存），绘制一个行这两个点之间。这将使线是连续的。关于 WriteableBitmap的画线的信息可以在这里找到：<一href=\"http://stackoverflow.com/questions/3000591/drawing-line-using-wpf-writeablebitmap-backbuffer\">Drawing使用WPF WriteableBitmap.BackBuffer 线。

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.

画线后，不要忘记更新保存在当前的previous位置。）

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

更新

我还发现另一种解决办法。

I've also found another solution.

与图像定义XAML要借鉴：

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>

然后，添加code背后的事件进行处理：

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);
        }
    }

这篇关于鼠标绘制导致像素间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！