연말까지 매일 웹 사이트를 꾸준히 만드는 대학생~ 51일째 간단한 그림 그리기 어플 만들기~

14250 단어 JavaScriptCSS

입문


안녕하세요@70days_js
오늘은 간단한 회화 응용 프로그램을 만들어 보았다.
그럼에도 불구하고 기능은 두 가지가 있다.웃다
  • 선을 그립니다
  • 선 사이즈 변경
    • 색상과 지우개 기능이 바뀌지 않았습니다.
    나는 캔버스를 사용하지 않았다.
    오늘이 51일째다.(2019/12/8)
    잘 부탁드립니다.

    사이트 URL


    한 일



    나는 두 가지 일을 한 적이 있다.
  • 선을 그립니다
  • 선 사이즈 변경
    • 우선 html부터(전문)↓
    
  <body>
    <div id="mouseMoveWrapper">
      <div id="positionDisplay">描画停止中</div>
      <div>
        <div>
          <input type="range" min="1" id="range" max="100" step="1" value="1" />
          <span id="rangeDisplay">1</span>
        </div>
      </div>

      <div id="mouseMove"></div>
    </div>
  </body>
    id=positionDisplay가 그려지고 있는지 표시합니다.
    id="range"는 텍스트 크기를 변경할 수 있는 표시줄입니다.1~100의 조정이 가능하다.
    id=mouseMove로 선을 그립니다.
    다음은 css(전문)↓
    body {
  margin: 0;
  overflow: hidden;
}
#mouseMoveWrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#mouseMove {
  height: 90vh;
  width: 90vw;
  border: solid 1px black;
}

.dot {
  position: absolute;
  background-color: black;
  width: 1px;
  height: 1px;
  transform: translateY(-50%) translateX(-50%);
}
    .dot 클래스는 선을 그리는 클래스입니다.
    transform을 사용하는 것은 커서의 위치를 중심으로 선을 그리기 위해서입니다.
    즉, 선은 사실 선이 아니라 div로 만들어졌는데 이게 없으면 div의 왼쪽 상단 부분이 커서 위치에 나타나 멀어 보인다.
    마지막은 JavaScript입니다.
    길지만 싣겠습니다.(전문)↓
    let mouseMove = document.getElementById("mouseMove");
let positionDisplay = document.getElementById("positionDisplay");
let rangeWidth = 1;
let rangeHeigt = 1;
let x;
let y;
let flag = false;
mouseMove.addEventListener("mousedown", function() {
  flag = true;
});
mouseMove.addEventListener("mouseup", function() {
  flag = false;
});

mouseMove.addEventListener("mousemove", function(e) {
  drawStatusDisplay();
  if (flag) {
    x = e.pageX;
    y = e.pageY;
    let div = document.createElement("div");
    div.setAttribute("class", "dot");
    div.style.top = y + "px";
    div.style.left = x + "px";
    div.style.width = rangeWidth + "px";
    div.style.height = rangeHeigt + "px";
    mouseMove.appendChild(div);
  }
});

function drawStatusDisplay() {
  if (flag) {
    positionDisplay.innerHTML = "描画中";
  } else {
    positionDisplay.innerHTML = "描画停止中";
  }
}
// _____ここからステータスバー_______

let range = document.getElementById("range");
let rangeDisplay = document.getElementById("rangeDisplay");

let dotElements = document.getElementsByClassName("dot");
function rangeChange() {
  rangeDisplay.innerHTML = range.value;
  rangeWidth = range.value;
  rangeHeigt = range.value;
}

range.addEventListener("input", rangeChange);
    마우스다운과 마우스업에서 마우스를 눌렀는지 확인하십시오.
    누르면 flag 변수에true를 넣고, 누르지 않았을 때false를 넣습니다.
    이 flag 변수를 사용하여drawStatusDisplay () 함수를 사용하여 그리는 지 여부를 표시합니다.
    또한 그림 자체에 대해서도 이 flag 변수를 사용했는데 마우스가 눌리면 그림을 그리고 눌리지 않으면 그림을 그리지 않는다.↓
    mouseMove.addEventListener("mousemove", function(e) {
    drawStatusDisplay();
    if(flag)← 이거!
    range에 관해서는rangeWidth와rangeWidth의 변수를 준비하였으며, 회화에서도 이를 사용하여 사이즈의 변경을 실현하였다.

    기타 조사


    사실 나는 오늘 프로미스로 뭔가를 하고 싶다.
    하지만 도저히 이해할 수 없어 포기했다.
    그래서 중도까지 조사할 것을 내보낼 것이다.
    전제 조건
    - 자바스크립트는 싱글 레드.
    - 콜백 함수 호출 함수
    [x] 동기화와 비동기화의 차이
    - 동시 처리//기술 순서대로 수행(var과 일부는 다르지만)
    - 비동기 처리··· 처리 순서는 세패화, 실행(ex: 이벤트 처리)
    [x] 병렬 처리와 비동기 처리의 차이
    - 병렬 처리 다중 스레드
    - 비동기식 처리//단일 스레드(ex:promise)
    왜 promise야?
    - 비동기식 중에 리셋을 자주 사용하는 경우 읽기 어려움
    - 순서가 너무 지저분해서
    - 동시 쓰기
    - → 이른바 프로미스, 실행은 비동기 처리, 독법은 동기화 처리
    [x]promise의 특징
    - 비동기 함수는 프로미스 대상을 호출자에게 되돌려주지 원래 되돌려주려는 값이 아니다
    - 실행할 수 있으면 promise 대상을 통해 호출자에게 값을 전달합니다
    [x] JavaScript 스레드는 안 해도 되는 작업입니다.
    - 타이머 처리
    - HTTP 통신
    - 데이터베이스 주변 활동

    감상


    div로 선을 만들면 예쁘지 않기 때문에 그림 앱을 하려면 역시 캔버스가 좋겠다고 생각합니다.
    그리고 프로미스는 어려워요.하지만 열심히 하겠습니다.

    참고 자료

  • JavaScript 비동기식 처리를 병렬 처리로 착각하십니까? -Qiita
    • 정말 감사합니다.
    box-shadow로 달을 표시합니다.
    HTML CSS Flexbox

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage