Fabric.js는 Canvas 프로그램 작성을 단순화하는 라이브러리입니다. Fabric.js는 누락된 개체 모델, svg 파서, 상호 작용 및 기타 필수 도구 전체를 Canvas에 제공합니다. Fabric.js는 외국 프레임워크이기 때문에 공식 API가 지저분하고 많으며 관련 문서가 대부분 영어로 되어 있어 그 수가 적습니다. 따라서 이 기사에서는 초보자가 Fabric.js를 빠르게 시작할 수 있도록 돕는 것을 목표로 합니다. 프로젝트를 진행하고 캔버스를 그리는 과정을 즐겨보세요.
Fabric.js를 사용하는 이유는 무엇입니까?Canvas는 좋은 캔버스 기능을 제공하지만 API는 충분히 친숙하지 않습니다. 간단한 그래픽을 그리는 것은 실제로 괜찮지만, 복잡한 그래픽을 그리고 복잡한 효과를 작성하는 것은 그리 편리하지 않습니다. Fabric.js는 주로 객체를 사용하여 코드를 작성합니다.
Fabric.js가 할 수 있는 일
Vue 프로젝트에 Fabric.js 도입
프로젝트에서 ES6 및 Webpack을 사용한다고 가정하면 다음과 같이 Fabric.js를 사용할 수 있습니다.
1. 명령줄에서:
npm 설치 패브릭(또는 원사 추가 패브릭)
2. .vue 파일에 추가하세요.
'패브릭'에서 {패브릭 } 가져오기 3. mounted: .vue 에 있는 단일 파일의 수명 주기에서 Fabric.js 여정을 시작하세요.
참고: 기본 fabric npm 모듈은 매우 큰 패키지를 생성합니다. Fabric.js에 필요하지 않은 패키지가 많은 경우 여기 또는 명령줄에서 고유한 버전을 빌드할 수 있습니다.
그래픽 그리기 일반 그래픽 그리기1. 캔버스 선언
var canvas =new fabric.Canvas('main');2. 그래픽 그리기
var ect = new fabric.Rect({ left:100,//캔버스 왼쪽으로부터의 거리(픽셀 단위) top:100,//캔버스 채우기 상단으로부터의 거리:'red',//채우기 색상 너비 :30 ,//사각형의 너비 height:30//사각형의 높이});3. 캔버스에 그래픽 추가
canvas.add(직사각형);
기타 규칙 그래픽:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.Triangle 삼각형경로 그리기 사용: 점과 선의 움직임을 사용하여 그립니다. 선, 곡선, 호를 적용하여 매우 복잡한 모양을 그립니다.
fabric.Path() 메서드에서 M은 이동 명령을 나타내며, 이 M 00은 브러시를 (0,0) 점 좌표로 이동하는 것을 나타냅니다.
L은 선을 나타내고, L 200 100은 펜을 사용하여 (0,0) 좌표에서 (200,100) 좌표까지 선을 그리는 것을 의미합니다. z는 모양의 경로를 닫는 것을 의미합니다.
삼각형을 그린 후 set() 메서드를 사용하여 삼각형의 위치, 색상, 각도, 투명도 및 기타 속성을 설정할 수 있습니다.
구체적인 코드는 다음과 같습니다.
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ 왼쪽: 120, 위쪽: 120,fill:'red' });canvas.add(경로); 사진 작업HTML 삽입 그림
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//캔버스 선언 var imgElement = document.getElementById('img');//이미지 선언 var imgInstance = new fabric.Image(imgElement,{ //이미지 위치 및 모양 설정 왼쪽:100, 위쪽:100, 너비:200, 높이:100, 각도:30//그래픽의 시계 방향 회전 각도 설정}); (imgInstance) ;//캔버스에 추가자바스크립트 삽입 이미지
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//이미지가 캔버스의 10배로 축소됩니다. 추가(oImg }); 상호 작용 캔버스와의 상호 작용 canvas.add(imgInstance);//캔버스에 추가 var canvas = new fabric.Canvas('canvas') canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })참고: 일반적으로 사용되는 모니터링 이벤트는 다음과 같습니다.
mouse:down : 마우스를 눌렀을 때mouse:move : 마우스가 움직일 때mouse:up : 마우스를 올렸을 때캔버스의 개체에 대한 작업
var canvas = new fabric.Canvas('canvas'); var ect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); //리스닝 이벤트 선택 console.log('선택한 직사각형') }); var Circle = new fabric.Circle({ radius: 75, fill: 'blue' }); Circle.on('선택됨', function() { console.log('원을 선택함'); });참고: 일반적으로 사용되는 모니터링 이벤트는 다음과 같습니다.
after:render : 캔버스가 다시 그려진 후object:selected : 개체가 선택되었습니다.object:moving : 객체 이동object:rotating : 개체가 회전됩니다.object:added : 개체가 추가되었습니다.object:removed : 개체가 제거됩니다.new fabric.Group(): 두 개의 매개변수, 즉 결합할 객체의 이름으로 구성된 배열과 결합된 객체의 공통 속성을 허용합니다.
var canvas = new fabric.Canvas('canvas'); var Circle = new fabric.Circle({//원 그리기: 100, 채우기: '#f00', scaleY: 0.5, OriginX: 'center',// 중심점 원점의 X축 좌표를 조정합니다.Y: 'center'//중심점의 Y축 좌표를 조정합니다}); var text = new fabric.Text('Hello World', {//Draw textfontSize: 30, OriginX: 'center', OriginY: 'center' }) //결합 var group = new fabric.Group([circle, text], { left: 150, top: 100, angle: 10 }) canvas.add ( 그룹); 직렬화 및 역직렬화직렬화
var canvas = new fabric.Canvas('canvas'); var ect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); .stringify(canvas.toJSON()));역직렬화
var canvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objects:[{type:ret,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); var ect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); ;참조 문서: http://fabricjs.com/articles/
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.