Make a single touch drawing app in Framer. 프래이머를 이용한 그림판 만들기.
framer·@songgmo·
0.000 HBDMake a single touch drawing app in Framer. 프래이머를 이용한 그림판 만들기.
<html>
<p>프래이머를 이용해서 그림판을 만들어 볼 것입니다.</p>
<p>동그란 레이어를 이용해서 터치가 일어난 부분에 점을 찍는 형식으로</p>
<p>그리는 것은 한계가 있습니다. </p>
<p><br></p>
<p>여기서는 svg 를 이용하여 벡터 그림을 그리도록 하겠습니다.</p>
<p><br></p>
<pre><code>frame_l = new Layer<br>
size : Screen.size<br>
backgroundColor: "ddddcc"</code></pre>
<p><br></p>
<p>먼저 드로잉할 레이어를 만들어줍니다.</p>
<p>화면크기와 같게 해줍니다.</p>
<p><br></p>
<pre><code>svgA = []<br>
tmpSvg = new SVGLayer<br>
parent: frame_l<br>
backgroundColor: null</code></pre>
<p><br></p>
<p>SVG 를 저장해둘 배열을 하나 만들어서 각 선들을 저장해둘 것입니다.</p>
<p>선이 그려질 동안 보여질 임시용 SVG 레이어를 생성합니다. </p>
<p><br></p>
<pre><code>drawing = false <br>
lineData = ""</code></pre>
<p><br>
드로잉 상태를 구분할 변수와 </p>
<p>선이 그려지는 정보를 가질 SVG 데이터 변수를 선언합니다.</p>
<p><br></p>
<pre><code>draw = (e)-><br>
x = Events.touchEvent(e).clientX<br>
y = Events.touchEvent(e).clientY<br>
return x+" "+y<br>
</code></pre>
<p><br></p>
<p>이벤트 값을 이용하여 좌표를 문자열로 반환하는 함수를 생성합니다.</p>
<p><br></p>
<pre><code>frame_l.on Events.TouchStart,(e) -><br>
drawing = true<br>
lineData = "M "+draw(e)</code></pre>
<p><br></p>
<p>처음 터치가 시작되면 M 으로 시작하는 좌표를 SVG 데이터변수에 저장합니다.</p>
<p>draw 함수를 이용해 좌표값을 설정합니다.</p>
<p><br></p>
<pre><code>frame_l.on Events.TouchMove,(e) -><br>
lineData += " L "+draw(e)<br>
if drawing then tmpSvg.svg = "<svg><path d='"+lineData+"' fill='transparent' stroke='black' />"</code></pre>
<p><br></p>
<p>터치 손가락을 움직이면 선이 그려집니다.</p>
<p>선이 그려지는 부분은 L 로 시작하는 좌표값을 저장합니다.</p>
<p>drawing 중일때는 tmpSvg 레이어에 저장되는 좌표 데이터를 svg 값에 넣어줍니다.</p>
<p>이렇게 하면 그림이 그려질때의 선을 즉시 보여줄 수 있습니다.</p>
<p>이 부분이 없으면 손을 떼야만 선이 표시됩니다.</p>
<p><br></p>
<pre><code>frame_l.on Events.TouchEnd,(e) -><br>
drawing = false <br>
if lineData.indexOf("L") isnt -1 <br>
shape = new SVGLayer<br>
svg: "<svg><path d='"+lineData+"' fill='transparent' stroke='black' />"<br>
backgroundColor: null<br>
parent: frame_l <br>
svgA.push(shape)<br>
tmpSvg.svg = ""<br>
</code></pre>
<p><br></p>
<p>터치를 떼면 drawing 을 끝내고 저장된 그림 데이터를 </p>
<p>svgLayer 를 이용해서 선으로 생성합니다.</p>
<p>생성된 레이어는 svgA 에 저장합니다.</p>
<p>임시로 그려진 선 데이터는 삭제합니다.</p>
<p><br></p>
<p>그림판이 완성되었습니다.</p>
<p>선이 그려진 레이어들을 각각 저장하고 있어서 </p>
<p>이후에 svg 레이어를 하나씩 지우면 그리기 취소 기능을 만들 수 있습니다.</p>
<p><br></p>
<p>Framer 에서 SVG 를 이용한 그림판 만드는 방법이었습니다.</p>
<p><br></p>
<p>감사합니다.</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
</html>