WPF使用Canvas绘制线条命中测试问题

需求描述

最近在使用WPF绘制图表的一个项目，图表中有很多线段，并且需要点击线段的时候可以选中，由于线条很细，不容易点击到，这里需要用户在点击线条附近的时候，默认他点击了线条。

解决思路

我们将线条画的很粗，但是使用渐变，将上下的颜色透明，这样线条看起来还是很细，但是点击的时候，当你点击到附近的时候也是命中的。

如图红色框都是可以命中区域。

渐变值说明

• 0.3 线条的上30%是透明的，透明度为0
• 0.301 增加一个最小单位，立刻设置为你想显示的颜色，并且 透明度设置为1
• 0.69 同上
• 0.7 这里和0.3 对应

全部代码

前端代码：

<Window x:Class="WpCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpCanvas"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Orientation="Vertical">
            <Rectangle x:Name="_color" Margin="0 10" Width="100" Height="30">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#00CB4545" Offset="0.3"/>
                        <GradientStop Color="#FF2B1A1A" Offset="0.301"/>
                        <GradientStop Color="#FF2B1A1A" Offset="0.699"/>
                        <GradientStop Color="#00CECECE" Offset="0.7"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
                
            </Rectangle>

            <local:DrawingCanvas x:Name="_canvas" MouseUp="_canvas_MouseUp">

            </local:DrawingCanvas>
        </StackPanel>


    </Grid>
</Window>

后端代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpCanvas
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Drwaw(100);
            Drwaw(140);
        }

        /// <summary>
        /// 绘制时间线
        /// </summary>
        private void Drwaw(double y)
        {

            Point p1 = new Point(200, y);
            Point p2 = new Point(400, y);

            this._canvas.DrawLine(p1, p2, _color.Fill, 4, null, "线条");
        }

        private void _canvas_MouseUp(object sender, MouseButtonEventArgs e)
        {
            string key = this._canvas.GetVisualKey(e.GetPosition(sender as UIElement));

            MessageBox.Show($"选择 {key}");
          
        }
    }
}

注意事项

这种方式，只有在线条很细的情况下适用，如果你的线条够粗，那么你可能要适当的减少上下的透明区域，甚至不要透明区域。