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

 

☝️문제점 : 캐릭터 버튼 클릭 시 모든 요소 초기화

---

 

이전에 만든 버튼이 작동하는 모습을 보면 가장 큰 문제점이 있었는데, 

바로 캔버스 내에 이미지가 있는 경우 취소 버튼 (없애기 버튼)을 누르면

해당 요소 뿐만 아니라 모든 요소가 지워지는 점이었다. 

 

가령 캐릭터를 클릭 & 노트북 클릭 해서 

노트북이 있는 이미지를 만든 후, 책상을 변경하고 싶어 책상 버튼을 누르면

흰색으로 모든 요소가 사라지게 된다.

즉, 처음부터 새로 프로필을 만들어야 한다.

 

 

 

 

 

🍀원인 : canvas api 는 한겹!

---

I think maybe you misunderstand what a Canvas is.A canvas is essentially a 2 dimensional grid of pixels along an 'X' axis and a 'Y' axis. You use the API to draw pixels onto that canvas, so when you draw an image you're basically drawing the pixels that make up that image onto your canvas. The reason there is NO method that lets you just remove an image, is because the Canvas doesn't know there's an image there in the first place, it just see pixels.

https://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5

Removing an image from a canvas in HTML5

 

처음엔 요소를 추가할 때 마다 그 요소들이 레이어로 있는 줄 알았다.

그래서 뒤로 가기나, 방금 넣은 이미지만 뺄 수 있는 기능 등

지우는 방법이 흰색으로 채우는 것 말고 다른 방법이 없을까 찾아보다가

내가 canvas api 에 대해 잘못 알고 있었다는 걸 찾았다.

 

그러니까 포토샵처럼 레이어로 작용하는 게 아니라, 

정말 캔버스처럼 하나의 면 위에 계속 덧대서 그리는 방식이라는 것이다. 

그림을 넣었든, 배경을 넣었든 이후에 같은 지점에 뭔가 다른 요소를 그려넣으면 

픽셀이 대체되어 하나의 캔버스로 작용하는 것..!

 

 

그럼 애초에 내가 이미지 하나만 빼고 이전으로 돌리고 싶은 방식이 전혀 먹히지 않는 상황.

그래서 다른 해결책을 찾아야 했다.

 

 

💡해결 방법 : 카테고리별로 동작하게 만들기

---

 

 

캐릭터의 경우, 귀 모양이 달라 겹치면 곤란하다.

이렇게 되어버림

// 같은 카테고리 내에 있는 것들만 서로 대치 되도록, 카테고리가 다르면 대치 되지 않도록
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);
    drawImage(buttonClass);
    isCharacterOnCanvas = true;
  }
};

그래서 캐릭터를 바꿀 시, 캐릭터가 있는 경우 흰색 배경을 깐 후 이미지를 그리도록 코드를 작성했다.

 

 

동물을 제외한 카테고리는 색만 다른 동일한 이미지이기 때문에 덮어씌운다.

const onDeskBtnclick = (event) => {
  let buttonClass = event.target.className;
  console.log(buttonClass);
  context.beginPath();
  drawImage(buttonClass);
  isDeskOnCanvas = true;
};

const onLaptopBtnClick = (event) => {
  let buttonClass = event.target.className;
  context.beginPath();
  drawImage(buttonClass);
  isLaptopOnCanvas = true;
};

 

(지금 보니 로직이 완전 똑같아서 정리해야겠다.

캔버스 위에 해당 카테고리 그림이 있냐없냐를 나타내는 변수는 제거해야겠다.

동물 카테고리 외에 캔버스 위에 이미지 여부가 필요없으니!) 

 

 

 

이렇게 로직을 바꾼 후 아래처럼 작동한다.

 

나름 원하는 느낌이 됐다.

 

 

저장된 이미지

 

 

 

 

 

하지만 

1. 배경 컬러를 바꿀 시 처음부터 해야하는 점

2. desk 와 laptop 순서가 바뀌면 desk 가 laptop 이미지 위로 올라오는 점

이렇게 부자연스러운 점이 있다. 

 

 

 

 

지금 생각했을 때 부자연스러운 UX를 해결하는 방법은 아래와 같다.

 

1. page를 만들어 단계별로 고르게 만든다. (웹앱 형식)

배경 컬러를 선택하세요 -> 캐릭터를 선택하세요 -> 책상을 선택하세요 -> 노트북을 선택하세요 하는 식으로 

마지막 단계에서 자랑하기 & 저장하기 버튼 보여주기

 

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

음 해봐야 알겠지만, 

이전 단계의 이미지를 가지고 있다가 (배경은 투명으로)

=> 배경이 변경 될 때 -> 배경 깔고 다시 로드

=> 다른 버튼 누를 때 -> 업데이트

이런 식으로 할 수 있지 않을까...?

 

3. fabric.js 를 시도해보기

아까 캔버스에 대한 내용을 참고했던 스택오버플로에서 fabric.js 를 써보라는 말이 있었다.

어떤 기능들을 활용할 수 있을지 살펴볼 예정이다.

 

 

우선은 2번 방식을 먼저 해본 후, 3번을 살펴보고, 1번도 고려해볼 생각이다.

근데 어차피 나중에 이미지 자랑하기 (공유하기) 페이지를 만들려면

현 페이지 외에 다른 URL 도 필요한 점을 고려해서 잘 생각해보쟈.