擦除已经绘制的形状

时间:2015-11-02 18:14:50

标签: c# system.drawing

我正在使用System.Drawing命名空间在C#中编写自己的Paint,基本上一切都很顺利,除了一件事,橡皮擦工具。

现在我的橡皮擦只是通过绘制一条与背景颜色相同的线来工作,所以它看起来像是在擦除一些东西。

但是,我想制作一个新的橡皮擦工具,或许可以改进。如果点击在其范围内,这个新的橡皮擦将能够通过单击来删除元素。 我知道如果有一件事情已经被绘制了,那就什么也做不了,但我正在考虑创建一个字符串数组,我将要向数组中添加新元素。例如,当我添加一行和一个矩形时,数组的前两个元素将是:

line startPoint endPoint

矩形高度宽x y

这样的事情。使用“擦除”工具时,只需比较坐标。

有更简单的方法吗?

非常感谢!

1 个答案:

答案 0 :(得分:3)

是的,有。在某种程度上,你打算做的事情基本上是retained mode rendering。您保留画布上对象的列表(或其他数据结构),您可以以任何方式重新排序或更改该列表,例如通过删除或添加对象。之后,您只需重新创建绘图,即清除绘图区域,然后按顺序绘制列表中的每个对象。这是必要的,因为一旦你绘制了一些只有像素的东西,如果你的直线与矩形相交,你就可能无法将线像素与矩形像素分开。

使用GDI +这是唯一的方法,因为你得到的不仅仅是原始绘图表面。但是,存在已经为您提供渲染模型的其他事物,例如WPF。

然而,string[]是解决此问题的可怕的方式。通常你会有某种界面,例如

public interface IShape {
  public void Draw(Graphics g);
  public bool IsHit(PointF p);
}

你的形状实现。一条线将其笔触颜色和开始/结束坐标保持为状态,然后它将用于在Draw方法中绘制自身。此外,当您想要使用橡皮擦单击形状时,您将使用IsHit方法来确定是否有形状被击中。这样每个形状都有其自身的命中测试。例如,一条线可以实现一点模糊性,这样您就可以点击该线旁边的一点,而不必准确地击中一个像素。

无论如何,这是一般的想法。您可以根据需要将其扩展到其他想法。请注意,通过使用此方法,您的核心代码不必了解可能的形状(如果您必须维护不断增长的switch不同形状的语句,则比较坐标可能有点麻烦)。当然,对于绘制这些形状,您仍需要更多代码,因为线条可能需要与矩形,椭圆或文本对象不同的交互。

我创建了一个小样本,概述了上述方法here。有趣的部分如下:

interface IShape
{
    Pen Pen { get; set; }
    Brush Fill { get; set; }
    void Draw(Graphics g);
    bool IsHit(PointF p);
}

class Line : IShape
{
    public Brush Fill { get; set; }
    public Pen Pen { get; set; }
    public PointF Start { get; set; }
    public PointF End { get; set; }

    public void Draw(Graphics g)
    {
        g.DrawLine(Pen, Start, End);
    }

    public bool IsHit(PointF p)
    {
        // Find distance to the end points
        var d1 = Math.Sqrt((Start.X - p.X) * (Start.X - p.X) + (Start.Y - p.Y) * (Start.Y - p.Y));
        var d2 = Math.Sqrt((End.X - p.X) * (End.X - p.X) + (End.Y - p.Y) * (End.Y - p.Y));

        // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line
        var dx = End.X - Start.X;
        var dy = End.Y - Start.Y;
        var length = Math.Sqrt(dx * dx + dy * dy);
        var distance = Math.Abs(dy * p.X - dx * p.Y + End.X * Start.Y - End.Y * Start.X) / Math.Sqrt(dy * dy + dx * dx);

        // Make sure the click was really near the line because the distance above also works beyond the end points
        return distance < 3 && (d1 < length + 3 && d2 < length + 3);
    }
}

public partial class Form1 : Form
{
    private ObservableCollection<IShape> shapes = new ObservableCollection<IShape>();
    private static Random random = new Random();

    public Form1()
    {
        InitializeComponent();
        pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
        shapes.CollectionChanged += Shapes_CollectionChanged;
    }

    private void Shapes_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        Redraw();
    }

    public void Redraw()
    {
        using (var g = Graphics.FromImage(pictureBox1.Image))
        {
            foreach (var shape in shapes)
            {
                shape.Draw(g);
            }
        }
        pictureBox1.Invalidate();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        shapes.Add(new Line
        {
            Pen = Pens.Red,
            Start = new PointF(random.Next(pictureBox1.Width), random.Next(pictureBox1.Height)),
            End = new PointF(random.Next(pictureBox1.Width), random.Next(pictureBox1.Height))
        });
    }

    private void pictureBox1_SizeChanged(object sender, EventArgs e)
    {
        pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
        Redraw();
    }

    private IShape FindShape(PointF p)
    {
        // Reverse search order because we draw from bottom to top, but we need to hit-test from top to bottom.
        foreach (var shape in shapes.Reverse())
        {
            if (shape.IsHit(p))
                return shape;
        }
        return null;
    }

    private void button1_MouseClick(object sender, MouseEventArgs e)
    {
        var shape = FindShape(e.Location);
        if (shape != null)
        {
            shape.Pen = Pens.Blue;
            Redraw();
        }
    }
}

单击该按钮可创建随机行并重绘。重绘就像

一样简单
public void Redraw()
{
    using (var g = Graphics.FromImage(pictureBox1.Image))
    {
        foreach (var shape in shapes)
        {
            shape.Draw(g);
        }
    }
    pictureBox1.Invalidate();
}

单击图片将尝试在点击点找到一个形状,如果找到一个,则将其颜色为蓝色(以及重绘)。查找该项目的工作方式如下:

private IShape FindShape(PointF p)
{
    // Reverse search order because we draw from bottom to top, but we need to hit-test from top to bottom.
    foreach (var shape in shapes.Reverse())
    {
        if (shape.IsHit(p))
            return shape;
    }
    return null;
}

正如您所看到的,实际上绘制事物的基本部分,并且可能再次选择它们,就这么简单了。当然,不同的绘图工具是另一回事,尽管that has solutions, too