본문 바로가기
개발 언어/Python

Fabric.js 튜토리얼 2부

by 주호파파 2025. 5. 31.
728x90
반응형

진저브레드 피규어 그리기

이 진저브레드 그림을 그려 새로운 모양, 폴리라인, 둥근 모서리 및 회전과 같은 스타일을 추가하는 방법에 대해 알아보겠습니다.

 

전체 코드는 https://inventwithpython.com/fabric-js-tutorial/fabric-js-gingerbread-figure.html 또는 JSFiddle에 있습니다. 각 부분을 개별적으로 검토해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fabric.js Gingerbread Figure</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
</head>

<body>
  <!-- The HTML <canvas> element: -->
  <canvas id="gingerbreadCanvasId" width="200" height="200" style="border: 1px solid black;"></canvas>
</body>

다시 말하지만, 이것은 우리 페이지에 대한 표준 HTML 상용구이지만 실제 웹 브라우저에서 볼 수 있는 완전한 예제를 갖기 위해 포함합니다. <canvas> 요소의 ID는 입니다."gingerbreadCanvasId"

<script>
// Create a Fabric.js "Canvas" object that is tied to the HTML <canvas> element:
let canvasObj = new fabric.Canvas('gingerbreadCanvasId');

const GINGERBREAD_COLOR = '#CD803D';

let head = new fabric.Circle({
  left: 100, top: 50, fill: GINGERBREAD_COLOR, radius: 40, originX: 'center', originY: 'center'
})

여러 모양이 색상을 사용하므로 상수에 저장합시다. gungerbread 피규어의 머리에 대한 새 개체를 만들 것입니다. and 속성이 로 설정되어 있기 때문에 and 설정은 왼쪽 위 모퉁이가 아닌 도형 중심점의 X 및 Y 좌표를 참조합니다. 혼란스럽게도, 우리는 여전히 및 속성 이름을 사용해야 합니다.#CD803DGINGERBREAD_COLORfabric.CircleoriginXoriginY'center'lefttoplefttop

let arms = new fabric.Polyline(
  [{x: 0, y: 0}, {x: 100, y:0}], {
    stroke: GINGERBREAD_COLOR, strokeWidth: 40, strokeLineCap: 'round', fill: 'transparent', left: 100, top: 100, originX: 'center', originY: 'center'
  });

let legs = new fabric.Polyline(
  [{x: 0, y: 60}, {x: 30, y: 0}, {x: 60, y: 60}], {
    stroke: GINGERBREAD_COLOR, strokeWidth: 40, strokeLineCap: 'round', fill: 'transparent', left: 100, top: 140, originX: 'center', originY: 'center'
  });

팔과 다리를 만들기 위해 연결된 일련의 선을 나타내는 polyline이라는 새로운 모양을 사용합니다. the에 대한 첫 번째 인수는 및 속성이 있는 개체의 배열입니다.fabric.Polylinexy

팔에는 두 개의 점만 있습니다: 이러한 X 및 Y 좌표는 도형 자체의 데카르트 좌표계를 기준으로 할 수 있으며, 도형은 and 속성을 가진 <canvas> 요소의 위치입니다.[{x: 0, y: 0}, {x: 100, y:0}]lefttop

또는 점 배열에 대해 <canvs> 요소의 좌표계(여기서 0, 0 원점은 <canvas> 요소의 왼쪽 위 모서리임)를 사용한 다음 및 속성을 기본값 및 값으로 유지할 수 있습니다.lefttop00

다리는 세 개의 점이 있는 두 번째 폴리선으로 만들어집니다. [{x: 0, y: 60}, {x: 30, y: 0}, {x: 60, y: 60}]

폴리라인의 색상과 두께는 이 개체의 and 속성에 의해 설정됩니다. 획 색상을 다음과 같이 설정하면 다음과 같은 모양이 제공됩니다.strokestrokeWidthGINGEBREAD_COLOR

 

a를 추가하면 다음 줄이 더 두꺼워집니다.strokeWidth40

 

그러나 진저브레드 피규어를 더 둥글게 보이게 하기 위해 로 설정했습니다. (또는 로 설정할 수도 있으며 기본값은 입니다.)strokeLineCap'round''square''butt''butt'

 

이 설정은 두 끝에만 적용되며 폴리라인의 중간 연결점에는 적용되지 않습니다. legs 폴리라인에 있는 두 선분 간의 연결도 속성을 로 설정하면 반올림할 수 있습니다. (또는 로 설정할 수도 있으며 기본값은 입니다.)strokeLineCapstrokeLineJoin'round''bevel''miter''miter'

폴리라인에 속성이 있다는 것이 이상하게 보일 수 있지만 채워지는 영역은 폴리라인이 그리는 다각형 모양으로 설명됩니다. 전체 셰이프에는 끝점을 시작점에 연결하는 작업이 포함됩니다. 기본적으로 채우기 색상은 검은색입니다. 채우기를 보이지 않게 하고 선만 그리려면 로 설정해야 합니다.fillfill'transparent'

나중에 우리는 모양을 사용할 것입니다.이 모양은 모양과 동일하지만 획은 마지막 점을 첫 번째 점에 다시 연결합니다.fabric.Polygonfabric.Polyline

let mouth = new fabric.Rect({
  left: 100, top: 70, originX: 'center', originY: 'center', fill: 'transparent', stroke: 'white', strokeWidth: 6, width: 40, height: 10, rx: 5, ry: 5, angle: 15
});

입은 흰색 직사각형 윤곽선이지만 모서리의 수평 및 수직 반경을 5픽셀로 설정하여 둥근 모서리를 제공합니다. 사각형은 로 설정하여 시계 반대 방향으로 15도 회전합니다. 이 회전은 라디안 수가 아닌 도 수로 지정됩니다.rxryangle15

let leftEye = new fabric.Circle({
  left: 90, top: 40, fill: 'transparent', stroke: 'white', radius: 10, originX: 'center', originY: 'center'
});

let rightEye = new fabric.Circle({
  left: 110, top: 40, fill: 'transparent', stroke: 'white', radius: 5, originX: 'center', originY: 'center'
});

let topButton = new fabric.Circle({
  left: 100, top: 90, originX: 'center', originY: 'center', radius: 4, fill: 'black', stroke: 'black'
});

let bottomButton = new fabric.Circle({
  left: 100, top: 110, originX: 'center', originY: 'center', radius: 4
});

마지막 모양은 눈과 단추를 위한 4개의 원입니다. 이것들은 우리가 이전에 보았던 것과 동일한 개념을 사용합니다.

canvasObj.add(head);
canvasObj.add(arms);
canvasObj.add(legs);
canvasObj.add(leftEye);
canvasObj.add(rightEye);
canvasObj.add(mouth);
canvasObj.add(topButton);
canvasObj.add(bottomButton);
</script>

마지막으로, 이러한 모양은 각각에 대한 메서드를 호출할 때까지 캔버스에 나타나지 않습니다

728x90
반응형

'개발 언어 > Python' 카테고리의 다른 글

Fabric.js 튜토리얼 1부  (3) 2025.05.31
10강: 파이썬 확장 (C Extensions 소개) - 파이썬 고급편  (6) 2025.05.30
9강: 디스크립터와 property - 파이썬 고급편  (4) 2025.05.30
8강: 타입 힌트와 정적 분석 - 파이썬 고급편  (18) 2025.05.29
7강: 고급 데이터 구조 및 collections 모듈 - 파이썬 고급편  (0) 2025.05.29

관련글

티스토리툴바