[Web Programming] Vue.js 사용하여 그림판 기능 구현

안녕하세요, 오늘은 Vue.js 프레임 워크를 사용해서 간단판 그림판 기능을 구현하는 방법에 대해서 알아보겠습니다.

 

간단한 그림판 기능을 구현하기 위한 항목들은 다음과 같습니다.

 

1. Canvas 그리기
2. 모두 지우기
3. Pen 두께 증가
4. Pen 두께 감소

Vue.js 프레임워크를 활용하기 위해 프로젝트를 생성해줍니다.

 

생성된 프로젝트 내 src/App.vue 파일을 다음과 같이 수정해줍니다.

 

<template>
  <div id="app">
    <canvas
      ref="canvas"
      width="800"
      height="800"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseout="stopDrawing"
    ></canvas>

    <div id="designtool">
      <button @click="buttonErase">모두 지우기</button>
      <button @click="increaseThickness">두껍게</button>
      <button @click="decreaseThickness">얇게</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      drawing: false,
      context: null,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      this.context.strokeStyle = "#000";
      this.context.lineWidth = 5; 
    },
    startDrawing(e) {
      this.drawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (!this.drawing) return;
      this.context.beginPath();
      this.context.moveTo(this.lastX, this.lastY);
      this.context.lineTo(e.offsetX, e.offsetY);
      this.context.stroke();
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    stopDrawing() {
      this.drawing = false;
    },

    buttonErase() {
      this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },

    increaseThickness() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      this.context.lineWidth += 1; 
    },

    decreaseThickness() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      if (this.context.lineWidth > 1) {
        this.context.lineWidth -= 1; // 
      }
    },

  },
};
</script>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

canvas {
  border: 2px solid white;
  background-color: green;
  cursor: pointer;
}

button {
  width: 200px;
  height: 50px;
}

</style>

 

위의 코드의 결과로 실행한 초기 화면 결과는 다음과 같습니다.

 

실행 결과 이미지

 

---

 

위에서 모두 지우기, 두껍게, 얇게 버튼에 대한 기능 동작에 대한 script 코드에 대해서 자세히 설명드리겠습니다.

 

3가지 버튼에 대한 설명에 앞서, Canvas 위에 Pen으로 그리는 기능에 대한 설명입니다.

 

    initCanvas() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      this.context.strokeStyle = "#000"; // 
      this.context.lineWidth = 5; // 
    },
    startDrawing(e) {
      this.drawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (!this.drawing) return;
      this.context.beginPath();
      this.context.moveTo(this.lastX, this.lastY);
      this.context.lineTo(e.offsetX, e.offsetY);
      this.context.stroke();
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    stopDrawing() {
      this.drawing = false;
    },

 

위의 코드에서 initCanvas() 함수에 대해 최초에 mount를 적용하고, startDrawing, draw, stopDrawing 함수에 걸쳐서 Pen을 사용해서 Canvas에서 그릴 수 있습니다.

 

---

 

이어서, 모두 지우기 버튼에 대한 함수 설명은 다음과 같습니다.

 

    buttonErase() {
      this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },

 

모두 지우기 버튼을 누르게 되면 위의 함수가 실행되면서 canvas 내부의 모든 그림이 지워지게 됩니다.

 

---

 

이어서, "두껍게" & "얇게" 버튼에 대한 함수 설명은 다음과 같습니다.

 

    increaseThickness() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      this.context.strokeStyle = "#000";
      this.context.lineWidth += 1; 
    },

    decreaseThickness() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      this.context.strokeStyle = "#000";
      if (this.context.lineWidth > 1) {
        this.context.lineWidth -= 1;
      }
    },

 

"두껍게", "얇게" 버튼을 누르게 되면서 각각 increaseThickness, decreaseThickness 함수가 실행되면서 lineWidth를 1씩 증가 또는 감소시키게 됩니다. 

 

위의 기능들을 활용해서 그린 결과는 다음과 같습니다.

 

---

 

순서대로, 초기 & 두껍게 & 얇게 그린 결과

 

이상으로, Vue.js 프레임워크를 활용해서 간단한 그림판 기능을 구현해보았습니다.

감사드립니다.