[3] 사용할 이미지 제작 & 캔버스에 이미지 넣는 버튼 만들기

 

본격적으로 사용할 이미지를 그려봤다.

 

이런 느낌으로 완성할 수 있게 다양한 요소와 캐릭터를 그렸다.

구현 후 필요한 요소들이 있다면 더 그려서 추가해 볼 예정!

 

 

캐릭터와 노트북 버튼만 만들어봤다.

각각의 버튼에 eventListener 로 click 시 이미지가 캔버스에 들어가게 된다. 

같은 버튼을 다시 클릭 시 이미지가 사라진다.

클릭한 버튼의 구분을 위해, 이미지가 들어간 버튼의 배경 컬러가 바뀌게 설정했다. 

 

 

 

 

 

이슈 1. 동일한 캐릭터 클릭 시 img 와 button 의 크기가 맞지 않아 target을 찾기 어려운 점

버튼을 클릭하고 싶은데, 자꾸 이미지가 앞에 있어 이미지가 target 이 됐다. 

어떻게 할지 고민하다가, 둘 중에 어떤게 클릭이 돼도 같은 className 이 들어온다면,

해당하는 이미지를 canvas 에 그려주면 되겠다고 생각했다. 

 

해결 방법 ) 버튼과 이미지에 같은 class 명을 입력함

 

<button id="chin_button" class="chin_button img_button">
        <img
          class="chin_button"
          src="../assets/character/chinchilla.PNG"
        />
</button>

 

  let buttonClass = event.target.className;
  if (isCharacterOnCanvas === false) {
    const image = new Image();
    if (buttonClass === 'chin_button') {
      image.src = '../assets/character/chinchilla.PNG';
    } else if (buttonClass === 'quokka_button') {
      image.src = '../assets/character/quokka.PNG';
    } else if (buttonClass === 'rabbit_button') {
      image.src = '../assets/character/rabbit.PNG';
    } else if (buttonClass === 'bear_button') {
      image.src = '../assets/character/bear.PNG';
    }
      context.drawImage(
        image,
        0,
        0,
        CANVAS_WIDTH,
        CANVAS_HEIGHT
      );
    isCharacterOnCanvas = true;

 

 

 

 

 

버튼은 잘 작동 됐지만, 버튼과 이미지 사이에 간격이 있었다. 

 

 

CSS 초기화를 하고 button 의 padding 을 없애줘도 아래 미세한 간격이 생겼다. 흠 왜 생긴거지..?

이미지만 클릭 됨

버튼이 클릭됨

 

 

이슈2. 버튼과 이미지 사이의 gap 없애기

 

해결 방법 1) 이미지 태그 대신, css 내에서 background-image 속성으로 이미지를 넣어주기

 

canvas 내에 이미지 로드는 잘 되지만,

button 내에 background 적용이 안됐다.

 

왜지..? 제대로 사용했는데...

 

.quokka_button {
  width: 100px;
  height: 100px;
  background-image: url('../assets/character/quokka.PNG');
}

 

 

뭐가 잘못됐나 이것 저것 시도해보다 알게 됐다.

로드 안된게 아니라 이미지가 너무 커서 보이지 않았던 것...

 

.quokka_button {
  width: 100px;
  height: 100px;
  background-image: url("../assets/character/quokka.PNG");
  /* background-position: center; */
  background-size: contain; //사이즈를 추가하니 이미지가 잘 보임.
}

 

background-size 를 추가해주니 이미지가 버튼 크기에 맞게 들어갔다!

 

 

 

하지만 이 방법은 적절하지 못했는데,,,,

 

클릭 시 style.background = ‘tomato’ 이렇게 주는 바람에

background 속성에 있던 이미지가 color로 대체된 것이다.

 

 

돌려줘 내 쿼카...!

 

 

 

 

그래서 이 방법은 쓰지 않기로 했다.

 

이전 방법으로 돌아가서 

버튼과 이미지 사이의 갭을 해결해보자!

 

허무하게도 

button 의 border 를 없애니 틈도 사라졌다.

스타일도 배경 색을 바꾸는 대신, 

border 디자인만 약간 바꿔주는 걸로 클릭된 버튼에 차별성을 줬다. 

 

 

 

 

오 귀여워

 

 

 

 

 

 

잘 되는 것 같지만 문제가 생겼다!

 

노트북만 없애려고 했는데 쿼카까지 사라짐!

 

 

 

 

이 문제는 해결 후 다음 편에 작성해봐야겠다.

 

그래도 구색을 갖추니 너무 귀엽다!

빨리 완성 시켜보고 싶다