实时绘制线到下一个点

本文关键字：下一个 绘制 实时 | 更新日期: 2023-09-27 18:08:35

我当前的程序允许用户单击一个点，然后单击另一个点(至少20像素远)，并在两个点之间画一条线。我使用了折线，所以这可以多次完成。虽然所有行的集合只有在所有点击完成后才会出现

void DrawingCanvas_MouseUp(object sender, MouseButtonEventArgs e) {
        Point position = e.GetPosition(this);
        if (leftList == null) {
            //starting a new set
            leftList.Add(position);
            lastPoint = position;
            return;
        }
        //calculate distance, i.e. end click
        double a = lastPoint.X - position.X;
        double b = lastPoint.Y - position.Y;
        double distance = Math.Sqrt(a * a + b * b);
        if (distance > 20) {
            //continue to add to list
            leftList.Add(position);
            lastPoint = position;
        } else {
            //end of the line
            paint();
            leftList = new PointCollection(); 
        }
    }
    private void paint() {
        Polyline line = new Polyline();
        line.Visibility = System.Windows.Visibility.Visible;
        line.StrokeThickness = 2;
        line.Stroke = System.Windows.Media.Brushes.Black;
        line.Points = leftList;
        myCanvas.Children.Add(line);
    }

所以我的问题是双重的:

A)如何使每次单击后立即添加新行

B)我如何在最后一点和鼠标光标当前所在的位置之间渲染一条线(即就在您选择下一个点之前)

实时绘制线到下一个点

下面的简单示例开始绘制一条新的折线，当按下鼠标左键并移动鼠标的最小点距离为20，并保持按下按钮。它根据其长度以红色或绿色绘制最后一个折线段(到当前鼠标位置)。如果释放鼠标按钮并且新线段的长度>= 20，则折线上会添加一个新点。否则折线将终止，并创建新的折线。

private Polyline polyline;
private Polyline segment = new Polyline { StrokeThickness = 2 };
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (polyline == null)
    {
        var canvas = (Canvas)sender;
        var point = e.GetPosition(canvas);
        // create new polyline
        polyline = new Polyline { Stroke = Brushes.Black, StrokeThickness = 2 };
        polyline.Points.Add(point);
        canvas.Children.Add(polyline);
        // initialize current polyline segment
        segment.Stroke = Brushes.Red;
        segment.Points.Add(point);
        segment.Points.Add(point);
        canvas.Children.Add(segment);
    }
}
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    if (polyline != null)
    {
        // update current polyline segment
        var canvas = (Canvas)sender;
        segment.Points[1] = e.GetPosition(canvas);
        var distance = (segment.Points[0] - segment.Points[1]).Length;
        segment.Stroke = distance >= 20 ? Brushes.Green : Brushes.Red;
    }
}
private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (polyline != null)
    {
        var canvas = (Canvas)sender;
        segment.Points[1] = e.GetPosition(canvas);
        var distance = (segment.Points[0] - segment.Points[1]).Length;
        if (distance >= 20)
        {
            polyline.Points.Add(segment.Points[1]);
            segment.Points[0] = segment.Points[1];
        }
        else
        {
            if (polyline.Points.Count < 2)
            {
                canvas.Children.Remove(polyline);
            }
            polyline = null;
            segment.Points.Clear();
            canvas.Children.Remove(segment);
        }
    }
}

请在每次点击时保持一个点的集合。在集合中，你可以添加一个类，它将有两个属性，如StartPoint和EndPoint。

当第一次点击鼠标时，只添加一个类对象到只有起始点的集合中。当您下次点击鼠标时，将结束点添加到类的最后一个对象，同时创建一个新对象，并将该点指定为其起点并将其添加到集合中，然后调用绘制函数。

相关文章：