집 > 기사 > 웹 프론트엔드 > fabricjs 란 무엇입니까? Fabricjs 프런트엔드 도면 라이브러리 사용 배열(코드 포함)

fabricjs 란 무엇입니까? Fabricjs 프런트엔드 도면 라이브러리 사용 배열(코드 포함)

不言원래의: 2018-08-17 11:44:463646검색

이 기사에서는 fabricjs가 무엇인지 소개합니다. fabricjs 프론트엔드 드로잉 라이브러리(코드 포함)의 사용법은 특정 참조 값을 가지고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

저는 한동안 사용해 왔습니다. 일반적으로 매우 강력한 벡터 그리기 도구입니다. 공식 문서도 상당히 풍부하지만 문서 구성이 그다지 좋지 않고 일부 API 디자인이 일관성이 없으며 여전히 필요합니다. 정리할 것.

Canvas

캔버스는

canvasElement = document.getElementById(canvasEle);
ctx = canvasElement.getContext("2d");

새 캔버스 개체를 생성할 때 너비와 높이를 지정할 수 있습니다.

canvas = new fabric.Canvas(canvasElement, { 
            selection: false,
            width: 800,
            height:600
});

여기에 지정된 너비와 높이는 CSS에 설정된 너비와 높이보다 우선 적용됩니다. 참고로 이러한 객체 생성 형태는 Fabric.js에서도 기본적으로 유사합니다. 클래스 이름은 생성할 객체의 유형을 나타냅니다. 첫 번째 매개변수는 필수 데이터이고 두 번째 매개변수는 다양한 옵션입니다.

객체 추가 및 삭제, 객체 매개변수 수정을 포함하여 캔버스에 대한 모든 수정은 표시할 렌더링 방법을 호출해야 합니다.

canvas.renderAll();

기본 모양

선, 원, 원, 직사각형 기하학적 도형은 모두 기본 모양.

모든 기본 모양에는 해당 클래스가 있으므로 위치, 색상, 크기 및 기타 스타일을 클래스 인스턴스의 속성과 메서드를 통해 제어할 수 있습니다. 모든 클래스는 Object 클래스에서 상속되며 일부 공용 속성과 메서드를 갖습니다.

만들기

다음은 선을 그리는 예입니다(두 개의 꼭지점 좌표가 주어짐).

        var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //线宽
            stroke: rgba(255,0,0,0.8), //线的颜色
            selectable: false
        });
        canvas.add(line);

원을 그리는 예(꼭지점과 반지름은 옵션에 있음). 여기서 왼쪽과 위쪽은 실제로 ( x, y ), CSS의 이름을 빌려야 합니다.

        var circle =  new fabric.Circle({
            radius: 2,
            left: left,
            top: top,
            originX: 'center',
            originY: 'center',
            fill: rgba(0,200,0,0.8), 
            strokeWidth: 1,
            stroke: rgba(255,0,0,0.8),
            selectable: false
        };
        canvas.add(circle);

여기서 보면 첫 번째 매개변수는 이 클래스에만 해당되며(직선을 그릴 때 전달되는 시작점과 끝점 좌표 등), 두 번째 매개변수는 일반 옵션입니다. 특별한 매개변수가 없으면 첫 번째 매개변수는 바로 일반 옵션입니다. 생성된 모든 도형은 캔버스의 add 메소드를 통해 장면에 추가된 경우에만 표시될 수 있습니다.

Control

left 및 top은 그래프의 어느 지점이 좌표를 참조하는지에 대한 속성으로, OriginX 및 OriginY 매개변수에 의해 결정됩니다. 이는 텍스트 편집 소프트웨어의 정렬과 동일합니다. . , OriginX에는 왼쪽, 가운데, 오른쪽의 세 가지 선택적 값이 있으며, OriginY에는 위쪽, 가운데, 아래쪽의 세 가지 선택적 값이 있습니다.

그들의 회로도는 다음과 같습니다:
fabricjs 란 무엇입니까? Fabricjs 프런트엔드 도면 라이브러리 사용 배열(코드 포함)
http://fabricjs.com/test/misc...

각 개체의 기본 원점이 중앙에 오도록 하려면 다음과 같이 설정할 수 있습니다.

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

너비와 높이도 사용할 수 있습니다. 이름에서 알 수 있듯이 직접 액세스 속성은 길이와 너비를 나타냅니다(모든 도형에는 경계 직사각형이 있으므로 길이와 너비를 사용하여 크기를 제어할 수 있습니다).

직접 액세스할 수 있는 위 속성을 제외하고 대부분의 속성은 다음과 같이 get/set 메서드를 사용하여 읽고 써야 합니다.

line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);

인터넷의 일부 기사에서는 line.Stroke=color 또는 line이라고 씁니다. setProperty('스트로크' ,color) 는 유효하지 않으며 이전 버전의 표현일 수 있습니다.

Image

Image는 다른 모양과 유사하며 Object의 하위 클래스입니다. 가장 큰 차이점은 이미지 파일 로드가 비동기식이므로 Image에 대한 후속 작업은 콜백에서 완료되어야 한다는 것입니다.

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
    canvas.add(img);
}

fabricjs 란 무엇입니까? Fabricjs 프런트엔드 도면 라이브러리 사용 배열(코드 포함)

관련 기사