>  기사  >  웹 프론트엔드  >  FabricJS를 사용하여 텍스트로 캔버스를 만드는 방법은 무엇입니까?

FabricJS를 사용하여 텍스트로 캔버스를 만드는 방법은 무엇입니까?

王林
王林앞으로
2023-08-24 16:49:051532검색

如何使用 FabricJS 创建带有文本的画布?

이 튜토리얼에서는 FabricJS를 사용하여 Text 개체로 캔버스를 만드는 방법을 알아봅니다. Fabric.Text 인스턴스를 추가하여 캔버스에 텍스트를 표시할 수 있습니다. 텍스트의 크기를 이동, 크기 조정 및 변경할 수 있을 뿐만 아니라 각각 textAlign, underline 및 lineHeight 속성을 통해 사용할 수 있는 텍스트 정렬, 텍스트 장식, 줄 높이와 같은 추가 기능도 제공합니다. 텍스트와 텍스트 상자의 한 가지 차이점은 텍스트 상자는 대화형으로 편집할 수 있지만 텍스트는 편집할 수 없다는 것입니다.

문법

으아악

매개변수

  • text - 이 매개변수는 텍스트로 표시하려는 텍스트 문자열인 String을 허용합니다.

  • Options(선택 사항) - 이 매개 변수는 텍스트 개체에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하여 색상, 커서, 획 너비 및 텍스트 개체와 관련된 기타 여러 속성을 변경합니다.

예 1

Fabric.Text() 인스턴스를 생성하고 캔버스에 추가

캔버스에 텍스트 개체를 추가하는 방법을 알아보기 위해 코드 예제를 살펴보겠습니다. 유일한 필수 매개변수는 실제 텍스트 문자열이고, 두 번째 매개변수는 텍스트 개체에 다양한 속성을 할당할 수 있는 선택적 옵션 개체입니다.

으아악

예 2

텍스트 객체를 조작하려면 set 메소드를 사용하세요

이 예에서는 값의 설정자인 set 메서드를 사용하여 텍스트 개체에 속성을 할당합니다. 획, 획 너비, 각도, 배율, 회전 등과 관련된 모든 속성은 이 메서드를 사용하여 변경할 수 있습니다.

new fabric.Text( text: String , options: Object)

위 내용은 FabricJS를 사용하여 텍스트로 캔버스를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제