본문 바로가기

Paint-Up

 (6)
20210317 바닐라 js로 그림판 기능추가, Rectangle guideline, page vs offset vs client vs screen Nomadcoder 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 그림판 사각 툴 가이드 라인 기능(Rectangle Guideline of Rectangle Tool) 어제 사각 툴의 경우 구현은 했지만 사각툴의 가이드 라인을 만드는 것이 너무 나도 어려웠다. 결론 부터 이야기 하자면 드디어 구현했다 ~ ! 기능을 설명하자면, 이전에 사각툴을 이용하게 되면 해당 부분에 드래그를 할때 사각 형 가이드 라인이 보이지 않았다. 계속 시도 하고 했지만 기능을 구현하는데는 실패 하였고 오늘만에 만들었다. 01 : HTML 위에 표시 되기 위한 요소를 하나 추가했다. 02 : 요소 이벤트 ..
20210316 바닐라 js로 그림판 기능추가, Rectangle Tool(사각 툴), Tool Guider,절대상대좌표, clearRect, Nomadcoder 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 도형 툴 도형 툴 중에 사각형 도형 툴을 만들기 위해서 엄청나게 많은 시간을 쏟았다. 일단 여러 시행착오를 많이 겪었다. 원래는 그림판 처럼 그었을 때 사각형 도형 가이드 라인이 보였으면 했다. 하지만 여러가지 장벽을 만나 포기하게 되었다. Canvas API의 한계인것 같다. 사각형 그리기 툴 기본적으로 html을 통해 rect 버튼을 만들었다. Rect html 요소 가져오기 // ELEMENTS const canvas = document.getElementById("jsCanvas"); const ctx = c..
20210315 바닐라 js로 그림판 기능추가(Custom Color Picker, Custom Canvas Sizer), input color, 밴더 프리픽스(Vendor prefix) , 크로스 브라우징, webkit, Nomadcoder 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 커스텀 색깔 픽커 (Custom color picker) 저번에 다른 기능을 구현하다가 input 태그의 color 타입이 있는 것을 보았다. input의 color 은 custom 가능한 창을 열어서 색을 input 할수도 있다. 문제 input color의 경우 모양을 자유자재로 변경이 불가능 했다.(radius 값을 줄수 없다.) 방안 01 새로운 요소(div)로 감싸서 div를 커스텀하여 표시하게 하고 input을 display none으로 설정하여 Javascript를 통해서 연결한다. check 요소에도 ..
20210312_바닐라 js로 그림판, 기능 추가(현재색 표시, 커서), Nomadcoder 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 현재 색 표시 .controls .check { margin-bottom: 30px; width: 50px; height: 50px; border-radius: 25px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } const check = document.getElementById("jsCheck"); check.style.backgroundColor = INITIAL_COLOR; function handleColorC..
20210311_바닐라 js로 그림판 만들기 끝, 색 고르기, 붓 크기, 채우기, 저장, toDataURL() 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 저번 시간에는 기본적인 CSS, HTML 그리고 JS의 그리기 기능 까지 구현했다. VScode 다중커서 Ctrl + d : 같은 단어 찾아서 추가식으로 선택 Ctrl + Alt + Up/Down : 위/아래로 커서 추가 ALT + LMB(왼마클) : 클릭 위치에 다중커서 추가 ESC : 다중선택모드 종료 이번에 구현할 사항 색 바꾸기 js 붓 크기 바꾸기 js 채우기 기능 js 이미지 저장하기 js JS : 색 바꾸기 기능 구현하기 colors 변수에 dom을 가져옴 colors 변수를 Array로 만들고 forEach()를 통해서 dom하나하나를 callback함수로 컨트롤 함 callback 함수로는 Array의 i..
20210310_바닐라 js로 그림판 만들기, HTML, CSS (Reset, import, flex, unset, all), Emmet, Canvas, mouseEvent 바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 전체적인 기능 Canvas API를 이용함 굵기 조절 색깔 선택 그리기 채우기 저장 기능 사전에 필요한 것들 깃헙 계정 구글 크롬 VScode Set up HTML CSS, js 파일 연결 전체적인 요소 구현 convas 태그 사용 CSS CSS 초기화 파일 만들기 (reset.css) CSS RESET code RESET CSS을 CSS파일에 연결하기 @import "위치" display : flex flex 속성 알아보기 @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Seg..

티스토리툴바