[WPF] 화면에 그림을 그리는 잉크캔버스

화면에 그림을 그린다는것은 생각보다 쉬운일이 아니다. 다만 WPF 그리고 UWP에서는 그 방안을 손쉽게 마련해준다. 

하지만 입맛에 맛게 쓰기 위해서는 상당한 노력이 필요하다. 

 

1. xaml 에 다음을 추가

        <InkCanvas 
           SnapsToDevicePixels="True"
           RenderOptions.EdgeMode = "Unspecified"/>

       이것만 추가해도 기본적으로 마우스 클릭으로 그림을 그릴 수 있다. 
        옵션에 대해 설명하자면, 첫번째 옵션은 디바이스에 알맞은 픽셀로 변경하는 옵션이고, 
        두번째 옵션은 안티엘리어싱을 켤지 끌지 여부의 옵션이다. 

 

2. cs 코드에서 커스터마이징
     - 그림을 그리는 항목의 세부 설정이 가능하다. 색상이라든지(투명도 포함), 두께라든지.

       좀 더 세분화 하자면 그리는 Tip의 모양도 변경이 가능하다. 

DrawingAttributes tempAttr = new DrawingAttributes
{
    Color = Color.Red, //선색 지정. Color.fromARGB를 통해 알파값을 줄 수 있다. 
    Width = 10, //Tip의 너비값
    Height = 10, // Tip의 높이값
    StylusTip = StylusTip.Ellipse, //Tip 모양. 원과 사각형이 있다.
    FitToCurve = false, //보정알고리즘 켜고 끄는 여부. 보정이 너무 심하다. 
    StylusTipTransform = new Matrix(3, 2, 0, -2, 0, 0), //팁 모양을 변경한다. 행렬 연산을 한다.
    IsHighlighter = false, //형광펜 같은 하이라이터 인지
    IgnorePressure = true,
};

//이렇게 생성 후 , 
InkCanvas변수명.DefaultDrawingAttributes = tempAttr; 이렇게 주면 된다.

     기본적인 사용법은 이렇게 사용 할 수 있다.

 

3. 잉크캔버스 세부 설명
     - 잉크캔버스는 Strokes 와 각 Stroke 안에 StylusPoints 로 그림을 그리게 된다. 
     - Stroke : 한붓그리기 처럼, 마우스 다운 -> 무브 -> 업 의 이벤트 동안 연속으로 그린 하나의 선을 의미한다.
        * 각 선 마다 선 색을 지정할 수 있다

     - StylusPoints는 각 Stroke에서 실제 그림을 그리게 되는 점들의 포인트 배열이다
        * 각 포인트 마다 포인트 색을 지정할 수 없다. 

4. 수동으로 잉크캔버스 그리기
     - 잉크캔버스의 속도 혹은 성능 향상을 위해 커스터마이징을 해야 할 때가 있다. 대체로 마우스에선 잘 그려지나

        터치모듈에서는 노이즈 등 성능이슈가 있다. 이를 위해서 좌표값 자체를 보정해야 할 때가 있다. 

     - 먼저, 잉크캔버스의 IsEnabled를 false로 설정하고, 각 mouse down, move, up 이벤트에서 코딩을 하면 된다.

        위에 설명한 Stroke와 StylusPoints에 값을 직접 추가/변경하면 알아서 그림을 맞게 그려준다. 

         * 단, 잉크캔버스의 변수 자체를 조작하게 되면, 값이 변화할때마다 매번 새로 그리므로 성능이슈가 발생한다. 
            따라서 지역변수에서 작업을 완료 한 후, 딱 한번만 잉크캔버스 변수를 건드려 줘야 한다. 

 

5. 잉크캔버스 모드

     - 잉크캔버스변수명.EditingMode 를 통해 모드를 변경할 수 있다. 
         - InkCanvasEditingMode

// 요약:
//     Indicates that no action is taken when the pen sends data to the System.Windows.Controls.InkCanvas.
None = 0,
//
// 요약:
//     Indicates that ink appears on the System.Windows.Controls.InkCanvas when the
//     pen sends data to it.
Ink = 1,
//
// 요약:
//     Indicates that the System.Windows.Controls.InkCanvas responds to gestures, and
//     does not receive ink.
GestureOnly = 2,
//
// 요약:
//     Indicates that the System.Windows.Controls.InkCanvas responds to gestures, and
//     receives ink.
InkAndGesture = 3,
//
// 요약:
//     Indicates that the pen selects strokes and elements on the System.Windows.Controls.InkCanvas.
Select = 4,
//
// 요약:
//     Indicates that the pen erases part of a stroke when the pen intersects the stroke.
EraseByPoint = 5,
//
// 요약:
//     Indicates that the pen erases an entire stroke when the pen intersects the stroke.
EraseByStroke = 6

참고로, None이 아닐 경우 혹은 캔버스 자체가 Disable 되어 있지 않은경우, 버튼 클릭등이 안된다. (자식에 버튼이 있을때)

 

6. UWP의 잉크캔버스와 차이점

    - UWP의 잉크캔버스 성능이 훨씬 좋다. 마우스로는 별 차이가 없을지 모르나, 프로젝트를 진행하면서 터치 스크린으로
      그릴경우에는 UWP가 훨씬 부드럽고 빠르게 그려진다. 

    - 그러나 UWP는 특성상 투명 배경을 설정할 수 없다. 따라서 웹브라우저 등 특정 화면 위에 투명하게 그리려면 WPF의
       잉크캔버스를 사용해야 한다