잉크 수집

아티클
05/04/2023

Windows Presentation Foundation 플랫폼은 기능의 핵심 요소로서 디지털 잉크를 수집합니다. 이 토픽은 Windows Presentation Foundation(WPF)에서의 잉크 수집 방법을 설명합니다.

필수 구성 요소

다음 예제를 사용하려면 먼저 Visual Studio 및 Windows SDK를 설치해야 합니다. 또한 WPF용 애플리케이션을 작성하는 방법을 알고 있어야 합니다. WPF를 시작하는 방법에 대한 자세한 내용은 연습: 내 첫 번째 WPF 데스크톱 애플리케이션을 참조하세요.

InkCanvas 요소 사용

System.Windows.Controls.InkCanvas 요소를 WPF에서 잉크를 수집하는 가장 쉬운 방법을 제공합니다. InkCanvas 요소를 사용하여 잉크 입력을 받고 표시합니다. 일반적으로 스타일러스를 사용하여 잉크를 입력합니다.이 스타일러스는 디지타이저와 상호 작용하여 잉크 스트로크를 생성합니다. 또한 스타일러스 대신 마우스를 사용할 수도 있습니다. 생성된 스트로크는 Stroke 개체로 표현되며, 프로그래밍 방식과 사용자 입력을 통해 조작할 수 있습니다. InkCanvas를 사용하면 사용자가 기존 Stroke를 선택, 수정 또는 삭제할 수 있습니다.

XAML을 사용하면 트리에 InkCanvas 요소를 추가하는 것처럼 쉽게 잉크 컬렉션을 설정할 수 있습니다. 다음 예제에서는 Visual Studio에서 만든 기본 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는 요소에 기능을 추가하는 데 필요한 추가 코드 없이 펜 뒤쪽 지우기(back-of-pen erase) 기능을 지원합니다.

선택 영역

선택 모드를 설정하는 것은 InkCanvasEditingMode 속성을 Select로 설정하는 것만큼 간단합니다.

다음 코드에서는 CheckBox의 값에 따라 편집 모드를 설정합니다.

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

DrawingAttributes 속성을 사용하여 잉크 스트로크의 모양을 변경합니다. 예를 들어 DrawingAttributes의 Color 멤버는 렌더링된 Stroke의 색상을 설정합니다.

다음 예제에서는 선택한 스트로크의 색을 빨강으로 변경합니다.

// 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;
    }
}

' 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

DefaultDrawingAttributes

DefaultDrawingAttributes 속성은 InkCanvas에서 만든 스트로크의 높이, 너비 및 색과 같은 속성에 대한 액세스를 제공합니다. DefaultDrawingAttributes를 변경하면 InkCanvas에 입력되는 모든 스트로크가 새 속성 값으로 렌더링됩니다.

코드 숨김 파일에서 DefaultDrawingAttributes를 수정하는 것 외에도 DefaultDrawingAttributes 속성을 지정하는 데 XAML 구문을 사용할 수 있습니다.

다음 예제에서는 설정 하는 방법에 설명 합니다 Color 속성입니다. 이 코드를 사용하려면 Visual Studio에서 "HelloInkCanvas"라는 새 WPF 프로젝트를 만듭니다. MainWindow.xaml 파일의 코드를 다음 코드로 바꿉니다.

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

그런 다음 코드 숨김 파일의 MainWindow 클래스 내에 다음 단추 이벤트 처리기를 추가합니다.

// 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;
}

이 코드를 복사한 후 Visual Studio에서 F5 키를 눌러 디버거에서 프로그램을 실행합니다.

StackPanel에서 InkCanvas 맨 위에 단추를 배치하는 방식을 확인합니다. 단추 위에 잉크로 채우려고 하면 InkCanvas가 단추 뒤에서 잉크를 수집하고 렌더링합니다. 이는 단추가 자식이 아니라 InkCanvas의 형제이기 때문입니다. 또한 단추가 z 순서에서 더 앞서기 때문에 잉크가 단추 뒤에서 렌더링됩니다.

다음을 통해 공유