[Meme-Maker] ✏️폰트 크기 및 글꼴 변경 기능 추가!

지난 시간에 만들었던 Stroke / Fill 모드 변경 기능에 이어, 이번엔 폰트 크기와 글꼴을 변경할 수 있는 기능을 만들었다.

조금씩 익숙해지는 것인지, 이번에는 1시간 만에 끝냈다. 간단하게 정리해봐야겠다.

 

추가한 코드

 

      <!-- HTML -->
      <input
        id="font-size"
        type="range"
        min="24"
        max="72"
        step="1"
        value="48"
      />
      <select id="font-select">
        <option>-- 폰트 선택 --</option>
        <option value="Dovemayo_gothic">둘기마요고딕체</option>
        <option value="KyoboHandwriting2021sjy">교보문고 손글씨체</option>
        <option value="RixMomsBlanketR">Rix할매의꽃담체</option>
        <option value="YiSunShinDotumM">이순신돋움체</option>
      </select>

/* 폰트 불러오기 */
@font-face {
  font-family: "YiSunShinDotumM";
  src:
  url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/YiSunShinDotumM.woff")
  format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "RixMomsBlanketR";
  src:
  url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/RixMomsBlanketR.woff2")   
  format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "KyoboHandwriting2021sjy";
  src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KyoboHandwriting2021sjy.woff2")
  format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Dovemayo_gothic";
  src:
  url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2")
  format("woff2");
  font-weight: normal;
  font-style: normal;
}


select > option:nth-child(1) {
  font-family: sans-serif;
}

select > option:nth-child(2) {
  font-family: "Dovemayo_gothic";
}
select > option:nth-child(3) {
  font-family: "KyoboHandwriting2021sjy";
}
select > option:nth-child(4) {
  font-family: "RixMomsBlanketR";
}
select > option:nth-child(5) {
  font-family: "YiSunShinDotumM";
}

// JavaScript


const fontSize = document.getElementById("font-size");
const fontSelect = document.getElementById("font-select");

function onDoubleClick(event) {
  const text = textInput.value;
  const font = fontSelect.value;
  const size = fontSize.value;

  if (text !== "") {
    ctx.save();
    ctx.lineWidth = 1;
    ctx.font = size + "px " + font;
    ctx.fillText(text, event.offsetX, event.offsetY);
    textInput.value = null;
    ctx.restore();
  }
}

// 폰트 선택 박스에 폰트를 로드하여 직관적으로 나타냄
function fontSelectBoxChange(event) {
  fontSelect.style.fontFamily = `${event.target.value}`;
}

fontSelect.addEventListener("change", fontSelectBoxChange);

 

MEME-MAKER

 

결과

 

 

 

 

느낀점 및 회고

 

지난번에 고생을 많이 해서 그런지, 이번 기능 추가는 되게 쉽게 했다. html의 select 태그를 새롭게 알게 되었고, 얼추 사용법도 익히면서 유익한 시간이 된 것 같다. 자바스크립트는 쓰면 쓸수록 눈에 트이는 느낌이다. 감을 찾아간다고 해야할까?

지금 코드는 단순히 기능 구현에 집중을 했기에 최적화가 덜 됐다고 생각한다. 윗 움짤만 봐도 폰트 선택을 누른 후에야 드롭다운 메뉴의 폰트들이 로드되는게 보인다. 최적화하는 방법도 조금씩 찾아보면서 공부해야겠다.