Make a single touch drawing app in Framer. 프래이머를 이용한 그림판 만들기.

프래이머를 이용해서 그림판을 만들어 볼 것입니다.

동그란 레이어를 이용해서 터치가 일어난 부분에 점을 찍는 형식으로

그리는 것은 한계가 있습니다. 

여기서는 svg 를 이용하여 벡터 그림을 그리도록 하겠습니다.

frame_l = new Layer

    size : Screen.size

    backgroundColor: "ddddcc"

먼저 드로잉할 레이어를 만들어줍니다.

화면크기와 같게 해줍니다.

svgA = []

tmpSvg = new SVGLayer

    parent: frame_l

    backgroundColor: null

SVG 를 저장해둘 배열을 하나 만들어서 각 선들을 저장해둘 것입니다.

선이 그려질 동안 보여질 임시용 SVG 레이어를 생성합니다. 

drawing = false  

lineData = ""

드로잉 상태를 구분할 변수와 

선이 그려지는 정보를 가질 SVG 데이터  변수를 선언합니다.

draw = (e)->

    x = Events.touchEvent(e).clientX

    y = Events.touchEvent(e).clientY

    return x+" "+y

이벤트 값을 이용하여 좌표를 문자열로 반환하는 함수를 생성합니다.

frame_l.on Events.TouchStart,(e) ->

    drawing = true

    lineData = "M "+draw(e)

처음 터치가 시작되면 M 으로 시작하는 좌표를 SVG 데이터변수에 저장합니다.

draw 함수를 이용해 좌표값을 설정합니다.

frame_l.on Events.TouchMove,(e) ->

    lineData += " L "+draw(e)

    if drawing then tmpSvg.svg = "<svg><path d='"+lineData+"' fill='transparent' stroke='black' />"

터치 손가락을 움직이면 선이 그려집니다.

선이 그려지는 부분은 L 로 시작하는 좌표값을 저장합니다.

drawing 중일때는 tmpSvg 레이어에 저장되는 좌표 데이터를 svg 값에 넣어줍니다.

이렇게 하면 그림이 그려질때의 선을 즉시 보여줄 수 있습니다.

이 부분이 없으면 손을 떼야만 선이 표시됩니다.

frame_l.on Events.TouchEnd,(e) ->

    drawing = false 

    if lineData.indexOf("L") isnt -1 

        shape = new SVGLayer

            svg: "<svg><path d='"+lineData+"' fill='transparent' stroke='black' />"

            backgroundColor: null

            parent: frame_l 

        svgA.push(shape)

        tmpSvg.svg = ""

터치를 떼면  drawing 을 끝내고 저장된 그림 데이터를 

svgLayer 를 이용해서 선으로 생성합니다.

생성된 레이어는 svgA 에 저장합니다.

임시로 그려진 선 데이터는 삭제합니다.

그림판이 완성되었습니다.

선이 그려진 레이어들을 각각 저장하고 있어서 

이후에 svg 레이어를 하나씩 지우면 그리기 취소 기능을 만들 수 있습니다.

Framer 에서 SVG 를 이용한 그림판 만드는 방법이었습니다.

감사합니다.