[6] 캐릭터만 바꾸기 성공 + 아이템 변경 시 그림들 순서대로 배치하기 + 배경 컬러 유지하기

캐릭터를 바꾸면 모든 게 초기화 되고 

모든 요소를 다시 선택해야 했던 오류를 해결하기 위해 

몇 가지의 해결책을 생각해봤었다.

 

https://mayongee.tistory.com/626

[5] Canvas Api 는 한겹이야 - 이미지 교체 버튼 수정하기

 

 

2. 버튼을 클릭해서 canvas 가 변경될 때마다 배경 색과 별개로 이미지 url 을 변수로 가지고 있기 

이전 단계의 이미지를 가지고 있다가 (배경은 투명으로)
=> 배경이 변경 될 때 -> 배경 깔고 다시 로드
=> 다른 버튼 누를 때 -> 업데이트
이런 식으로 할 수 있지 않을까...?

가능한지 해보기로 했다.

 

💡 먼저 캐릭터 버튼을 누르면, 캐릭터를 로드하기 이전 캔버스 이미지를 저장해놓고, 캐릭터를 그 위에 로드해준다 

라는 식으로 코드를 짜려고 했는데, 하다가 아 바보네 깨달았다. 

 

그 전 이미지를 가지고 있어봤자, 어차피 그 위에 덧씌워지기 때문에

=> 캐릭터가 노트북 위로 와버리는 쓸모없는 이미지가 되어버리는 것이다...!

 

 

순서대로 그릴 수 있는 방법이 뭐가 있을까 하다가 

클래스 이름을 배열에 넣어주면 순서대로 저장할 수 있겠단 생각이 들었다.

 

const fixedItemArray = [];

const drawImage = (buttonClass) => {
  const image = new Image();
  image.src = findingImgSrc(buttonClass);
  context.drawImage(
    image,
    0,
    0,
    CANVAS_WIDTH,
    CANVAS_HEIGHT
  );
};

const fixedItemButtonClick = (event) => {
  let buttonClass = event.target.className;
  fixedItemArray.push(buttonClass);
  context.beginPath();
  drawImage(buttonClass);
};

const onCharacterBtnClick = (event) => {
  let buttonClass = event.target.className;
  //캐릭터가 캔버스에 없는 경우 -> 추후 기본 이미지가 세팅된 버전으로 변경
  if (!isCharacterOnCanvas) {
    drawImage(buttonClass);
    isCharacterOnCanvas = true;
  } else if (isCharacterOnCanvas) {
    // 캐릭터가 이미 캔버스에 있는 경우 - 초기화 후 그려주기
    context.beginPath();
    context.fillStyle = 'white';
    context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    console.log(fixedItemArray);
    drawImage(buttonClass);
    fixedItemArray.map((item) => drawImage(item));
    isCharacterOnCanvas = true;
  }
};

 

아이템들은 캔버스에 그려질 때 그 순서대로 배열에 넣어진다. 

그리고 캐릭터를 바꿀 때 그 순서대로 다시 그려진다.

 

 

짜잔~~ 깜박임 없이 잘 바뀌는 걸 확인할 수 있다!

 

아 근데 아직 배경 컬러가 초기화 되는 건 해결하지 못했다. 

흠 근데 어차피 그림을 그리는 건,, 배경과는 분리해도 되는 기능이라 생각된다. 

배경 + 캐릭터 & 아이템 배치 후, 그림을 그릴 수 있는 기능을 안내해줘도 될 것 같다. 

 

 

무튼 배열을 이용한 방법을 확장시키면 

노트북도 책상 뒤로 가는 걸 방지할 수 있지 않을까..? 생각도 들었다. 

 

지금은 책상과 노트북을 고정된 아이템 배열 안에 같이 넣고 있는데, 

- 배열 순서를 책상 먼저로 바꾼 후 그려주기

- 같은 카테고리의 아이템이 중복되면 기존의 아이템은 지워주기

이렇게 두가지 수정이 필요하다. 

 

const fixedItemButtonClick = (event) => {
  let buttonClass = event.target.className;
  //같은 카테고리는 삭제해준 후 넣어주기
  if (buttonClass.includes('desk')) {
    fixedItemArray = fixedItemArray.filter(
      (item) => !item.includes('desk')
    );
    fixedItemArray.push(buttonClass);
  }
  if (buttonClass.includes('laptop')) {
    fixedItemArray = fixedItemArray.filter(
      (item) => !item.includes('laptop')
    );
    fixedItemArray.push(buttonClass);
  }
  context.beginPath();
  console.log(fixedItemArray);
  fixedItemArray.sort().map((item) => drawImage(item));
};

 

그래서 코드를 이렇게 수정했고!

다른 아이템을 바꿀 때도 순서가 뒤죽박죽 되는 일이 사라졌다! 야호!

 

 

 

 

....?? 근데 문득 애초부터 캐릭터 하나, 책상 하나, 노트북 하나,, 이런 식으로 하나만 들어가있는 배열 만들어서 어느 버튼을 클릭하던 canvas 에 그려주면 되는거 아냐....???? 라는 생각이 스쳐갔다.... 

 

느아니...???? 

 

그럼 자. 정리해보자. 

지금 하려고 하는 건

1. 배경 컬러가 변경되는 문제 해결. 

2. 캐릭터, 책상, 노트북 이미지를 한 배열에 넣고 한번에 그려주기. 

이다.

2번은 리펙토링에 가까운 작업이기 때문에 우선 명백한 오류인 1번 먼저 해결해보기로!

2-1. input 으로 받아오는 컬러명 저장

let backgroundColor = 'whtie';


const onColorChange = (event) => {
  context.beginPath();
  const pickColor = event.target.value;
  context.strokeStyle = pickColor;
  context.fillStyle = pickColor;
  backgroundColor = pickColor;
};

컬러를 지정할 때 전역 변수인 backgroundColor 에 선택한 컬러를 넣어준다. 

backgroundColor 는 기본으로 white 로 설정되어 있다. 

 

const onCharacterBtnClick = (event) => {
	...
	// 캐릭터가 이미 캔버스에 있는 경우 - 초기화 후 그려주기
    context.beginPath();
    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    console.log(fixedItemArray);
    drawImage(buttonClass);
    fixedItemArray.map((item) => drawImage(item));
  }

그리고 그림을 다시 그려줄 때 깔아주는 배경에 background 컬러를 넣어줬다.

오! 그랬더니 이제 캐릭터를 변경해도 배경 컬러가 그대로 유지되는 걸 볼 수 있다!

대신 배경 컬러를 바꾸면 모든 아이템이 다 사라지는 문제가 남아있다.

아까처럼 배열에 저장된 아이템을 배경이 변경 된 후에 다시 뿌려주자.

const onCanvasClick = () => {
  if (isFilling) {
    context.beginPath();
    context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    fixedItemArray.map((item) => drawImage(item));
  }
};

채우기 모드일 때 canvas 를 클릭하면 

원래는 배경색만 변경됐지만, 이젠 기존 아이템들도 그려주는 코드를 추가했다. 

배경색 변경하니 자리 비움

어.. 선생님...? 어디 가셨어요...?

 

 

이걸 해결하려면 아까 떠올렸던 캐릭터, 노트북, 책상을 한 배열안에 넣는 방법을 사용해야한다.

필연적인 방법이였군!

id 가 중구난방,,

id 를 깔끔하게 정리해주기로 했다.

배열 내에서 카테고리별로 분류하기 위해서이다. 

배열 말고 이럴 때 obj 를 써야하는것 아닌가 라는 생각도 스쳐갔다. obj 로 만들면.. 좀 더 깔끔하고 가독성이 좋아질 것 같다. 

 

그래서 아이템을 저장하는 방식을 객체로 변경하면서,

동시에 초기 캔버스를 빈 캔버스가 아닌 기본 아이템이 있는 모습으로 세팅하기로 했다. 

const profileItems = {
  character: 'character_quokka_button',
  desk: 'desk3_button',
  laptop: 'laptop1_button',
};

 

그리고 어떤 버튼을 누르던 기존의 이미지들을 순서 지장없이 변경해주는 하나의 함수를 작성했다.

const drawOrderedItems = () => {
  Object.values(profileItems).map((item) =>
    drawImage(item)
  );
};

const changeProfileItems = (event) => {
  let buttonClass = event.target.className;
  if (buttonClass.includes('character')) {
    profileItems['character'] = buttonClass;
  }
  if (buttonClass.includes('desk')) {
    profileItems['desk'] = buttonClass;
  }
  if (buttonClass.includes('laptop')) {
    profileItems['laptop'] = buttonClass;
  }
  context.beginPath();
  context.fillStyle = backgroundColor || 'white';
  context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  drawOrderedItems();
};

배경컬러도 지정하지 않아 없다면 white 를 넣어주도록 작성했다. 

애초에 아이템 객체가 그려지는 순서대로 작성되어 있어서 sort 등을 활용해 재정렬 해줄 필요가 없어졌다. 

 

하지만 이미지 로드가 늦을 시, 캐릭터만 있거나 하는 현상이 계속 발견되어

window 이벤트를 추가했다.

window.onload = drawOrderedItems;

다른 대안으로 DOMCotentLoaded도 있었지만, 이미지 로드는 기다려주지 않는다해서 

window.onload 를 사용했다. 

 

그래서 이 앱의 처음 보여지는 기본 프로필 모양은 이렇다.

심-플!

 

이제 거의 완성된 것 같은데..!!!

하던 차에,,,, 펜 컬러를 변경했을 때도 배경 컬러가 같이 바뀌어버리는 오류를 발견했다.

 

약간 당황해서 살짝 멈칫함ㅋㅋㅋㅋㅋㅋ

흠 아무래도 이 문제는,, 

그리기 버튼과 채우기 버튼을 따로 분리하거나, 

아님 프로필을 1차 완성하고 꾸미기 모드에 들어가서 그리기를 허용해주는 식으로 해야겠다.

뭐 무튼 버튼을 따로 분리해야하는 건 같은 내용이지만. 

 

 

 

 

다음에 해결할 문제

1. 그리기모드와 채우기 모드 분리하기

2. 만약 이미지를 배경으로 넣는다면 ?

 

 

 

 

 

 

 

참고 문항

https://kihyeoksong.tistory.com/71

페이지 로드 후 스크립트 실행! window.onload, ready, DOMContentLoaded 뭘 써야할까?!

 

https://developer.mozilla.org/ko/docs/Web/API/Document/DOMContentLoaded_event

Window: DOMContentLoaded 이벤트 - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Window: load event - Web APIs | MDN