#481 – 在InkCanvas 上使用鼠标绘图（You Can Draw On an InkCanvas Control with the Mouse）

你可以使用InkCanvas 控件包含一个用户可以在界面上使用鼠标或者其他输入设备绘图的区域。

默认情况下，InkCanvas 控件允许使用鼠标绘图，每次点击或者按右键拖动鼠标，都会创建一个在InkCanvas 上画图的画笔。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <Label Grid.Row="0" Content="Draw in the area below using your mouse" Margin="10,5"/>
    <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="10" SnapsToDevicePixels="True">
        <InkCanvas/>
    </Border>
</Grid>

画一张草图。

你也可以像Canvas 控件一样往InkCanvas中添加子元素，但是用户无法和添加的子元素继续交互，仅仅只能在上面涂画。下面的例子InkCanvas中往添加一张图片。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <Label Grid.Row="0" Content="Draw in the area below using your mouse" Margin="10,5"/>
    <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="10" SnapsToDevicePixels="True">
        <InkCanvas MinHeight="0" MinWidth="0">
            <Label Content="Draw on me" InkCanvas.Left="5" InkCanvas.Right="10"/>
            <Button Content="Me too" InkCanvas.Left="10" InkCanvas.Bottom="10" />
            <Image Source="Images\BestYears.jpg" Height="200" InkCanvas.Right="5" InkCanvas.Top="5"/>
        </InkCanvas>
    </Border>
</Grid>

在InkCanvas 中画图，每一次绘画操作（即按下鼠标左键--拖动鼠标--放开鼠标）都会创建一个画笔对象Stroke 。所有的画笔对象都存放在InkCanvas 的Strokes 属性中。

与画笔对应的还有一个点的集合，存放每一次绘画路径的点，这些点存放在Stroke 的StylusPoints 集合中。

下面的例子中，我们使用数据绑定在ListBox 中显示所有的画笔。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
 
        <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="5" SnapsToDevicePixels="True">
            <InkCanvas Name="ink" MinHeight="0" MinWidth="0"/>
        </Border>
        <Label Grid.Column="1" Content="Strokes:" Margin="10,5"/>
        <ListBox Grid.Row="1" Grid.Column="1" ItemsSource="{Binding ElementName=ink, Path=Strokes}">
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <Label Content="{Binding Path=StylusPoints, Converter={StaticResource strokeInfoConverter}}"/>
                 </DataTemplate>
             </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

原文地址：https://wpf.2000things.com/2012/01/26/481-you-can-draw-on-an-inkcanvas-control-with-the-mouse/