在图像上绘制

Question

我可以使用以下代码在图像上绘制，但我的问题是它不是一条连续的线。它看起来有些断断续续的。请参见下面的图片以获得更好的理解。 我的XAML：

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

我的C#代码：

  #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

图像输出:

您可以看到我画的线(粉色)。这不是一条连续的线。我错在哪里了？

更新:
在 @loxxy 的建议下，我的发现是将 oldx 和 oldy 初始值设为零。

   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;

- Jay

---

这可能听起来有些违反直觉，但为什么不尝试在图像上捕获鼠标坐标，并在mousedown时在前一坐标和当前坐标之间画一条线呢？ - Eon

Answer 1

由于您正在逐像素绘制它，因此鼠标必须以更快的速度更新坐标。

我认为这与鼠标的DPI有关...而您无法改变这一点。

因此，尝试绘制一条线。在WPF中可以这样实现：

WriteableBitmapExtensions.DrawLine

- loxxy

Answer 2

你收到的鼠标事件不会返回连续的点。如果你快速移动鼠标，返回的点将不会相邻。如果你想在鼠标光标下画一条线，你需要在每个MouseMove或MouseButtonDown回调中从上一个绘制的点画一条线到当前点。

- PMF