이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

빠른 시작: 잉크 데이터 캡처(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)

기사 내용

사전 요구 사항
UI에서 그리기 화면 설정
잉크 관리자 만들기
앱을 그리기 화면에 연결
입력 이벤트 수신기를 그리기 화면에 연결
이벤트 처리기 함수 정의
전체 예제
요약
관련 항목

중요 API

Windows.UI.Input.Inking

이 빠른 시작에서는 입력 디지타이저에서 잉크 데이터를 캡처하는 과정을 소개합니다.

목표: 이 빠른 시작을 완료하면 JavaScript를 사용하는 Windows 스토어 앱에서 포인터 장치(마우스, 펜/스타일러스 또는 터치)의 입력을 잉크 플랫폼에서 검색 및 캡처하는 방법을 이해할 수 있게 됩니다.

사전 요구 사항

사용자가 JavaScript용 Windows 라이브러리 템플릿을 사용하고 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다.

이 자습서를 완료하려면 다음이 필요합니다.

Windows 8 및 Microsoft Visual Studio Express 2012 for Windows 8. 다운로드하려면 도구 얻기를 참조하세요.
개발자 라이선스. 자세한 방법은 개발자 라이선스 얻기를 참조하세요.
첫 번째 Windows 스토어 앱을 만드는 방법에 대한 자세한 내용은 JavaScript를 사용하는 Windows 스토어 앱 시작을 참조하세요.
JavaScript용 Windows 라이브러리 개체와 컨트롤 사용에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

지침

1. UI에서 그리기 화면 설정

이 샘플에서는 HTML 5 Canvas 요소를 잉크 그리기 및 렌더링 화면으로 사용합니다. canvas는 JavaScript를 사용하는 Windows 스토어 앱에서 그래픽 요소를 동적으로 그리고 렌더링 및 조작하기 위한 화면으로 작동하는 HTML5 요소입니다.

참고 SVG(Scalable Vector Graphics) 개체도 사용할 수 있습니다.

여기서는 JavaScript에서 요소를 참조하는 데 사용할 canvas 요소(ID inkCanvas)를 선언합니다.

HTML


<body>
<div id="applicationTitle">Ink sample</div>
<div>
    <canvas id="inkCanvas"></canvas>
    <div>
        <button id="load">Load</button>
        <button id="save">Save</button>
        <button id="draw">Draw</button>
        <button id="select">Select</button>
        <button id="selectall">Select all</button>
        <button id="erase">Erase</button>
        <button id="eraseAll">Erase all</button>
        <button id="recognize" value="selected">Handwriting recognition</button>
    </div>
</div>
<div id="modeMessage"></div>
<div id="deviceMessage"></div>
<div id="statusMessage"></div>
</body>

2. 잉크 관리자 만들기

포인터 입력을 통해 획득한 잉크 관련 데이터를 처리하고 조작할 InkManager 개체를 초기화합니다.

JavaScript


        // Create an ink manager.
        // InkManager is documented at http://go.microsoft.com/fwlink/?LinkID=260648.
        var inkManager = new Windows.UI.Input.Inking.InkManager();

3. 앱을 그리기 화면에 연결

canvas 및 해당 자식 요소로 작업하려면 두 개의 변수를 정의해야 합니다. 첫 번째 변수에는 getElementById를 사용하여 canvas 요소, inkCanvas에 대한 참조가 할당되고 다른 변수에는 getContext 메서드를 호출하여 canvas 요소에 대한 그리기 컨텍스트(이 경우 2D 화면)가 할당됩니다.

JavaScript


// Obtain reference to the specified element.
function get(elementId)
{
    return document.getElementById(elementId);
}

JavaScript


inkCanvas = get("inkCanvas");
inkContext = inkCanvas.getContext("2d");

4. 입력 이벤트 수신기를 그리기 화면에 연결

canvas 요소에 대한 참조를 사용하여 포인터 장치 입력을 위한 다음 세 가지 MSPointerEvent 수신기를 연결합니다. 이 예제에 식별된 이벤트 처리기 함수는 이 빠른 시작의 뒷부분에서 자세히 설명합니다.

사용자가 펜이나 손가락으로 디지타이저 화면을 누르거나 마우스의 왼쪽 단추를 클릭하면 MSPointerDown가 발생합니다.
MSPointerDown 이벤트와 연결된 포인터가 canvas에서 이동하면 MSPointerMove가 발생합니다.
사용자가 디지타이저 화면에서 펜 또는 손가락을 들거나 마우스 왼쪽 단추를 놓으면 MSPointerUp이 발생합니다.

JavaScript


// Set up the handlers for input processing.
inkCanvas.addEventListener("MSPointerDown", onPointerDown, false);
inkCanvas.addEventListener("MSPointerMove", onPointerMove, false);
inkCanvas.addEventListener("MSPointerUp", onPointerUp, false);

5. 이벤트 처리기 함수 정의

이 섹션에서는 이벤트 처리기가 이전 단계에서 추가한 이벤트 수신기와 연결되도록 정의합니다.

MSPointerDown은 잉크 캡처를 시작하는 데 사용되는 이벤트입니다.

다음 예제에서 beginPath 및 moveTo 메서드는 잉크 데이터 표시를 시작할 위치를 화면 좌표에 설정하는 데 사용됩니다. 잉크 캡처 및 표시는 별도의 두 동작입니다. MSPointerDown 이벤트는 이벤트의 포인터 데이터(currentPoint)를 ProcessPointerDown으로 전달하여 inkManager를 통해 처리됩니다.

전역 변수 penID는 이 이벤트와 연결된 입력 포인터의 pointerId를 저장하는 데 사용됩니다. 이 변수의 필요성에 대해서는 뒷부분에 설명되어 있습니다.

참고 다음 예제에서는 포인터 입력을 필터링하여(pointerType 속성 사용) 펜/스타일러스 입력과 마우스 입력(왼쪽 단추를 누른 경우만 해당)에 대해 잉크 캡처가 수행되도록 합니다. 터치 입력은 앱의 UI 조작을 위해 예약되어 있습니다.

JavaScript


    function getPointerDeviceType(pId)
    {
        var pointerDeviceType;
        var pointerPoint = Windows.UI.Input.PointerPoint.getCurrentPoint(pId);
        switch (pointerPoint.pointerDevice.pointerDeviceType)
        {
            case Windows.Devices.Input.PointerDeviceType.touch:
                pointerDeviceType = "Touch";
                break;

            case Windows.Devices.Input.PointerDeviceType.pen:
                pointerDeviceType = "Pen";
                break;

            case Windows.Devices.Input.PointerDeviceType.mouse:
                pointerDeviceType = "Mouse";
                break;
            default:
                pointerDeviceType = "Undefined";
        }
        deviceMessage.innerText = pointerDeviceType;
        return pointerDeviceType;
    }

JavaScript


    // Occurs when the pointer (touch, pen, mouse) is detected by the canvas.
    // Each stroke begins with onPointerDown.
    function onPointerDown(evt)
    {
        // Get the device type for the pointer input.
        pointerDeviceType = getPointerDeviceType(evt.pointerId);

        // Process pen and mouse (with left button) only. Reserve touch for manipulations.
        if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === 0)))
        {
            statusMessage.innerText = pointerDeviceType + " pointer down: Start stroke. "

            // Process one pointer at a time.
            if (pointerId === -1)
            {
                var current = evt.currentPoint;

                // Start drawing the stroke.
                inkContext.beginPath();
                inkContext.lineWidth = strokeWidth;
                inkContext.strokeStyle = strokeColor;

                inkContext.moveTo(current.position.x, current.position.y);

                // Add current pointer to the ink manager (begin stroke).
                inkManager.processPointerDown(current);

                // The pointer id is used to restrict input processing to the current stroke.
                pointerId = evt.pointerId;
            }
        }
        else
        {
            // Process touch input.
        }
    }

잉크 데이터는 MSPointerMove 이벤트가 발생할 때 캡처됩니다.

다음 예제에서 전역 변수 penId는 이 이벤트의 pointerId가 관련된 MSPointerDown 이벤트의 해당 항목과 일치하도록 하는 데 사용됩니다. 그렇지 않은 경우 입력은 무시되고 잉크 데이터는 캡처되지 않습니다. 이러한 기능은 펜 스트로크 중에 우연히 마우스가 움직이면서 발생한 입력 등을 필터링하는 데 유용합니다.

개별 직선 세그먼트처럼 바로 잉크 데이터를 그리고 표시하기 위해 lineTo(디지타이저에서 보고된 포인터의 RawPosition 사용) 및 stroke 메서드가 호출됩니다. 잉크 캡처 및 표시는 별도의 두 동작입니다. MSPointerMove 이벤트는 이벤트의 포인터 데이터(currentPoint)를 ProcessPointerUpdate으로 전달하여 inkManager를 통해 처리됩니다.

JavaScript


    // Mouse: Occurs when the pointer moves.
    // Pen/Touch: Occurs at a steady rate (approx. 100 messages/second) whether the pointer moves or not.
    function onPointerMove(evt)
    {
        // Process pen and mouse (with left button) only. Reserve touch for manipulations.
        if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === 0)))
        {
            statusMessage.innerText = pointerDeviceType + " pointer move: Draw stroke as lines. "
            // The pointer Id is used to restrict input processing to the current stroke.
            // pointerId is updated in onPointerDown().
            if (evt.pointerId === pointerId)
            {
                var current = evt.currentPoint;

                // Draw stroke in real time.
                inkContext.lineTo(current.rawPosition.x, current.rawPosition.y);
                inkContext.stroke();

                // Add current pointer to the ink manager (update stroke).
                inkManager.processPointerUpdate(current);
            }
        }
        else
        {
            // Process touch input.
        }
    }

잉크 데이터 캡처는 MSPointerUp 이벤트가 발생할 때 완료됩니다.

이전 예제와 같이 이 함수는 전역 변수 penId를 사용하여 이 이벤트의 pointerId가 관련된 MSPointerDown 및 MSPointerMove 이벤트의 해당 항목과 일치하도록 합니다. 그렇지 않은 경우 입력은 무시되고 잉크 데이터는 캡처되지 않습니다.

lineTo, stroke 및 closePath 메서드는 handlePointerDown 함수에서 만든 경로를 완료하고 닫기 위해 호출합니다. MSPointerUp 이벤트는 이벤트의 포인터 데이터(currentPoint)를 ProcessPointerUp으로 전달하여 inkManager를 통해 처리됩니다.

이 예제에서 renderAllStrokes 함수는 선택 사항이며, 잉크 데이터를 처리하고 canvas 요소에서 원래의 스트로크 세그먼트를 부드러운 곡선으로 렌더링하는 데 호출됩니다(잉크 데이터 렌더링 방법 참조).

JavaScript


// Occurs when the pointer (touch, pen, mouse) is lifted from the canvas.
// Each stroke ends with onPointerUp.
function onPointerUp(evt)
{
    // Process pen and mouse (with left button) only. Reserve touch for manipulations.
    if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === 0)))
    {
        statusMessage.innerText = pointerDeviceType + " pointer up: Finish stroke. "
        if (evt.pointerId === pointerId) {
            // Add current pointer to the ink manager (end stroke).
            inkManager.processPointerUp(evt.currentPoint);

            // End live drawing.
            inkContext.closePath();

            // Render strokes using bezier curves.
            renderAllStrokes();

            // Reset pointer Id.
            pointerId = -1;
        }
    }
    else
    {
        // Process touch input.
    }
}

좀 더 복잡한 샘플 링크는 이 페이지 하단에 있는 관련 항목을 참조하세요.

6. 전체 예제

잉크 데이터 캡처 전체 코드를 참조하세요.

요약

이제 Windows 스토어 앱에서 잉크 데이터를 캡처하는 방법을 기본적으로 이해하게 되었을 것입니다.

이 코드 동작을 보려면 Windows 스토어 앱 샘플 홈페이지에서 다음 잉크 샘플을 빌드하고 실행하세요.

입력: 간단한 잉크 샘플 - 잉크 저장, 로드, 선택, 삭제 및 필기 인식을 통한 잉크 스트로크의 텍스트 변환과 같은 잉크 기능을 보여 줍니다.
입력: 잉크 샘플 - 입력: 간단한 잉크 샘플에 설명된 기능 외에, 이 샘플은 보다 풍부한 UI를 제공하고 인식 결과 내에서 검색하는 방법을 보여 줍니다.