30개의 프로젝트로 배우는 프론트엔드 with VanillaJS (7-1) 그림판

productuidev·2022년 10월 11일
0

FE Study

목록 보기
61/67
post-thumbnail

[fastcampus] 30개의 프로젝트로 배우는 프론트엔드 with VanillaJS (7-1)

(7) 그림판 구현

01) 프로젝트 개요

Canvas를 활용한 그림판 구현

Canvas API
Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.
Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

참고 : WebGL(Web Graphics Library)
플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API

02) 개발환경 설정 (Parcel)

Build Tool은 Parcel을 활용

참고 : 모듈번들러

npm init -y로 package.json 생성
npm i -D parcel @parcel/transformer-sass (sass 플러그인 설치)

폴더 생성

package.json 설정

{
  "scripts": {
    "start": "parcel",
    "build": "parcel build --public-url ./"
  }
}

index.html 초기 설정
build 경로 체크

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drawing Board</title>
  <link rel="stylesheet" href="./src/scss/style.scss" />
</head>

<body>
  <h1>그림판</h1>
  <script src="./src/js/index.js"></script>
</body>
</html>

npm run build
npm run start

Server runnning at http://localhose:1234
Parcel build된 상태로 브라우저에서 확인 가능 (/dist/에 생성)
build Error 시 생성된 /.parcel-cache/ 체크 (캐시 삭제)

eslint, prettier 설치 (-D)

npm i -D eslint
npm i -D --save-exact prettier
npm i -D eslint-config-prettier eslint-plugin-pretter

기타
.eslintrc.json, .eslintignore 설정
.prettierrc.json, .prettierignore 설정
.gitignore 설정
.setting.json 설정

(세부 설정은 이전 시간에 사용했던 설정 그대로 사용)

03) HTML과 SASS

  • HTML, SASS : 강의에서 기본 제공한 HTML, SASS를 index.html와 style.scss에 각각 추가
  • Icon : Font Awesome 설치하여 추가

마크업 수정 및 구조 분석

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>Drawing Board</title>
	<link rel="stylesheet" href="./src/scss/style.scss" />
</head>

<body>
	<div class="container" id="container">
		<div class="toolbar" id="toolbar"><!-- 툴바 -->
			<div class="tool brush" id="brush"><!-- 그리기 -->
				<i class="fas fa-paint-brush"></i>
			</div>
			<div class="tool eraser" id="eraser"><!-- 지우기 -->
				<i class="fas fa-eraser"></i>
			</div>
			<div class="tool nav" id="navigator"><!-- 네비게이션 -->
				<i class="fas fa-map"></i>
			</div>
			<div class="tool undo" id="undo"><!-- 취소/이전단계로 돌아가기 -->
				<i class="fas fa-undo"></i>
			</div>
			<div class="tool clear" id="clear"><!-- 새로만들기 -->
				<i class="fas fa-trash-alt"></i>
			</div>
			<div class="tool dl"><!-- 다운로드 -->
				<a id="download"><i class="fas fa-download"></i></i></a>
			</div>
			<input class="tool colorSelector" id="colorPicker" type="color" value="#e53935"><!-- 색상선택 -->
		</div>

		<canvas class="canvas" id="canvas" width="900" height="800"></canvas><!-- 그림판 -->

		<div class="brushPanel hide" id="brushPanel"><!-- 브러쉬 -->
			<label for="brushSize" class="brushSizeLabel"> Size</label>
			<input type="range" class="brushSize" id="brushSize" value="10" min="1" max="80">
			<div class="brushSizePreviewContainer">
				<label for="brushSize" class="brushSizePreview" id="brushSizePreview"></label>
			</div>
		</div>

		<div class="imgNav hide" id="imgNav"><!-- 이미지네비게이션 -->
			<img id="canvasImg" class="navImg" />
		</div>
	</div>
	<script src="src/js/index.js"></script>
</body>

</html>

fontawesome을 설치하여
미리 설정해둔 그림판 기능 관련 아이콘이 보이도록 import

Free Package 설치

npm install --save @fortawesome/fontawesome-free

style.scss 상단에 import

$fa-font-path: '../../node_modules/@fortawesome/fontawesome-free/webfonts';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';

...

설정 제공된 그림판 미리보기 (npm run start)
hide 클래스를 임시로 제거하여 brushPanel 브러시패널과 imgNav 이미지네비게이션도 체크

  • colorPicker : html 자체 기능 (value로 타입값을 들어오면 색상이 선택됨)
  • brushPanel : slider를 움직이면 펜 사이즈 설정 가능하도록 구현 예정
  • imgNav : 캔버스에 그린 내용을 미니맵으로 보여주는 기능 구현 예정

레이아웃 설정 시 참조

index.js 초기 셋팅

VanillaJS로 구현

class DrawingBoard {
  constructor() {}

  assignElement() {}

  addEvent() {}
}

총 구현할 기능

  • 선 그리기 기능 : 캔버스에 자유자재로 선 그리기
  • 지우개 기능 : 캔버스에 그린 내용 지우기
  • 네비게이터 기능 : 현재 캔버스에 그리는 내용을 미니맵을 통해 미리보기
  • 실행취소 기능 : 그리고 있던 현재 내용 실행 취소하기
  • 초기화 기능 : 캔버스에 그린 내용 초기화하기
  • 다운로드 기능 : 캔버스에 그린 내용 파일로 저장하기

기타 참고 자료 & 활용사례


Ch1~6까지 Part 1. Basic을 마치고 이번 강의부터 Part2. Intermediate 시작 👊

profile
필요한 내용을 공부하고 저장합니다.

0개의 댓글