정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8의 잉크 지원

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

잉크는 스타일러스 또는 터치를 통해 입력된 필기나 그리기 콘텐츠를 의미합니다. Windows Phone 앱은 InkPresenter 요소를 사용하여 잉크를 지원할 수 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

다음 그림에서는 잉크 스트로크를 표시하는 InkPresenter를 보여 줍니다.

UX_InkPresenter

InkPresenter 요소

InkPresenter 요소는 잉크 기능을 지원하는 그리기 화면을 제공합니다. InkPresenterCanvas에서 파생되며 하나 이상의 UIElement 개체와 StrokeCollection을 표시할 수 있습니다.

다음 코드 예제에서는 XAML에서 InkPresenter 요소를 만드는 방법을 보여 줍니다.

<Canvas>
    <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" />
    <Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" />
    <InkPresenter x:Name="MyIP" Height="500" Width="500"
              Margin="50,50,0,0"
              MouseLeftButtonDown="MyIP_MouseLeftButtonDown" 
              LostMouseCapture="MyIP_LostMouseCapture" 
              MouseMove="MyIP_MouseMove" 
              Background="Transparent" Opacity="1" />
</Canvas>

앞의 예제에서는 InkPresenter 요소와 동일한 여백을 사용하는 RectangleCanvas에 추가했습니다. 이렇게 하는 이유는 InkPresenter에는 시각적인 경계를 제공하는 속성이 없기 때문입니다. RectangleStroke 속성은 Black으로 설정되어 InkPresenter의 테두리 역할을 합니다. InkPresenter의 z 순서는 Rectangle의 z 순서보다 높아야 합니다. 그렇지 않으면 RectangleInkPresenter를 숨깁니다.

잉크 데이터

Windows Phone 에서 잉크는 개별 Stroke 개체가 들어 있는 StrokeCollection 개체입니다. 각 Stroke는 스타일러스 누르기, 스타일러스 이동 및 스타일러스 놓기 시퀀스에 해당합니다. Stroke는 점, 직선 또는 곡선이 될 수 있습니다. 각 Stroke에는 개별 StylusPoint 개체가 들어 있는 StylusPointCollection 개체가 포함되어 있습니다 StylusPoint 개체는 스타일러스가 디지타이저에 접촉된 상태에서 이동할 때 수집됩니다. Stroke에는 높이, 너비, 색, 윤곽선 색 등과 같은 특성도 있으며 이러한 특성은 모두 DrawingAttributes 클래스에 포함되어 있습니다.

잉크 수집

InkPresenter에 대한 이벤트에 응답하여 프로그래밍 방식으로 스트로크를 만들거나 캡처할 수 있습니다. 처리할 이벤트는 MouseLeftButtonDown, MouseMoveLostMouseCapture입니다.

InkPresenter 요소가 MouseLeftButtonDown 이벤트를 수신하면 새 Stroke 개체가 만들어져 InkPresenter 요소의 StrokeCollection 개체에 추가됩니다. 화면에 접촉된 상태로 스타일러스가 이동하면 MouseMove 이벤트가 호출되고 StylusPoint 개체가 수집되어 해당 Stroke에 추가됩니다. LostMouseCapture 이벤트가 발생하면 만들어진 Stroke가 완성됩니다.

다음 코드 예제에서는 InkPresenter 화면에서 입력을 캡처한 다음 해당 입력을 사용하여 표시할 스트로크를 만드는 기본적인 방법을 보여 줍니다.

public Page()
{
    InitializeComponent();
    SetBoundary();
}
Stroke NewStroke;

//A new stroke object named MyStroke is created. MyStroke is added to the StrokeCollection of the InkPresenter named MyIP
private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    MyIP.CaptureMouse();
    StylusPointCollection MyStylusPointCollection = new StylusPointCollection();
    MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP));
    NewStroke = new Stroke(MyStylusPointCollection);
    MyIP.Strokes.Add(NewStroke);
}

//StylusPoint objects are collected from the MouseEventArgs and added to MyStroke. 
private void MyIP_MouseMove(object sender, MouseEventArgs e)
{
    if (NewStroke != null)
        NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP));
}

//MyStroke is completed
private void MyIP_LostMouseCapture(object sender, MouseEventArgs e)
{
    NewStroke = null;
    
}

//Set the Clip property of the inkpresenter so that the strokes
//are contained within the boundary of the inkpresenter
private void SetBoundary()
{
    RectangleGeometry MyRectangleGeometry = new RectangleGeometry();
    MyRectangleGeometry.Rect = new Rect(0, 0, MyIP.ActualWidth, MyIP.ActualHeight);
    MyIP.Clip = MyRectangleGeometry;
}

지정된 위치에서 예제 코드를 사용하여 다음 InkPresenter와 관련된 작업을 수행할 수 있습니다.

작업

예제 위치

InkPresenter 요소를 사용합니다.

InkPresenter

높이, 너비, 색, 윤곽선 색 등의 그리기 특성을 지정합니다.

DrawingAttributes

스타일러스 포인트를 반복하고 스트로크 컬렉션을 조작합니다.

StylusPoints

X 좌표, Y 좌표, 압력과 같은 스타일러스 포인트의 속성을 사용합니다.

StylusPoint

스트로크에 대한 경계 상자를 검색합니다.

Stroke.GetBounds

스트로크 컬렉션에 대한 경계 상자를 검색합니다.

StrokeCollection.GetBounds

스트로크 개체가 교차하는지 확인합니다.

Stroke.HitTest

스트로크 컬렉션이 교차하는지 확인합니다.

StrokeCollection.HitTest

표시: