fabric JS (text)

Text vs Textbox vs IText

fabric js를 이용해 캔버스에 텍스트를 작성할 수 있는데, 3가지가 있다.

1. fabric.Text

   const addText = (weight: number, size: number, text: string) => {
       let canvasText = new fabric.Text(text, {
         fontWeight: weight,
         fontSize: size,
       });
       return canvasState.add(canvasText);
     };

   캔버스에 텍스트가 그려지고 글씨체, 사이즈 조절, 색상변경등은 가능하지만 텍스트 내용 수정이 불가능하다.

2. fabric.Textbox

   const addText = (weight: number, size: number, text: string) => {
       let canvasText = new fabric.Textbox(text, {
         fontWeight: weight,
         fontSize: size,
       });
       return canvasState.add(canvasText);
     };

   캔버스에 텍스트가 그려지고 글씨체, 사이즈조절, 색상변경및 텍스트 내용 수정이 가능하다.

   Textbox에서도 “hasControls: false” 속성을 주면 Text처럼 동작한다.