WPF中InkCanvas基本操作方法的示例分析

这篇文章将为大家详细讲解有关WPF中InkCanvas基本操作方法的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

效果图

xaml代码

<Windowx:Class="WPF_InkCanvas.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:WPF_InkCanvas"
mc:Ignorable="d"
Title="MainWindow"Height="450"Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinitionHeight="auto"/>
<RowDefinitionHeight="auto"/>
</Grid.RowDefinitions>
<ImageName="imgMeasure"HorizontalAlignment="Center"Stretch="Uniform"/>
<InkCanvasName="inkCanvasMeasure"EditingMode="None"Background="Transparent"HorizontalAlignment="Center"
Width="{BindingElementName=imgMeasure,Path=ActualWidth}"Height="{BindingElementName=imgMeasure,Path=ActualHeight}"
>
<!--MouseDown="InkCanvasMeasure_MouseDown"MouseMove="InkCanvasMeasure_MouseMove"-->
<LabelContent="{BindingMeaInfo}"Background="Transparent"HorizontalAlignment="Left"VerticalAlignment="Top"Margin="10"
FontSize="18"Foreground="Red"IsHitTestVisible="False"/>
</InkCanvas>
<GridGrid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButtonGrid.Column="0"Content="绘制墨迹"Click="RadioButton_Click"/>
<RadioButtonGrid.Column="1"Content="按点擦除"Click="RadioButton_Click"/>
<RadioButtonGrid.Column="2"Content="按线擦除"Click="RadioButton_Click"/>
<RadioButtonGrid.Column="3"Content="选中墨迹"Click="RadioButton_Click"/>
<RadioButtonGrid.Column="4"Content="停止操作"Click="RadioButton_Click"/>
</Grid>
<StackPanelGrid.Row="2"Orientation="Horizontal">
<ButtonContent="OpenFile"Margin="5"HorizontalAlignment="Left"FontSize="20"Click="OpenFile_Click"/>
<ButtonContent="SaveInkCanvas"Margin="5"HorizontalAlignment="Left"FontSize="20"Click="SaveInkCanvas_Click"/>
<ButtonContent="LoadInkCanvas"Margin="5"HorizontalAlignment="Left"FontSize="20"Click="LoadInkCanvas_Click"/>
<ButtonContent="CopyInkCanvas"Margin="5"HorizontalAlignment="Left"FontSize="20"Click="CopyInkCanvas_Click"/>
<ButtonContent="PasteInkCanvas"Margin="5"HorizontalAlignment="Left"FontSize="20"Click="PasteInkCanvas_Click"/>
</StackPanel>
</Grid>
</Window>

后台代码

usingMicrosoft.Win32;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Ink;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Navigation;
usingSystem.Windows.Shapes;

namespaceWPF_InkCanvas
{
///<summary>
///MainWindow.xaml的交互逻辑
///</summary>
publicpartialclassMainWindow:Window
{
ViewModelviewModel;
publicMainWindow()
{
InitializeComponent();

DrawingAttributesdrawingAttributes=newDrawingAttributes
{
Color=Colors.Red,
Width=2,
Height=2,
StylusTip=StylusTip.Rectangle,
FitToCurve=true,
IsHighlighter=false,
IgnorePressure=true,

};
inkCanvasMeasure.DefaultDrawingAttributes=drawingAttributes;

viewModel=newViewModel
{
MeaInfo="测试······",
};

DataContext=viewModel;
}

privatevoidInkCanvasMeasure_MouseDown(objectsender,MouseButtonEventArgse)
{

}

privatevoidInkCanvasMeasure_MouseMove(objectsender,MouseEventArgse)
{

}

privatevoidOpenFile_Click(objectsender,RoutedEventArgse)
{
OpenFileDialogopenDialog=newOpenFileDialog
{
Filter="ImageFiles(*.jpg)|*.jpg|ImageFiles(*.png)|*.png|ImageFiles(*.bmp)|*.bmp",
Title="OpenImageFile"
};
if(openDialog.ShowDialog()==true)
{
BitmapImageimage=newBitmapImage();
image.BeginInit();
image.UriSource=newUri(openDialog.FileName,UriKind.RelativeOrAbsolute);
image.EndInit();
imgMeasure.Source=image;
}
}

privatevoidRadioButton_Click(objectsender,RoutedEventArgse)
{
if((senderasRadioButton).Content.ToString()=="绘制墨迹")
{
inkCanvasMeasure.EditingMode=InkCanvasEditingMode.Ink;
}

elseif((senderasRadioButton).Content.ToString()=="按点擦除")
{
inkCanvasMeasure.EditingMode=InkCanvasEditingMode.EraseByPoint;
}

elseif((senderasRadioButton).Content.ToString()=="按线擦除")
{
inkCanvasMeasure.EditingMode=InkCanvasEditingMode.EraseByStroke;
}

elseif((senderasRadioButton).Content.ToString()=="选中墨迹")
{
inkCanvasMeasure.EditingMode=InkCanvasEditingMode.Select;
}

elseif((senderasRadioButton).Content.ToString()=="停止操作")
{
inkCanvasMeasure.EditingMode=InkCanvasEditingMode.None;
}
}

privatevoidSaveInkCanvas_Click(objectsender,RoutedEventArgse)
{
FileStreamfileStream=newFileStream("inkCanvas.isf",FileMode.Create,FileAccess.ReadWrite);
inkCanvasMeasure.Strokes.Save(fileStream);
fileStream.Close();
}

privatevoidLoadInkCanvas_Click(objectsender,RoutedEventArgse)
{
FileStreamfileStream=newFileStream("inkCanvas.isf",FileMode.Open,FileAccess.Read);
inkCanvasMeasure.Strokes=newStrokeCollection(fileStream);
fileStream.Close();
}

privatevoidCopyInkCanvas_Click(objectsender,RoutedEventArgse)
{
inkCanvasMeasure.CopySelection();
}
privatevoidPasteInkCanvas_Click(objectsender,RoutedEventArgse)
{
inkCanvasMeasure.Paste();
}
}
}

ViewModel.cs代码

usingSystem;
usingSystem.Collections.Generic;
usingSystem.ComponentModel;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;

namespaceWPF_InkCanvas
{
classViewModel:INotifyPropertyChanged
{
publiceventPropertyChangedEventHandlerPropertyChanged;

protectedvirtualvoidOnPropertyChanged(stringpropertyName=null)
{
if(PropertyChanged!=null)
PropertyChanged.Invoke(this,newPropertyChangedEventArgs(propertyName));
}

privatestringmeaInfo;
publicstringMeaInfo
{
get=>meaInfo;
set
{
meaInfo=value;
OnPropertyChanged("MeaInfo");
}
}
}
}

补充说明：将Image和InkCanvas放到一个Grid里，并且将InkCanvas的长宽绑定到Image，这样Image和InkCanvas的位置就是对应的，方便我后续在InkCanvas上提取Image的感兴趣区域；InkCanvas里加了一个Label可以实现类似图片上添加文字说明的功能，要设置Label的IsHitTestVisible="False"，不然点击事件就没办法触发了。

关于“WPF中InkCanvas基本操作方法的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。