[javascript] Fabric.js로 도형의 둘레 위의 포인트 구하기

30 Nov 2023

javascript

우선, 다음과 같은 HTML 구조를 가진 웹 페이지를 준비해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>Fabric.js로 도형의 둘레 위의 포인트 구하기</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <button onclick="getPointsOnPath()">둘레 위의 포인트 구하기</button>
    <script src="script.js"></script>
</body>
</html>

위 코드에서는 Fabric.js 라이브러리를 사용하기 위해 <script> 태그로 라이브러리를 가져왔습니다. 그리고 캔버스를 생성하고, “둘레 위의 포인트 구하기” 버튼을 클릭할 경우 getPointsOnPath 함수를 호출하도록 설정했습니다.

그런 다음, JavaScript 파일인 script.js를 생성하고 다음과 같이 작성해주세요.

const canvas = new fabric.Canvas('canvas');

function getPointsOnPath() {
    const shape = new fabric.Rect({
        width: 100,
        height: 100,
        left: 50,
        top: 50,
        fill: 'blue'
    });

    const path = shape.path[0].path;
    
    for (let i = 0; i < path.length; i++) {
        const point = path[i];
        const circle = new fabric.Circle({
            left: point[1],
            top: point[2],
            radius: 2,
            fill: 'red'
        });
        canvas.add(circle);
    }
}

canvas.add(new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'blue',
    originX: 'left',
    originY: 'top'
}));

위 코드에서는 getPointsOnPath 함수를 작성하여 둘레 위의 포인트를 구하고, 그에 해당하는 작은 원을 생성하여 캔버스에 추가합니다.

getPointsOnPath 함수에서는 fabric.Rect 객체를 생성한 후, 해당 도형의 path 배열을 참조하여 둘레 위의 모든 포인트를 찾아 작은 원을 생성하고 캔버스에 추가합니다.

이제 웹 페이지를 열고 “둘레 위의 포인트 구하기” 버튼을 클릭하면 도형의 둘레 위에 빨간색 작은 원들이 나타납니다.

Fabric.js를 사용하면 다양한 도형과 그래픽 효과를 쉽게 구현할 수 있으며, path 배열을 참조하여 도형의 둘레 위의 포인트를 쉽게 구할 수 있습니다.

References:

Fabric.js 공식 문서