[2022 하계 모각코] 3회차 회고

목표

canvas api에 대한 지식을 얼추 얻었기 때문에

 

vertex와 edge에 대한 구조를 설계할 예정입니다.

 

회고

vanila.js 만으로는 설계의 한계가 있다고 판단했기 때문에 TypeScript를 활용하여 설계했습니다.

 

시간이 모자라 우선 Vertex만 구성한 후, 테스트 해봤습니다.

 

Vertex.ts

export class Vertex {
  name: string;
  x: number;
  y: number;
  radius: number;
  ctx: CanvasRenderingContext2D;
  targetVertex: Vertex[];

  constructor(ctx: CanvasRenderingContext2D, name: string) {
    this.name = name;
    this.x = this.y = 0;
    this.radius = 50;
    this.ctx = ctx;
    this.targetVertex = [];
  }

  draw() {
    this.ctx.strokeStyle = "black";
    this.ctx.lineWidth = 3;
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    this.ctx.stroke();
    this.ctx.font = "24px inferit";
    const textMeasure = this.ctx.measureText(this.name);
    const textWidth = textMeasure.width;
    this.ctx.fillText(
      this.name,
      this.x - textWidth / 2,
      this.y + textMeasure.fontBoundingBoxAscent / 2.5
    );
  }

  addTargetVertex(newVertex: Vertex) {
    this.targetVertex.push(newVertex);
  }

  // 그릴 공간에 다른 vertex가 있는지 검사 후 호출.
  move(newX: number, newY: number) {
    this.x = newX;
    this.y = newY;
    this.draw();
  }
}

App.ts

import { Vertex } from "./component/Vertex.js";

class App {
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  stageWidth: number;
  stageHeight: number;
  num: number;
  vertexList: Vertex[];

  constructor() {
    // canvas 요소 생성
    this.canvas = document.createElement("canvas");
    // canvas 요소로부터 2d context 얻기
    this.ctx = this.canvas.getContext("2d")!;

    this.num = 0;

    // html에 생성한 canvas를 넣기
    document.body.appendChild(this.canvas);

    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.vertexList = [];

    // 화면 사이즈 설정
    window.addEventListener("resize", this.resize.bind(this), false);
    this.resize();
  }

  resize() {
    // 레티나 디스플레이에서 선명하게 보이기 위해 canvas의 크기를 body의 두배씩으로 잡는다.
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * 2;
    this.canvas.height = this.stageHeight * 2;
    this.ctx.scale(2, 2);
  }
}

window.onload = () => {
  const app = new App();
};

이번주에는 입력 부분과 에지를 직접 그려보는 부분을 공부하고 적용해볼 생각입니다.