WPF InkCanvas基本操作方法详解

2020-01-05 09:58:10刘景俊

WPF的InkCanvas就是一个画板,可以在上面随意涂鸦,每写上一笔,InkCanvas的Strokes集合里就新增一个涂鸦对象,下面的代码演示了基本的操作。

效果图

WPF,InkCanvas

xaml代码


<Window x:Class="WPF_InkCanvas.MainWindow"
    xmlns="http://www.easck.com/winfx/2006/xaml/presentation"
    xmlns:x="http://www.easck.com/winfx/2006/xaml"
    xmlns:d="http://www.easck.com/expression/blend/2008"
    xmlns:mc="http://www.easck.com/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPF_InkCanvas"
    mc:Ignorable="d"
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition Height="auto"/>
      <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Image Name="imgMeasure" HorizontalAlignment="Center" Stretch="Uniform"/>
    <InkCanvas Name="inkCanvasMeasure" EditingMode="None" Background="Transparent" HorizontalAlignment="Center" 
          Width="{Binding ElementName=imgMeasure, Path=ActualWidth}" Height="{Binding ElementName=imgMeasure, Path=ActualHeight}"
          >
      <!--MouseDown="InkCanvasMeasure_MouseDown" MouseMove="InkCanvasMeasure_MouseMove"-->
      <Label Content="{Binding MeaInfo}" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" 
          FontSize="18" Foreground="Red" IsHitTestVisible="False"/>
    </InkCanvas>
    <Grid Grid.Row="1">
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <RadioButton Grid.Column="0" Content="绘制墨迹" Click="RadioButton_Click"/>
      <RadioButton Grid.Column="1" Content="按点擦除" Click="RadioButton_Click"/>
      <RadioButton Grid.Column="2" Content="按线擦除" Click="RadioButton_Click"/>
      <RadioButton Grid.Column="3" Content="选中墨迹" Click="RadioButton_Click"/>
      <RadioButton Grid.Column="4" Content="停止操作" Click="RadioButton_Click"/>
    </Grid>
    <StackPanel Grid.Row="2" Orientation="Horizontal">
      <Button Content="OpenFile" Margin="5" HorizontalAlignment="Left" FontSize="20" Click="OpenFile_Click"/>
      <Button Content="SaveInkCanvas" Margin="5" HorizontalAlignment="Left" FontSize="20" Click="SaveInkCanvas_Click"/>
      <Button Content="LoadInkCanvas" Margin="5" HorizontalAlignment="Left" FontSize="20" Click="LoadInkCanvas_Click"/>
      <Button Content="CopyInkCanvas" Margin="5" HorizontalAlignment="Left" FontSize="20" Click="CopyInkCanvas_Click"/>
      <Button Content="PasteInkCanvas" Margin="5" HorizontalAlignment="Left" FontSize="20" Click="PasteInkCanvas_Click"/>
    </StackPanel>
  </Grid>
</Window>