디자이너 개발로그

Canvas에서 가장 기본적인 드로잉 개체는 역시 '선'일 것이다. 선은 크게 직선과 곡선으로 나뉘는데, 먼저 직선부터 살펴보고자 한다.직선을 그릴 때에는 간단하게 lineTo라는 메소드를 사용하면 된다. 직선을 그릴 때 필요한 것은 시작점과 끝점인데, 시작점은 현재위치가 되므로, lineTo 메소드는 끝점의 좌표만을 인자로 한다. 즉, lineTo(x,y)를 하면 x,y를 향해 선을 그리게 된다. 시작점은 (0,0)이 기본인데, 아무 것도 그리지 않고 시작점을 그리기 위해서 moveTo를 사용할 수 있다. Canvas의 호출부터 하면 아래와 같다. (HTML 문법)(10,10)에서 (90,90)으로 선을 그렸는데 아무 것도 보이지 않는다. 선의 색깔과 그리기 명령이 빠졌기 때문이다. 재미있는 것은 선을..

최근 참여 중인 프로젝트에서 SVG 못지 않게 많은 부분을 차지하고 있는 것이 바로 이 Canvas인데, 그 전에도 QML쪽에서 어떤 요소들을 그릴 때 가볍게는 사용해 본 적이 있지만 아주 본격적으로 써본 적은 없어서 많은 어려움을 겪었었고, 지금도 살짝 남아있다. Canvas에 대해서도 공부해보면서 그 기록을 남기고자 한다.Canvas API는 Javascript를 활용해 그림을 그리는 API(Application Program Interface)로, 주로 2D 그래픽에 초점을 두고 있으나 3D 그래픽도 제한적으로 지원하는 인터페이스이다. 때문에 Javascript 문법을 많이 따르며, Javascript 숙련도가 높으면 비교적 쉽게 다룰 수 있는 API이다.HTML의 엘리먼트나 QML의 Canvas..

최근 작업 중인 프로젝트에서 SVG를 조작하고 사용할 일이 있는데, 아직 SVG에 대해 자세히 알지 못하는 부분들이 있다보니 꽤 어려움을 겪었던 내용이 있었다. 그래서 이번 기회에 SVG에 대해서 자세히 알아보면서 내용을 정리해두고자 한다.1. SVG란SVG를 그 전에도 많이 접하고 직접 많이 만들기도 했었는데, 정확한 용어의 정의는 이번에 알게 되었다. SVG는 Scalable Vector Graphic의 약자로, '크기 조작이 가능한 벡터 그래픽'이라는 의미이다. 말 그대로 벡터 그래픽이기 때문에 확대하거나 축소해도 래스터화(Rasterized) 된 비트맵(Bitmap) 이미지와 달리 계단 현상(Aliasing) 문제가 생기지 않는데, 그래픽 자산 자체가 선과 색상 정보 등을 좌표와 코드로 가지고 있..