fabric.js : 고급

이 기사는 Advanced Fabric.js 기능을 탐구합니다. 그룹, 직렬화 (및 사막화) 및 사용자 정의 클래스 생성. 주요 개념 :

패브릭 그룹 : 여러 객체를 단일 장치로 효율적으로 관리하여 조작을 단순화 (이동, 스케일링, 회전). 캔버스 직렬화 (JSON) :

이미지 형식보다 더 대역폭 친화적 인 메소드 인 JSON을 사용하여 캔버스 상태를 저장 및로드하십시오. 커스텀 클래스 생성 : 는 맞춤형 객체 동작 및 속성으로 fabric.js를 확장하고 효율적으로 직렬화되고 사막화됩니다. SVG 상호 운용성 : 캔버스 요소를 SVG로 내보내고 SVG 컨텐츠를 캔버스로 가져와 형식 유연성을 위해. 사막화 방법 :

및
• 를 사용하여 캔버스 상태 복원을 위해 사용하십시오. 고급 객체 제어 : 서브 클래싱을 통해 기본 모양을 넘어 복잡한 대화식 요소와 고도로 사용자 정의 된 객체를 만듭니다.
그룹 :
• fabric.js의 그룹은 객체를 단일 엔티티로 결합 할 수 있습니다. (그림 1 참조). 모든 캔버스 개체를 그룹화하여 통합 조작을 가능하게합니다. 그룹 특성 (색, 투명성, 국경)의 스케일링, 회전 및 수정이 모두 가능합니다. 직물은 여러 객체를 선택할 때 암시 적으로 그룹을 생성합니다 그림 1
프로그래밍 그룹 생성 :
• (결과는 그림 2 참조). 그룹 내의 개별 객체는 메소드를 사용하여 액세스하고 수정됩니다.
그림 2
• 그룹 개체 수정 : (그림 3 참조). 코디네이트가 지정되지 않는 한 그룹 내의 객체는 그룹의 센터와 관련하여 위치됩니다.
• 그림 3 수평으로 정렬 된 그룹 생성 : (그림 4 참조). 이미지가 포함 된 그룹의 경우 그룹화 전에 이미지가 완전히로드되도록하십시오. loadFromJSON loadFromSVG
그림 4
• 그룹 방법에는 , ,
, , , 및 가 포함됩니다. 그룹 차원을 업데이트하는 동안 객체를 추가합니다. 기존 캔버스 객체를 복제하기 전에 기존 캔버스 개체를 복제해야합니다.

직렬화 : fabric.js는 직렬화에

및 toObject를 사용합니다. 는 암시 적으로 toJSON 예 : 빈 캔버스를 직렬화 : toJSON 객체 추가 json 표현이 업데이트됩니다. 는 비 스트링 객체 표현을 반환합니다. 객체 직렬화 사용자 정리는 toObject 메소드를 재정의하거나 확장하여 달성됩니다. 예 : 확장

:

SVG 직렬화는

메소드를 사용하여 개별 오브젝트의 var text = new fabric.Text('hello world', { fontSize: 30 }); var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 }); var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 }); canvas.add(group); 메소드를 위임합니다. 이를 통해 SVG 호환 렌더러로 내보낼 수 있습니다 사막화 :

toObject 및 toObject JSON의 캔버스 상태를로드하십시오. SVG 데이터에서 로드. 외부 SVG 파일을 참조하여 대형 경로 데이터를 효율적으로 처리합니다.

서브 클래스 : fabric.js는 서브 클래싱에 toObject를 사용합니다. 속성은 생성자 역할을합니다. 는 부모 클래스 방법을 호출합니다 예 : 사용자 정의 클래스 만들기 :

(

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

의 예는 그림 8 및 9 참조). 사용자 정의 속성은

및 toSVG 자주 묻는 질문 (FAQ) : toSVG (제공된 FAQ는 이미 잘 구조화되고 포괄적이므로 여기서 변경이 필요하지 않습니다.)

이미지는 요청 된대로 포함되어 텍스트 내에서 원래 형식과 위치를 유지합니다.

위 내용은 fabric.js : 고급의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!