웹에서 잠깐 좌표를 그리고, 그 좌표를 가지고 와야 할 일이 있어서 자바스크립트를 쓰기로 했다. 이쯤이면 슬슬 그래픽 엔지니어로 진화할 것 같다.
기존에도 자바스크립트에는 그래픽을 지원하는 canvas 라는 API가 존재하기는 한다. 그러나 이 라이브러리는 정말 그림만 그려서 도면을 그려야 하고, 마우스 오버해서 직선을 그려야 할때, 일일히 이전에 그렸던 직선을 랜더링 제거해야한다는 점이 너무 불편했다. 그러다 보게된 것이 fabric 라이브러리다.
(현재 뒤로가기까지 구현되어 있다.)
fabric 라이브러리의 장점은 만들어진 요소 하나하나가 객체화 된다는 점이다. 그래서, 뒤로가기도 마지막에 그린 객체 하나를 지정해서 삭제하면 된다.
fabric을 자신의 프로젝트에 붙이는 과정은 간단하다.
Fabric.js Javascript Canvas Library
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands of simple paths or good old images You can add text and dynamically manipulate its size, alignment,
fabricjs.com
여기는 fabric 공식 사이트이다. 공식 사이트의 아래에 보면
다음처럼 라이브러리를 사용할 수 있도록 링크가 나와있다. 링크를 클릭하면 자바스크립트가 웹 형태로 뜨는데, 이 때 출력되는 주소가 필요하다.
이 주소를 제이쿼리 붙이듯이 head 부분에 script로 붙여주면 사용준비가 끝난다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<script type="text/javascript" src="./canvas.js"></script>바디 부분에는 canvas를 만들어주는데, 이 때 아이디를 반드시 설정해야한다. fabric을 canvas에 붙이는 형태라, fabric을 붙일 캔버스를 찾아야 하는데, 이 때 id를 통해 찾게 되므로 반드시 아이디를 설정해주자.
<body>
...
<canvas id="c" width="1000" height="1000" style="border:1px solid #ccc"></canvas>
</body>
그리고 js파일이나, HTML의 script 부분에서 다음과 같이 캔버스를 선언해주면 fabric을 사용할 준비가 완료된다.
var mCanvas;
...
window.onload = function drawOneLine(){
initHTML();
...
}
function initHTML(){
mCanvas = window._canvas = new fabric.Canvas('c', {selection : false});
}
fabric 을 이용한 프로젝트는 다음 깃허브에서 계속 업로드중이다. 혹시 참고하고 싶으면 참고하시길.......
github.com/littlemary1379/InstrumentWithJavaScript
littlemary1379/InstrumentWithJavaScript
개발요청으로 받은 자바스크립트를 이용한 도면 생성기 + 좌표 생성기. Contribute to littlemary1379/InstrumentWithJavaScript development by creating an account on GitHub.
github.com
'HTML+CSS+Javascript > Javascript' 카테고리의 다른 글
| [javascript] 스크롤마다 한 섹션씩 이동하는 모션 이벤트 만들기 (9) | 2021.07.08 |
|---|---|
| JavaScript] fabric.js 를 이용하여 마우스 포인터를 따라 직선 긋기 (0) | 2021.05.04 |
| 12. HTML 문서의 동적 구성 (0) | 2020.03.13 |
| 11. document (0) | 2020.03.13 |
| 10. DOM 객체 다루기 (0) | 2020.03.12 |
