잉크 수집
Windows Presentation Foundation 플랫폼에서는 디지털 잉크 수집을 핵심 기능으로 제공합니다. 이 항목에서는 Windows Presentation Foundation (WPF)에서 잉크를 수집하는 방법에 대해 설명합니다.
사전 요구 사항
다음 예제를 사용하려면 먼저 Microsoft Visual Studio 2005와 Windows SDK를 설치해야 합니다. 또한 WPF용 응용 프로그램을 작성하는 방법을 알고 있어야 합니다. WPF를 시작하는 방법에 대한 자세한 내용은 연습: WPF 시작을 참조하십시오.
InkCanvas 요소 사용
InkCanvas 요소는 WPF에서 잉크를 수집할 수 있는 가장 쉬운 방법을 제공합니다. InkCanvas 요소는 Tablet PC SDK 1.7 및 이전 버전의 InkOverlay 개체와 비슷합니다.
잉크 입력을 받아서 표시하려면 InkCanvas 요소를 사용합니다. 일반적으로 잉크 입력 시에는 잉크 스트로크를 생성하기 위해 디지타이저와 상호 작용하는 스타일러스가 사용됩니다. 스타일러스 대신 마우스를 사용할 수도 있습니다. 생성된 스트로크는 Stroke 개체로 나타나며 프로그래밍 방식과 사용자 입력을 통해 조작할 수 있습니다. InkCanvas를 사용하면 기존 Stroke를 선택, 수정 또는 삭제할 수 있습니다.
XAML을 사용하는 경우 트리에 InkCanvas 요소를 추가하기만 하면 잉크 수집을 간편하게 설정할 수 있습니다. 다음 예제에서는 Microsoft Visual Studio 2005에서 만들어진 기본 WPF 프로젝트에 InkCanvas를 추가합니다.
<Grid>
<InkCanvas/>
</Grid>
InkCanvas 요소는 자식 요소를 포함할 수 있으므로 거의 모든 형식의 XAML 요소에 잉크 주석 기능을 추가할 수 있습니다. 예를 들어 텍스트 요소에 잉크 기능을 추가하려는 경우 텍스트 요소를 InkCanvas의 자식으로 설정하기만 하면 됩니다.
<InkCanvas>
<TextBlock>Show text here.</TextBlock>
</InkCanvas>
잉크를 사용한 이미지 표시 지원 기능을 추가하는 것도 간단합니다.
<InkCanvas>
<Image Source="myPicture.jpg"/>
</InkCanvas>
InkCollection 모드
InkCanvas는 해당 EditingMode 속성을 통해 다양한 입력 모드를 지원합니다.
잉크 조작
InkCanvas는 많은 잉크 편집 작업을 지원합니다. 예를 들어 InkCanvas는 펜 뒤쪽으로 지우기 기능을 지원하며 이 기능을 요소에 추가하는 데 추가 코드는 필요하지 않습니다.
선택 영역
선택 모드를 설정할 때는 InkCanvasEditingMode 속성을 Select로 설정하기만 하면 됩니다. 다음 코드에서는 CheckBox 값을 기준으로 편집 모드를 설정합니다.
' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If
// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}
DrawingAttributes
잉크 스트로크의 모양을 변경하려면 DrawingAttributes 속성을 사용합니다. 예를 들어 DrawingAttributes의 Color 멤버는 렌더링된 Stroke의 색을 설정합니다. 다음 예제에서는 선택된 스트로크의 색을 빨간색으로 변경합니다.
' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()
' Check to see if any strokes are actually selected
If selection.Count > 0 Then
' Change the color of each stroke in the collection to red
Dim stroke As System.Windows.Ink.Stroke
For Each stroke In selection
stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
Next stroke
End If
// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();
// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
// Change the color of each stroke in the collection to red
foreach (System.Windows.Ink.Stroke stroke in selection)
{
stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
}
}
DefaultDrawingAttributes
DefaultDrawingAttributes 속성을 사용하면 InkCanvas에서 생성되는 스트로크의 높이, 너비, 색 등의 속성에 액세스할 수 있습니다. 한번 DefaultDrawingAttributes를 변경하면 이후에 InkCanvas에 입력되는 모든 스트로크가 새 속성 값을 사용하여 렌더링됩니다.
코드 숨김 파일에서 DefaultDrawingAttributes를 수정할 수 있을 뿐만 아니라 XAML 구문을 사용하여 DefaultDrawingAttributes 속성을 지정할 수도 있습니다. 다음 XAML 코드 예제에서는 Color 속성을 설정하는 방법을 보여 줍니다. 이 코드를 사용하려면 Visual Studio 2005에서 "HelloInkCanvas"라는 새 WPF 프로젝트를 만든 다음 Window1.xaml 파일의 코드를 다음 코드로 바꿉니다.
<Window x:Class="HelloInkCanvas.Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
Title="Hello, InkCanvas!" Height="300" Width="300"
>
<Grid>
<InkCanvas Name="inkCanvas1" Background="Ivory">
<InkCanvas.DefaultDrawingAttributes>
<Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
<!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it,
higher in z-order, so that ink is collected and rendered behind -->
<StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
<Button Click="Ink">Ink</Button>
<Button Click="Highlight">Highlight</Button>
<Button Click="EraseStroke">EraseStroke</Button>
<Button Click="Select">Select</Button>
</StackPanel>
</Grid>
</Window>
<Window x:Class="Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
Title="Hello, InkCanvas!" Height="300" Width="300"
>
<Grid>
<InkCanvas Name="inkCanvas1" Background="Ivory">
<InkCanvas.DefaultDrawingAttributes>
<Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
<!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it,
higher in z-order, so that ink is collected and rendered behind -->
<StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
<Button Click="Ink">Ink</Button>
<Button Click="Highlight">Highlight</Button>
<Button Click="EraseStroke">EraseStroke</Button>
<Button Click="Select">Select</Button>
</StackPanel>
</Grid>
</Window>
그런 다음에는 코드 숨김 파일의 Window1 클래스 내에 다음 단추 이벤트 처리기를 추가합니다.
' Set the EditingMode to ink input.
Private Sub Ink(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a red pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = False
inkCanvas1.DefaultDrawingAttributes.Height = 2
End Sub 'Ink
' Set the EditingMode to highlighter input.
Private Sub Highlight(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a highlighter pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = True
inkCanvas1.DefaultDrawingAttributes.Height = 25
End Sub 'Highlight
' Set the EditingMode to erase by stroke.
Private Sub EraseStroke(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke
End Sub 'EraseStroke
' Set the EditingMode to selection.
Private Sub [Select](ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Select
End Sub 'Select
// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;
// Set the DefaultDrawingAttributes for a red pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
inkCanvas1.DefaultDrawingAttributes.Height = 2;
}
// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;
// Set the DefaultDrawingAttributes for a highlighter pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
inkCanvas1.DefaultDrawingAttributes.Height = 25;
}
// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}
// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}
이 코드를 복사한 후 Microsoft Visual Studio 2005에서 F5 키를 눌러 디버거에서 프로그램을 실행합니다.
StackPanel은 InkCanvas 위에 단추를 배치합니다. 사용자가 단추 위에 잉크로 그리려고 하면 InkCanvas가 단추 뒤에서 잉크를 수집하여 렌더링합니다. 이는 단추가 InkCanvas의 자식이 아니라 형제이기 때문입니다. 뿐만 아니라 z 순서에서 단추가 잉크보다 위에 있으므로 잉크가 단추 뒤에서 렌더링됩니다.
참고 항목
참조
DefaultDrawingAttributes()