FabricJS를 사용하여 삼각형으로 캔버스를 만드는 방법은 무엇입니까?
Sep 15, 2023 pm 12:33 PM
이 튜토리얼에서는 FabricJS를 사용하여 Triangle 객체로 캔버스를 만드는 방법을 알아봅니다. Triangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 삼각형을 만들려면 Fabric.Triangle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다.
Syntax
new fabric.Triangle({ width: Number, height: Number }: Object)Parameters
Options(선택 사항)− 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등 삼각형 개체와 관련된 속성을 변경할 수 있으며 해당 width 및 height 속성이 있습니다.
Option key
Width − 이 속성은 개체의 너비를 지정하는 number를 허용합니다. 기본값은 100입니다.
Height - 이 속성은 개체의 높이를 지정하는 Number를 허용합니다. 기본값은 100입니다.
예제 1
Fabric.Triangle() 인스턴스를 생성하여 캔버스에 추가
코드 예제를 통해 캔버스에 삼각형을 추가하는 방법을 살펴보겠습니다. 여기서는 너비가 100px이고 높이가 70px인 개체를 만듭니다. 또한 채우기 색상으로 "Orange" 색상을 사용했습니다.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
<p>You can move around the triangle and interact with it</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 55,
top: 60,
width: 100,
height: 70,
fill: "orange",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>예제 2
Set 메소드를 사용하여 Triangle 객체 조작
이 예에서는 set 메소드를 값의 설정자로 사용합니다. 획, 획 너비, 각도, 배율, 회전 등과 관련된 모든 속성은 이 메서드를 사용하여 변경할 수 있습니다.
rreee위 내용은 FabricJS를 사용하여 삼각형으로 캔버스를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7291
9
1622
14
1342
46
1259
25
1206
29
