저작도구

4. 개발 - 편집기 주 화면 구현, 배경, 노드(이미지, 텍스트) 추가, 편집 기능

1) 화면 // 2) 배경 {nodes & nodes.map(node => } // 3) 노드 Konva의 Stage와 Layer를 활용해서 편집기 화면을 구성했다. 회고 2.의 레이아웃의 주 화면이다. 2) 배경 배경은 주 화면과 똑같은 크기의 Img 오브젝트를 배치해서 해당 오브젝트의 색을 변경하거나, 이미지를 삽입해 배경으로 쓸 수 있게 했다. Konva는 오브젝트들을 순서대로 그린다. 즉, 가 맨 앞에 위치해 있기 때문에 다른 노드들보다 뒤에 있어서 배경처럼 딱 보이게 된다. 회고 3.의 background 속성을 배경에 {...background}로 뿌려줘서 속성들을 반영하게 했다. 3) 노드 노드들은 속성을 에 뿌려준다. 이 노드는 Konva에서 제공해주는 것이 아니고 내가 만들었다. node..