C# WPF - 使用鼠标事件在画布上绘图

WPF - Drawing on canvas with mouse events

提问by Dawid B

I have a problem with handling mouse events on canvas. I want to draw on it using mouse and I've come up with these event handlers, but they don't do anything when I start drawing.

我在处理画布上的鼠标事件时遇到问题。我想用鼠标在它上面画画，我想出了这些事件处理程序，但是当我开始画画时它们什么也不做。

    private void paintSurface_MouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.ButtonState == MouseButtonState.Pressed)
            currentPoint = e.GetPosition(this);
    }

    private void paintSurface_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            Line line = new Line();

            line.Stroke = SystemColors.WindowFrameBrush;
            line.X1 = currentPoint.X;
            line.Y1 = currentPoint.Y;
            line.X2 = e.GetPosition(this).X;
            line.Y2 = e.GetPosition(this).Y;

            currentPoint = e.GetPosition(this);

            paintSurface.Children.Add(line);
        }
    }

Can you help me by telling what's missing or how to rewrite it so it'll start working?

你能告诉我缺少什么或如何重写它以便它开始工作来帮助我吗？

采纳答案by Andy

I'm willing to bet that your canvas isn't receiving mouse events because it's background property is set to transparent

我敢打赌你的画布没有接收鼠标事件，因为它的背景属性设置为透明

This works fine for me.

这对我来说很好用。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas  Name="paintSurface" MouseDown="Canvas_MouseDown_1" MouseMove="Canvas_MouseMove_1" >
        <Canvas.Background>
            <SolidColorBrush Color="White" Opacity="0"/>
        </Canvas.Background>
    </Canvas>
</Window>


using System;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {

        Point currentPoint = new Point();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseDown_1(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (e.ButtonState == MouseButtonState.Pressed)
                currentPoint = e.GetPosition(this);
        }

        private void Canvas_MouseMove_1(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Line line = new Line();

                line.Stroke = SystemColors.WindowFrameBrush;
                line.X1 = currentPoint.X;
                line.Y1 = currentPoint.Y;
                line.X2 = e.GetPosition(this).X;
                line.Y2 = e.GetPosition(this).Y;

                currentPoint = e.GetPosition(this);

                paintSurface.Children.Add(line);
            }
        }

    }
}

回答by Grenkin

public partial class MainWindow : Window
    {
        Line newLine;
        Point start;
        Point end;

    public MainWindow()
    {
        InitializeComponent();
    }

    private void DrawCanvas_MouseDown_1(object sender, MouseButtonEventArgs e)
    {
        start = e.GetPosition(this);
    }

    private void DrawCanvas_MouseMove_1(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            end = e.GetPosition(this);
        }
    }

    private void DrawCanvas_MouseUp_1(object sender, MouseButtonEventArgs e)
    {

        newLine = new Line();
        newLine.Stroke = SystemColors.WindowFrameBrush;
        newLine.X1 = start.X;
        newLine.Y1 = start.Y;
        newLine.X2 = end.X;
        newLine.Y2 = end.Y;

        DrawCanvas.Children.Add(newLine);
    }
}

回答by Sangwon Choi

When using Line, thick line(line.StrokeThickness = 20) looks like this:

使用 Line 时，粗线 (line.StrokeThickness = 20) 如下所示：

So I tried PolyLine and works fine.(from this example http://www.c-sharpcorner.com/uploadfile/mahesh/polyline-in-wpf/)

所以我尝试了 PolyLine 并且工作正常。（从这个例子http://www.c-sharpcorner.com/uploadfile/mahesh/polyline-in-wpf/）

Canvas.MouseMove += (sender, args) =>
{
    if (args.LeftButton == MouseButtonState.Pressed)
    {
        Polyline polyLine;
        if (PathModeCanvas.Children.Count == 0)
        {
            polyLine = new Polyline();
            polyLine.Stroke = new SolidColorBrush(Colors.AliceBlue);
            polyLine.StrokeThickness = 10;

            Canvas.Children.Add(polyLine);
        }

        polyLine = (Polyline)Canvas.Children[0];
        Point currentPoint = args.GetPosition(Canvas);
        polyLine.Points.Add(currentPoint);
   }
};

回答by Andreas

Simple use the InkCanvas

简单使用 InkCanvas

 <InkCanvas x:Name="InkCanvas" x:FieldModifier="public" Background="Transparent" Opacity="1" EditingMode="GestureOnly" ForceCursor="True" Cursor="Pen" >
                            <InkCanvas.DefaultDrawingAttributes>
                                <DrawingAttributes Color="White" Width="7" Height="7" />
                            </InkCanvas.DefaultDrawingAttributes>
                        </InkCanvas>