Fabric.js에서 더 복잡한 모양을 만들 수 있습니까?

Question

JavaScript/Fabric.js를 사용하여 간단한 그래픽 편집기를 만들고 있는데 기본 객체 (선, 삼각형, 원, 타원, 사각형, 사각형)보다 다소 복잡한 모양을 만들 수 있어야합니다.

녹색 선은 모양의 테두리와 검은 색 채우기입니다. 기본 도형에 사용할 수있는 것처럼 테두리 크기/색상 및 채우기 색상을 조작 할 수 있어야합니다. fabric.js에서도 가능합니까? 그렇다면, 내가해야할 방향으로 나를 가르쳐 주시겠습니까? 현재 어떻게 할 수 있을지 모르기 때문입니다.

Answer 1

시작해야합니다.

자바 스크립트 :

var canvas = new fabric.Canvas('c'); 
var defaultProperties = { 
    fill: 'black', 
    stroke: 'lime', 
    strokeWidth: 12 
}; 
var ellipse = new fabric.Ellipse({ 
    left: 30, 
    top: 30, 
    rx: 170, 
    ry: 110, 
    strokeWidth: 12 
}); 
var horizontalLine = new fabric.Line([30, 140, 370, 140]); 
var verticalLine = new fabric.Line([200, 30, 200, 140]); 
var group = new fabric.Group([ellipse, horizontalLine, verticalLine]); 
group.set(defaultProperties); 
canvas.add(group); 
var toggle = true; 
document.getElementsByTagName('button')[0].addEventListener('click', function() { 
    if (toggle) { 
    group.set({ 
     fill: 'red', 
     stroke: 'pink', 
     strokeWidth: 5 
    }); 
    } else { 
    group.set(defaultProperties); 
    } 
    toggle = !toggle; 
    canvas.renderAll(); 
}); 

그리고 중요한 JSFiddle : https://jsfiddle.net/rekrah/mj5c2bx0/.

추가 질문이 있으면 알려주세요.