이 시점에서 크기에는 거의 차이가 없습니다 – 두 가지 예는 매우 유사합니다. 그러나 캔버스 작업에 대한 접근 방식이 얼마나 다른지 이미 알 수 있습니다. 네이티브 메서드를 사용하면 전체 캔버스 비트맵을 나타내는 개체인 컨텍스트에서 작동합니다. 패브릭에서는 객체를 인스턴스화하고 속성을 변경하고 캔버스에 추가합니다. 이러한 개체는 패브릭 토지에서 일류 시민임을 알 수 있습니다. 패브릭의 놀라운 점 중 하나는 얼마나 사용자 정의 할 수 있는지입니다. 캔버스 또는 캔버스 개체에서 수십 개의 다양한 매개 변수를 조정하여 원하는 방식으로 정확하게 행동할 수 있습니다. 그 중 일부를 살펴 보겠습니다. 기회는, 당신은 직접 같은 „짐승”으로 작업하지 않습니다. 대신 fabric.loadSVGFromString 또는 fabric.loadSVGFromURL 메서드와 같은 것을 사용하여 전체 SVG 파일을 로드하고 패브릭의 SVG 파서가 모든 SVG 요소를 이동하여 해당 경로 개체를 만드는 작업을 수행하도록 할 수 있습니다. 그러나 캔버스 상태를 추적하는 또 다른 예를 살펴 보겠습니다. 이전 예제에서는 설정 메서드에서 방금 사용한 것과 동일한 구성 해시로 개체가 만들어졌습니다.
그것은 정확히 동일하기 때문입니다. 생성 시 개체를 „구성”하거나 다음 설정 메서드를 사용할 수 있습니다: Fabric.js는 HTML5 캔버스 요소로 쉽게 작업할 수 있는 프레임워크입니다. 캔버스 요소 위에 있는 대화형 개체 모델입니다. 또한 SVG-캔버스 파서입니다. 먼저 부모 „클래스”를 패브릭으로 지정합니다. 직사각형, 렌더링 능력을 활용합니다. 다음으로 „type” 속성을 „레이블이 지정된 Rect”로 설정합니다. 모든 Fabric 개체에는 형식 속성(직사각형, 원, 패스, 텍스트 등)이 있기 때문에 일관성을 위한 것입니다. 그런 다음 callSuper를 다시 한 번 활용하는 이미 익숙한 생성자 (초기화)가 있습니다. 또한 옵션을 통해 전달된 값으로 개체의 레이블을 설정합니다.
마지막으로, 우리는 2 개의 메서드 -toObject 및 _render남아 있습니다. toObject는 이미 직렬화 장에서 알고 있듯이 인스턴스의 개체(및 JSON) 표현을 담당합니다. LabeledRect는 일반 정사각형과 동일한 속성을 가지므로 레이블을 사용하므로 부모의 toObject 메서드를 확장하고 레이블을 추가하기만 하면 됩니다. 마지막으로 _rendermethod는 인스턴스의 실제 드로잉을 담당합니다. 또 다른 callSuper 호출이 있는데, 이 호출은 사각형을 렌더링하는 것이고 텍스트 렌더링 논리의 추가 3 줄이 있습니다. 버전 1.0 이후 Fabric에서 사용할 수 있는 다른 변환 관련 속성이 많이 있습니다. 그 중 하나는 캔버스 인스턴스에서 „uniScaleTransform”입니다. 기본적으로 false이며 개체의 균일하지 않은 배율을 활성화하는 데 사용할 수 있습니다. 즉, 모서리로 드래그할 때 오브젝트의 비율을 변경할 수 있습니다. 패브릭은 캔버스 렌더링 및 상태 관리를 담당합니다.
개체 자체만 수정하면 됩니다. 패브릭에서 해야 할 일은 오브젝트의 „각도” 값을 45로 변경하는 것입니다.