FabricJS를 사용하여 이미지와 색상이 포함된 패턴을 다각형에 추가

fabric.Polygon의 인스턴스를 생성하여 다각형 객체를 생성할 수 있습니다. 다각형 객체는 일련의 연결된 직선 세그먼트로 구성된 닫힌 모양으로 설명할 수 있습니다. FabricJS의 기본 요소 중 하나이므로 각도, 불투명도 등과 같은 속성을 적용하여 쉽게 사용자 정의할 수도 있습니다. 다각형에 패턴과 색상을 추가하려면 FabricJS의 Pattern 클래스를 사용할 수 있습니다.

문법

new fabric.Pattern( options: Object, callback: function )

매개변수

• options(선택 사항) − 이 매개 변수는 개체에 대한 추가 사용자 정의를 제공하는 Object입니다. 이 매개 변수 offsetX를 사용하면 패턴과 관련된 교차 출처 및 기타 많은 속성을 변경할 수 있습니다.

• callback − 이 매개변수는 콜백 초기화 후 호출되는 함수입니다. 이 매개변수는 선택사항입니다.

예 1: fabric.Pattern()의 인스턴스를 생성하고 이를 다각형 개체에 추가합니다

코드 예제를 통해 fabric.Pattern 인스턴스를 생성하고 캔버스에 추가하는 방법을 살펴보겠습니다. 여기서는 모양이 직사각형(불규칙한 다각형)인 다각형 객체를 만듭니다. 직사각형에 패턴을 추가하는 createPattern 함수를 초기화합니다. 마지막으로 createPattern 함수를 호출하고 원하는 URL을 전달합니다.

으아악

예 2: 다각형에 이미지와 색상 패턴 추가

다각형 개체에 대한 이미지와 색상을 사용하여 동적 패턴을 만드는 방법을 알아보기 위해 코드 예제를 살펴보겠습니다. 이 경우 fromURL 메서드를 사용하여 이미지를 로드하고 FabricJS의 주요 렌더링 표면 중 하나이자 동적 패턴을 만드는 데 중요한 fabric.StaticCanvas() 개체를 초기화했습니다.

우리는 setBackgroundColor 메소드를 사용하여 다각형의 배경색을 설정했습니다. 마지막으로 캔버스에 다각형 개체를 추가합니다.

으아악

결론

이 튜토리얼에서는 두 가지 간단한 예를 사용하여 FabricJS를 사용하여 다각형에 이미지와 색상을 추가하는 방법을 보여줍니다.

위 내용은 FabricJS를 사용하여 이미지와 색상이 포함된 패턴을 다각형에 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!